0

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.

enter image description here

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

Kind Regards

Jon

0

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.