Fixed Header in Custom Table using LWC in Salesforce

Fixed Header in Custom Table using LWC in Salesforce

Sample Code:

Apex Class:

public with sharing class AccountController {
 
    @AuraEnabled( cacheable = true )
    public static List< Account > fetchAccounts() {
     
        return [ SELECT Id, Name, Industry, AccountNumber, Rating, Type, Phone
                   FROM Account
                  LIMIT 100 ];
         
    }
     
}

Lightning Web Component:

HTML:

<template>
    <div class="slds-box slds-theme--default">
        <div>
            <div class="tableFixHead">
                <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
                    <thead>
                        <tr>
                            <th scope="col">
                                Account Name
                            </th>
                            <th scope="col">
                                Account Number
                            </th>
                            <th scope="col">
                                Industry
                            </th>
                            <th scope="col">
                                Rating
                            </th>
                            <th scope="col">
                                Type
                            </th>
                            <th scope="col">
                                Phone
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <template iterator:it={records}>
                            <tr key={it.value.Id}>
                                <td data-label="Account Name">
                                    <div class="slds-cell-wrap">{it.value.Name}</div>
                                </td>
                                <td data-label="Account Number">
                                    <div class="slds-cell-wrap">{it.value.AccountNumber}</div>
                                </td>
                                <td data-label="Industry">
                                    <div class="slds-cell-wrap">{it.value.Industry}</div>
                                </td>
                                <td data-label="Rating">
                                    <div class="slds-cell-wrap">{it.value.Rating}</div>
                                </td>
                                <td data-label="Type">
                                    <div class="slds-cell-wrap">{it.value.Type}</div>
                                </td>
                                <td data-label="Phone">
                                    <div class="slds-cell-wrap">{it.value.Phone}</div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

JavaScript:

import { LightningElement, wire } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';

export default class Sample extends LightningElement {

    records;
    error;

    @wire( fetchAccounts )  
    wiredAccount( { error, data } ) {

        if (data) {

            this.records = data;
            this.error = undefined;

        } else if ( error ) {

            this.error = error;
            this.records = undefined;

        }

    }  

}

CSS:

.tableFixHead {
    overflow: auto;
    height: 250px;
}

.tableFixHead table {
    border-collapse: collapse;
    width: 100%;
}

.tableFixHead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: white;
 }

Output:

Leave a Reply