0

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: "Sanford3@gmail.com",
        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: "Kiley_Schmitt45@yahoo.com",
        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: "Laverna.Wilkinson@hotmail.com",
        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: "Nickolas61@hotmail.com",
        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
}
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).

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.