0

I am trying to remove the first row in my datatable as the row numbers do not reflect the total records in the list, just what is present in the current page. However, I cannot find anyway to disable to first row, I am aware that it is forced if inline editing is enabled, however shouldn't CSS be enough for this change?

All Order Product Summaries Table

Here is my html code:

<div style="width: auto">
  <lightning-datatable
      class="remove_row"
      key-field="Id"
      show-row-number-column= "false"
      data={records}
      columns={columns}
      default-sort-direction={defaultSortDirection}
      sorted-direction={sortDirection}
      sorted-by={sortedBy}
      onsort={onHandleSort}
      hide-checkbox-column="true"
      draft-values={draftValues}
      onsave={handleSave}
      onrowaction={handleRowAction}>
  </lightning-datatable>
</div>

Here is my CSS

.THIS .remove_row .span.slds-row-number {display:none !important;;}
.THIS.remove_row td:nth-child(1){ display:none !important; }
.THIS .remove_row th:nth-child(1){ display:none !important; }
.THIS .slds-table tr th:first-child{
   width: 0px !important;
}
.THIS .remove_row .slds-row-number .slds-text-body_small .slds-text-color_weak {
   display: none;
}
.THIS .remove_row .slds-table .slds-row-number:after {
   content: counter(row-number);
}

None of the above code makes any difference. Tried it with and out `.THIS, class name etc.

Thanks in advance!

2 Answers 2

2
  1. You're confusing LWC with Aura. .THIS is a specific Aura construct.
  2. You cannot pass custom css classes to a lightning-datatable, and as mentioned, you cannot otherwise directly manipulate the CSS because of the Shadow DOM. You do have options though

See https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

Adding Styles To Columns

Pass Lightning Design System classes to cellAttributes when using standard data types.

const columns = [
    {
        label: 'Account Name',
        fieldName: 'Name',
        cellAttributes: {
            class: 'slds-text-color_success slds-text-title_caps',
        },
    }, // other column data
];

Custom classes are currently not supported. To apply custom styling on your datatable cells, create a custom data type and then apply your custom CSS classes. See Custom Data Type Layout and Styles.

2

You have to modify the records property (which should be an array of objects) and remove it from there, instead of trying to hide the row with CSS which won't work due to the nature of shadow DOM.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .