lightning-datatable row number error

Question

I have a lightning web component, using lighting-datatable with row-numbers visible. This works well up to 99 records... then I get this:

[![enter image description here][1]][1]

My component code:

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

Is the row numbering limited, am I doing something wrong, or is this a bug? Any workarounds?

Answer 1

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.