Freeze first column in the lightning data table lwc

Question

How to freeze the first column vertically of the Lightning Data Table LWC ?

Since LWC is enforcing the shadow DOM style scoping. I have encapsulated the LWC component inside an Aura component and put the CSS targeting inner elements in the CSS file of that aura component. Because Aura components do not enforce strict CSS encapsulation so that CSS will apply. But it is not actually working.

Any help on this will be appreciated.

Below is the code :

dataTable.html

<template>
  <div style="height: 300px;" class="slds-scrollable">
    <lightning-datatable
      key-field="id"
      data={data}
      columns={columns}
      hide-checkbox-column
    >
    </lightning-datatable>
  </div>
</template>

dataTable.js

import { LightningElement, track } from "lwc";

const columns = [
  { label: "Label", fieldName: "name", fixedWidth: 200 },
  { label: "Website", fieldName: "website", type: "url", fixedWidth: 200 },
  { label: "Phone", fieldName: "phone", type: "phone", fixedWidth: 200 },
  { label: "Balance", fieldName: "amount", type: "currency", fixedWidth: 200 },
  { label: "CloseAt", fieldName: "closeAt", type: "date", fixedWidth: 200 }
];

export default class DataTable extends LightningElement {
  @track data = [];
  @track columns = columns;
  async connectedCallback() {
    this.data = [
      {
        name: "Arvel Gorczany",
        email: "[email protected]",
        website: "https://elvie.info",
        amount: "440.08",
        phone: "178-902-8367 x048",
        closeAt: "2020-04-30T22:45:45.398Z",
        id: "d38ab4ae-27c8-4682-b925-433e43a7b6b7"
      },
      {
        name: "Euna Harber",
        email: "[email protected]",
        website: "http://ubaldo.name",
        amount: "40.60",
        phone: "043-315-3894 x8413",
        closeAt: "2020-07-31T19:01:27.026Z",
        id: "c4c6bff8-439c-4575-ae3a-aeee1a90f421"
      },
      {
        name: "Salvador Watsica",
        email: "[email protected]",
        website: "http://hosea.com",
        amount: "593.88",
        phone: "1-784-392-8412 x542",
        closeAt: "2020-05-28T04:11:36.195Z",
        id: "bfe2f084-88a4-4bcb-8e25-7336f656122b"
      },
      {
        name: "Salvatore Rogahn",
        email: "[email protected]",
        website: "https://quentin.org",
        amount: "950.78",
        phone: "831-213-2597 x473",
        closeAt: "2020-06-10T09:05:45.183Z",
        id: "a85bbee4-688e-4d3d-a91e-71570de98be3"
      }
    ];
  }
}

DataTableWrapper.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <c:dataTable></c:dataTable>
</aura:component>

DataTableWrapper.css

.THIS table tr td:first-child {
    position:fixed;
    z-index: 1
}

Answer 1

You can't. Even if you found a hack (e.g. the loadStyles hack), this would eventually stop working. Instead, you would need to implement your own table, or you could try extending the LightningDatatable component (I tried this, and couldn't get it to work, but the LWC documentation suggests it is possible).