I have a datatable where it's possible for the user to be able to inform the amount of products he/she wants to purchase. The problem is that as I'm making some columns editable (editable=true), the datatable automatically receives the row numbering column.
By making a column editable, the show-row-number-column attribute is always true and the number column is displayed.
I'm trying to force via CSS that the first column is hidden from the user, but it still doesn't work. Has anyone ever needed to make such a modification to hide the line numbering column? Please, could someone give me a north to do the best way?
.hide-numeric-col table th:first-child,
.hide-numeric-col table td:first-child {
display: none !important;
content: counter(none) !important;
width: 0 !important;
}
.slds-table tr th:first-child {
display: none !important;
content: counter(none) !important;
width: 0 !important;
}
<div class="slds-box hide-numeric-col">
<lightning-datatable
key-field="id"
class="hide-numeric-col"
data={lstProducts} hide-checkbox-column
suppress-bottom-bar
columns={returnColumns}
draft-values={lstProductsDraft}
oncellchange={handleCellChange}>
</lightning-datatable>
</div>