How to Freeze table header in Fiori

[former_member617726]

Hi,

I am using sap.m.table control and want to freeze table header. how to do it?

Is Fiori not recommending freezing the table header? will it effect mobile view?

Please help

[saurabh_vakil]

If you are using SAPUI5 1.54 or higher then you can use the property stick="ColumnHeaders" in the Table declaration as below.

Reference - Fixed header for UI5 Smart Table

<code><Table id="table" mode="MultiSelect" sticky="ColumnHeaders,HeaderToolbar"> 
.... 
<Table>

[former_member617726]

Will it effect the mobile design?

[saurabh_vakil]

No it should not affect the performance on mobile devices in any way. It should freeze the header toolbar and column headers exactly the same way as it does on desktops.

[saurabh_vakil]

There are some limitations on the usage of the sticky property for sap.m.Table, please check out description for this property given here - SAPUI5 SDK - sap.m.Table Properties

[former_member617726]

Getting error - Error: ColumnHeaders is not defined

[saurabh_vakil]

What is your SAPUI5 version? Also, did you check the usage limitations?

[former_member617726]

I am using latest library from https://sapui5.hana.ondemand.com/resources/sap-ui-core.js .

[saurabh_vakil]

I have tried using the CDN from https://sapui5.hana.ondemand.com/resources/sap-ui-core.js in the bootstrap and I'm able to freeze the table column headers and header toolbar without any issues. Are you developing your app in SAP Web IDE?

[former_member617726]

I am using eclipse.

var oTable = new sap.m.Table("idOTable", {
sticky:ColumnHeaders,
inset:true,
growing:true,
});
// Add columns
var col1 = new sap.m.Column("col1FilterSimple",{ popinDisplay:"Block",
hAlign:sap.ui.core.TextAlign.Center,
demandPopin:true,
header: new sap.m.Label({
wrapping:true,
text:"Plant Delivery Date"})});
oTable.addColumn(col1);

var col10 = new sap.m.Column("col10FilterSimple",{
popinDisplay:"Block",
hAlign:sap.ui.core.TextAlign.Center,
demandPopin:true,
minScreenWidth:"Large",
header: new sap.m.Label({wrapping:true,text:"Expected Dispatch Date"})});
oTable.addColumn(col10);

var col2 = new sap.m.Column("col2FilterSimple",{
popinDisplay:"Block",
hAlign:sap.ui.core.TextAlign.Center,
demandPopin:true,
minScreenWidth:"Large",
header: new sap.m.Label({
wrapping:true,
text:"Sale Order No"})});
oTable.addColumn(col2);


var colItems = new sap.m.ColumnListItem("colItemsSimple",{
vAlign:sap.ui.core.VerticalAlign.Middle,
type:"Active"});
oTable.bindAggregation("items","mPeoplea>/materials",colItems);

[saurabh_vakil]

What Eclipse version are you using? Also, what is the SAPUI5 version? As stated earlier, the stick=ColumnHeaders property for the sap.m.Column control is supported since SAPUI5 1.54.

[former_member617726]

SAPUI5 Distribution: 1.68.1 (built at 17.07.2019 15:30:00)-----

I am using CDN library only because library installed on server is 1.28

Eclipse Version: Mars.2 Release (4.5.2)

[saurabh_vakil]

I'm not very sure whether this is an issue with Eclipse. Also, are you looking to deploy this app to the gateway server? If yes, then it won't work as you have mentioned it runs on SAPUI5 1.28.

[former_member617726]

Yes, its on gateway server. but i used CDN library , so it should work, right? i could use the 'sap_belize' theme also.

[saurabh_vakil]

I have created an app with a sap.m.Table showing data using Eclipse Mars 2 (SAPUI5 1.67.0) along with the sticky=ColumnHeaders property in the table and deployed it to a gateway system having SAPUI5 1.44. I am using index.html (referencing the CDN URL for the SAPUI5 runtime in bootstrap, which you have mentioned earlier) to run the app (not running it via the Fiori launchpad).

When I test the app from the gateway server I see that the table column headers do get freezed when I scroll down in the table. I am really not sure about the exact issue at your end, but I can suggest you to update the SAPUI5 version on your Eclipse if it is running on a version lower than 1.54. Also, ideally if you are going to deploy the app on the gateway server then the app should only use features supported by the SAPUI5 version on the server itself.

[former_member617726]

i have acheived this through custom CSS.

Thanks Suarabh for the support..