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

Table of Contents

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.

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

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.

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.

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.

create a fixed column LWC data table in Salesforce

We have defined the Account name that is the first column in the columns array with type: ‘customCell’ and typeAttributes for the Name field, applying the custom template for sticky styling.

Create a CSS file in the same LWC component and enter the code to handle the logic of horizontal scrolling, while the first column will be static.

.slds-box {
    padding: 0;
}

.auto-overflow {
    overflow-x: auto;
}

.height-limit {
    max-height: 20rem;
}

.custom-cell {
    padding: 0.5rem;
    min-width: 200px;
    position: sticky;
    left: 0;
    z-index: 1;
}

:host {
    --slds-c-table-header-cell-background-color: #f3f2f2;
}

In this CSS styling, the .auto-overflow { overflow-x: auto; } enables horizontal scrolling.

LWC data table with sticky column feature

For sticky column logic, we added .custom-cell that uses position: sticky; left: 0; z-index: 1 to fix the first column, with padding, background, border, and minimum width.

At last, make the column available to the lightning pages by entering the code below in the meta.xml file.

isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

Now, navigate to the lightning page and deploy the LWC component.

In the data table, you will see that the first column is static or sticky, which is visible on the screen when we scroll the data table horizontally.

Make sure you have enough columns so that columns can be viewed with a horizontal scroll.

This way, we can create an LWC Lightning Data Table in Salesforce with a fixed, frozen, or sticky column that remains static while scrolling the table horizontally.

Conclusion

In this Salesforce tutorial, we have learned how to create a data table with a freeze or static column that will be visible on the screen when we scroll the rest of the table column horizontally.

In Salesforce, we don’t have any default feature to freeze a column, so we added a CSS styling position: sticky, to make the column sticky on the data table. To avoid the default rendering of the sticky column, we created another HTML template and referenced the static column value in that template.

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

Fix a Column in the Salesforce Lightning Data Table

Conclusion

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK