Salesforce: SLDS framework data table with fixed header without javascript

Salesforce provided Lightning Design System for build rich enterprise experiences and custom applications. For creating Visualforce list pages Data Tables is the most popular component used to show data. When it comes to show large no. of rows the header are not fixed on table top. If you are landing on this page it is because you are looking for a standard solution to fix the header row. This can be achieved using the standard lightning design system (no custom css or javascript required) as shown in screen-shot

Data Table with fixed header

The tweak is to use standard hidden classes like slds-table–header-fixed_container to create the table. Second important class is slds-cell-fixed which is applied to div inside th element. These classes are the part of Lightning Design System. There is no documentation available on Data Tables till now.

The github feature request for this functionality can be found here Feature Request: Fixed Header Row for slds-table

You can find the fix and working example here:

Data tables with fixed headers – no javascript

The sample code is available here: Data tables with fixed header row. Since the classes are not documented(may be part of coming release) so the solution can be working up to 2.3.3 version. I tested the solution on IE11, Firefox and Chrome browsers.

Update:
Found similar question on Stackexchange

Any type of feedback is welcome 🙂

#Lightning Design System Version used 2.3.2

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s