How to Fix Columns in Lightning Datatable (LWC): A Practical Guide for Salesforce Developers

Working with large datasets in Salesforce often requires displaying tables that scroll horizontally. But when key identifying columns scroll out of view, it can hurt user experience. This is where the ability to freeze or fix columns in a Lightning Datatable (LWC) becomes essential—especially for admin-facing or data-heavy enterprise applications.

In this guide, we’ll walk through a tested method to freeze the first 3 columns in a lightning-datatable while maintaining full functionality, styling, and responsiveness. This is based on a real-world Salesforce project we handled at iBirds Software Services, where out-of-the-box options fell short and a creative workaround delivered the solution.

Before we dive in, it’s worth noting that this approach was first explored and implemented by Rahul Joshi. You can find the source code on his GitHub profile for reference.

Why Fix Columns in Lightning Datatable?

Lightning Datatable is a flexible and powerful base component provided by Salesforce Lightning Web Components (LWC). However, one known limitation is its inability to directly support fixed columns natively during horizontal scroll.

Why might you need fixed columns?

• Improved readability: Keep key identifiers (like Name or ID fields) always visible.
• Better user experience: Especially useful in large, scrollable tables with many data points.
• Enterprise-grade interfaces: For users managing inventory, finance, or CRM data, fixed columns help avoid confusion during navigation.

But due to Shadow DOM encapsulation, you can’t directly override the internal styling of lightning-datatable using your component’s CSS. So how do we work around this?

Our Approach: Using Static Resources to Override Shadow DOM Styling

To fix the first three columns, we used a combination of:

• Custom CSS injected through a static resource
• Targeted CSS selectors scoped at runtime
• JavaScript logic (if needed) to apply styles once rendering is complete

Let’s break it down step-by-step.

Step 1: Create a Custom CSS File

First, we created a CSS file that contains styles to “freeze” the first 3 columns of the Lightning Datatable. The basic approach is to apply position: sticky to specific column elements.

css
CopyEdit
/* freeze-columns.css */
.slds-table thead th:nth-child(1),
.slds-table tbody td:nth-child(1),
.slds-table thead th:nth-child(2),
.slds-table tbody td:nth-child(2),
.slds-table thead th:nth-child(3),
.slds-table tbody td:nth-child(3) {
  position: sticky;
  left: 0;
  background: white;
  z-index: 2;
  box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
.slds-table thead th:nth-child(2),
.slds-table tbody td:nth-child(2) {
  left: 100px; /* Adjust based on width of column 1 */
}
.slds-table thead th:nth-child(3),
.slds-table tbody td:nth-child(3) {
  left: 200px; /* Adjust based on total width of columns 1 & 2 */
}

Tip: Adjust the left values depending on your actual column widths.

Why Use Static Resource?

Since Lightning components use Shadow DOM, normal component-scoped CSS won’t penetrate into the DOM of standard base components. Uploading the stylesheet as a Static Resource and injecting it globally ensures the styles are applied.

Step 2: Upload the CSS File to Salesforce

1. Go to Setup → Static Resources
2. Click New
3. Upload the CSS file (e.g., freeze-columns.css)
4. Set the Cache Control to Public

Step 3: Inject the CSS Dynamically in Your LWC

Inside your LWC JavaScript file, you can load the static resource and inject it into the document head like this:

js
CopyEdit
import { loadStyle } from 'lightning/platformResourceLoader';
import freezeColumns from '@salesforce/resourceUrl/freeze_columns';

export default class YourComponent extends LightningElement {
  connectedCallback() {
    loadStyle(this, freezeColumns)
      .then(() => {
        console.log('Custom CSS for fixed columns loaded.');
      })
      .catch(error => {
        console.error('Error loading custom CSS', error);
      });
  }
}

This makes the CSS available globally, and the styling will take effect once the DOM is rendered.

Step 4: Use Standard Lightning-Datatable as Usual

No change is needed to how you use lightning-datatable. The CSS we injected will apply directly once the DOM is available. Here’s a basic markup example:

html
CopyEdit
<template>
  <lightning-card title="Fixed Column Datatable">
    <lightning-datatablekey-field="id"
      data={tableData}
      columns={columns}
      hide-checkbox-column
    ></lightning-datatable>
  </lightning-card>
</template>

You can define your columns and data just like a normal LWC implementation.

Things to Keep in Mind

• Performance: For very large datasets, fixed columns with position: sticky can introduce lag on slower devices.
• Responsiveness: You may need media queries to adjust styles for mobile layouts.
• Column Widths: Set fixed widths for your first three columns to maintain alignment.
• Z-index Issues: When using sticky headers and columns together, z-index management is crucial to prevent overlapping issues.

Results: Seamless User Experience for Large Tables

With this implementation, users can scroll through the table horizontally while the first 3 columns remain visible. This was especially helpful for the client’s internal dashboards where key fields like Customer ID, Name, and Region were required to remain visible at all times.

This approach is:

• Fully compatible with Salesforce LWC
• Doesn’t require modifying the base lightning-datatable component
• Works well across modern browsers

Use Cases Across Salesforce Applications

• Sales Operations Dashboards: Track pipeline stages while keeping customer names visible
• Inventory Management: Freeze product IDs while browsing dynamic stock levels
• HR Systems: Maintain employee names while viewing leave balances, appraisal scores, etc.

Final Thoughts

While Salesforce’s Lightning Datatable is robust, it still lacks certain front-end flexibility out-of-the-box. By creatively using static resources to inject global CSS, you can overcome one of its key limitations and build a more user-friendly interface—without using third-party libraries or reinventing the wheel.

If you’re working on custom Salesforce apps where data visibility and usability matter, this approach to fixing columns in LWC datatables is a practical enhancement worth implementing.

---

About iBirds Software Services

At iBirds, we specialize in Salesforce development, implementation, and customization. Our team handles real-world business use cases with precision and innovation—like solving challenges with fixed datatable columns in Lightning components. If you’re looking for expert Salesforce consulting or hands-on development support, we’d be happy to talk.