How to freeze datatable header using slds standard classes

There is common scenario to freeze the table header and providing scrollbar to table body. This can be achieved by using standard slds classes no need to add custom CSS for that.

You have to use below mentioned slds classes:

• slds-table--header-fixed_container : add this class on div by specifying the height for div
• slds-table--header-fixed :add this class to table
• slds-cell-fixed: add this class to <th> tag.

I have created a sample to display account list in data table inside slds card. Please find below sample code:

	<aura:application extends="force:slds">
	<c:SK_DataTableFreezeHeaderDemoCmp />
	</aura:application>

view raw SK_DataTableFreezeHeaderDemoApp.app hosted with ❤ by GitHub

	<aura:component controller="SK_DataTableFreezeHeaderDemoController">
	<aura:attribute name="accSearchValue" type="String"/>
	<aura:attribute name="recList" type="List" />
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<div class="slds-card">
	<div class="slds-card__header slds-grid">
	<header class="slds-media slds-media_center slds-has-flexi-truncate">
	<div class="slds-media__figure">
	<lightning:Icon iconName="standard:account" size="small"
	class="slds-icon slds-input__icon slds-input__icon_right " />
	</div>
	<div class="slds-media__body">
	<h2>
	<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Account List">
	<span class="slds-text-heading_small">Searched Account List</span>
	</a>
	</h2>
	</div>
	</header>
	<div class="slds-no-flex">
	<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
	<lightning:input value="{!v.accSearchValue}" placeholder="Search" type="text" label="" name="Account Search" onchange="{!c.doInit}"/>
	</div>
	</div>
	</div>
	<div class="slds-card__body slds-card__body_inner">
	<div class="slds-table--header-fixed_container" style="height:250px;">
	<div class="slds-scrollable_y" style="height:100%;">
	<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table--header-fixed">
	<thead>
	<tr class="slds-text-title--caps">
	<th scope="col" ><div class="slds-truncate slds-cell-fixed" title="Name">Name</div></th>
	<th scope="col"><div class="slds-truncate slds-cell-fixed" title="Name">Type</div></th>
	<th scope="col" ><div class="slds-truncate slds-cell-fixed" title="Name">Industry</div></th>
	</tr>
	</thead>
	<aura:iteration items="{!v.recList}" var="item">
	<tr>
	<td> {!item.Name}</td>
	<td> {!item.Type}</td>
	<td> {!item.Industry}</td>
	</tr>
	</aura:iteration>
	</table>
	</div>
	</div>
	</div>
	<footer class="slds-card__footer">@copyright:sunil02kumar</footer>
	</div>
	</aura:component>

view raw SK_DataTableFreezeHeaderDemoCmp.cmp hosted with ❤ by GitHub

	({
	doInit : function(component, event, helper) {
	var ltngSearchStr = component.get("v.accSearchValue");
	var params ={"searchStr":ltngSearchStr};
	helper.callToServer(
	component,
	"c.findRecords",
	function(response)
	{
	console.log('apex response :'+JSON.stringify(response));
	component.set("v.recList",response);
	},
	params
	);
	}
	})

view raw SK_DataTableFreezeHeaderDemoCmpController.js hosted with ❤ by GitHub

	({
	callToServer : function(component, method, callback, params) {
	console.log('Calling helper callToServer function');
	var action = component.get(method);
	if(params){
	action.setParams(params);
	}
	console.log('****param to controller:'+JSON.stringify(params));
	action.setCallback(this, function(response) {
	var state = response.getState();
	if (state === "SUCCESS") {
	callback.call(this,response.getReturnValue());
	}else if(state === "ERROR"){
	alert('Problem with connection. Please try again.');
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw SK_DataTableFreezeHeaderDemoCmpHelper.js hosted with ❤ by GitHub

	public class SK_DataTableFreezeHeaderDemoController {
	@auraEnabled
	public static List<Account> findRecords(string searchStr){
	List<Account> returnList=new List<Account>();
	string queryString = 'select id, name,type,industry from account ';
	if(searchStr!=null && searchStr!=''){
	searchStr = '%'+String.escapeSingleQuotes(searchStr)+'%';
	queryString = queryString + ' where name LIKE:searchStr';
	}
	queryString = queryString + ' LIMIT 100';
	returnList=database.query(queryString);
	return returnList;
	}
	}

view raw SK_DataTableFreezeHeaderDemoController.apxc hosted with ❤ by GitHub

Hope this will help!!!