How to Fix or Freeze a Column in Salesforce Lightning Data Table?

In Salesforce Lightning data tables, we don’t have any built-in feature to freeze a column in LWC Lightning data tables. However, we can fix or freeze a table column in the LWC data table using the custom CSS method and combining it with JavaScript logic.

With the feature of fixing a column in a data table, we can make a column static and pin it while allowing the rest of the table to scroll horizontally.

In this Salesforce tutorial, we will learn how to fix a field column in the LWC data table using the CSS property “position: sticky“.

Fix a Column in the Salesforce Lightning Data Table

In the example below, we will create the LWC data table with a fixed column to display account records.

1. First, we will create a controller class to fetch the account records in the LWC data table. Ensure that you added enough field columns to make horizontal scrolling visible on the data table.

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, Industry, AnnualRevenue,YearStarted,Rating 
                FROM Account 
                WHERE Name != null 
                ORDER BY Name 
                LIMIT 20];
    }
}

2. Create an LWC component and enter the code below in the HTML file.

<template>
    <div class="slds-box auto-overflow height-limit">
        <lightning-datatable
            key-field="Id"
            data={accounts}
            columns={columns}
            hide-checkbox-column="true"
        ></lightning-datatable>
    </div>
</template>

In the above HTML file, we have used data={accounts} and columns={columns} to bind the fetched accounts data in the columns array.

3. Create another HTML template to define the sticky column rendering separately. In this, I have labelled it as customCellTemplate.html.

It is required; otherwise, the data table would use its default cell rendering, and we couldn’t apply the sticky positioning to just a single column.

<template>
    <div class="custom-cell">{value}</div>
</template>

The “value” will refer to the logic of the sticky column that we will define in the JS code.

4. In the JavaScript file, enter the code below defining the logic for the fixed column size of the fields in the data table.

import LightningDatatable from 'lightning/datatable';
import customCellTemplate from './customCellTemplate.html';
import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class CombinedDatatable extends LightningDatatable {
    static customTypes = {
        customCell: {
            template: customCellTemplate,
            standardCellLayout: true,
            typeAttributes: ['value']
        }
    };

    accounts = [];

    columns = [
        {
            label: 'Account Name',
            fieldName: 'Name',
            type: 'customCell',
            typeAttributes: {
                value: { fieldName: 'Name' }
            }
        },
        { label: 'Account Owner', fieldName: 'OwnerId', type: 'text' },
        { label: 'Industry', fieldName: 'Industry', type: 'text' },
        { label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency' }
    ];

    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
        } else if (error) {
            console.error('Error fetching accounts:', error);
        }
    }
}

In the above code, we have imported LightningDatatable and customCellTemplate, extending CombinedDatatable with a customCell type in static “customTypes“. This links to the second template we created and enables the sticky column.