How to Hide Default Row Number Column From Lightning Datatable in Salesforce?

In Salesforce Lightning Web Components, when we create a datatable using the lightning-datable component. It returns a default column displaying the serial number of the rows in the datatable. It also returns a display checkbox column in the default column if we have not defined to hide it.

In this Salesforce tutorial, we will learn how to hide the default row number column from the Lightning datatable in Salesforce.

Table of Contents

Hide Default Row Number Column From Lightning Datatable in Salesforce

In the LWC lightning datatable, the default row number column is useful for identifying rows, but it may not always align with our requirements, such as when we want to utilise that column space to display table data accurately.

Hide Default Row Number Column in Lightning datatable

We can use a static CSS file using the code below to hide the default number column.

:host {
    lightning-datatable .slds-row-number {
        display: none;
    }

    lightning-datatable .slds-table {
        width: 100%;
    }
}

The other way to hide or remove the row number column in the Lightning datatable is to avoid using the show-row-number-column attribute in the HTML file.

We can define the lightning datatable in the following way to hide the checkbox column.

In the JS file of the LWC component, we have defined data in the “tabledata,” and in the columns array, we have defined a table header with its type.

import { LightningElement } from 'lwc';

export default class CustomDatatable extends LightningElement {
    tableData = [
        { id: '1', name: 'Dwayne Smith', age: 30 },
        { id: '2', name: 'Jane Smith', age: 25 }
    ];

    tableColumns = [
        { label: 'Name', fieldName: 'name', type: 'text' },
        { label: 'Age', fieldName: 'age', type: 'number' }
    ];
}

In the HTML file, we will skip the attribute show-row-number-column, and if you have an existing data table, then remove this attribute from the HTML file.

<template>
    <lightning-datatable
        key-field="id"
        data={tableData}
        columns={tableColumns}>
    </lightning-datatable>
</template>

Enter the code below to expose the Lightning component to app pages.

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

After this, deploy the LWC component on the Lightning page, and there you will see that the default row number column is hidden from the data table.

Remove Row Number Column in Salesforce Lightning Datatable

If you are still facing the same issue, then the reason might be that the rows are editable in your LWC Lightning Datatable. For this, we can set the show-row-number-column as false.

<lightning-datatable
    key-field="id"
    data={data}
    columns={columns}
    show-row-number-column="false"
    draft-values={draftValues}
    onsave={handleSave}>
</lightning-datatable>

Ensure that you are correctly applying the show-row-number-column attribute to your lightning-datatable tag.

Hide Default Checkbox Column in Lightning Datatable:

The other default column in the Lightning data table is the checkbox column. To hide the default checkbox column in the datatable, we can add the attribute <hide-checkbox-column> in the HTML file of the LWC component, as shown below.

<lightning-datatable
    key-field="id"
    data={data}
    columns={columns}
    onsave={handleSave}
    hide-checkbox-column>
</lightning-datatable>

If the checkbox column is still visible, then you can set it as “hide-checkbox-column = true.”

Remove Checkbox column from the Lightning datatable

This way, we can hide the default row number column and the checkbox column in the Salesforce LWC lightning data table.

Conclusion

In this Salesforce tutorial, we have learned how to hide the default row number column in the Lightning Data Table. For that, we have customised the HTML template for the row-number-column attribute, and for the editable row, we set the attribute to “false” to hide the row number column.

Along with this, we also discussed how we can hide the default checkbox column by adding the hide-checkbox-column attribute in the HTML file.

Hide Default Row Number Column From Lightning Datatable in Salesforce

Conclusion

Salesforce Data Cloud with Agentforce Data Library

DOWNLOAD FREE AGENTFORCE EBOOK