Datatable header Freeze Demo

SK_DataTableFreezeHeaderDemoApp.app

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

SK_DataTableFreezeHeaderDemoCmp.cmp

<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>

SK_DataTableFreezeHeaderDemoCmpController.js

({
	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
		);
    }
})

SK_DataTableFreezeHeaderDemoCmpHelper.js

({
	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);
    }
})

SK_DataTableFreezeHeaderDemoController.apxc

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;
    }

}