[SalesForce] LWC Datatable – Get the Row Number when editing a column

Just figured it out myself. I didn't have show-row-number-column in the html. Now it works fine. But, that brings up a different question... what if I didn't want to show row numbers. The docs suggest that I would just leave show-row-number-column out of the markup and then they won't show. But I didn't have it in the markup before and they displayed.

Updated markup:

<lightning-datatable
    key-field="id"
    data={responses}
    columns={columns}
    onsort={handleSort}
    sorted-by={sortedBy}
    sorted-direction={sortedDirection}
    onrowaction={handleRowAction}
    show-row-number-column
    enable-infinite-loading
    onloadmore={handleLoadMore}>
</lightning-datatable>

BTW, there's a lot more info in the dev guide here that isn't detailed in the reference materials. In particular, how to handle draftValues, which is necessary to get the Cancel/Save buttons to disappear after an inline edit.

Ideally you should fire event with data of record identifier (Id field) which should be handled in parent component for fetching whole record based on passed Id and then showing record data in modal and the modal should be implemented in parent component which will show up in this event handler.

Explanation:

just pass the Id for fieldName without typeAttributes as below:

{ label: 'DETAILS', type: 'detailsButton', fieldName: 'Id', fixedWidth: 70, cellAttributes: { alignment: "center" }}

In the custom component dispatch event with composed and bubbles as true so that it becomes API for datatable:

this.dispatchEvent(new CustomEvent('showmodal', {
        detail: {
            recordId: this.recordId
        },
        bubbles: true,
        composed: true
    }));

You should define @api recordId and assign the value to recordId in custom component template so that value comes from mentioned fieldName - which is Id. You can refer to this example for understanding importance of value in template.

Now in the parent component handle the event:

<c-my-datatable onshowmodal={handleShowModal}