Lightning Datatable doesn't render correctly when loaded

Question

I've added a Lightning Datatable to my Lightning component, but when it is initially rendered the data columns are all squashed into the width of the current view and I get 2 scroll bars - one for the actual table and one for the data. Clicking anywhere in the table causes it to display correctly, but its not a great UX.

Has anyone else had this and found a way around it?

Kind Regards

Jon

Answer 1

It looks like this was something to do with the markup. I originally used:

<lightning-datatable
                key-field="Id"
                data={myData.data}
                columns={myColumns}
                column-widths-mode='auto'
                min-column-width="50"
                hide-checkbox-column = 'true'
                onheaderaction={handleHeaderAction}>
        </lightning-datatable>

changing it to the following fixed this issue

<lightning-datatable
    key-field="Id"
    data={myData.data}
    columns={myColumns}
    onheaderaction={handleHeaderAction}
    hide-checkbox-column = 'true'>
</lightning-datatable>

So guessing its something to do with either column-widths-mode='auto' or min-column-width="50" (or both).