[SalesForce] LWC datatable column width responsive

I have a LWC component (NOT Aura) that has a datatable with just one column.

By default, the width of that column is 1000 px, which is way too small.

Using max-column-width="4000" or similar on the lightning-datatable tag i can get the column to size itself to screen width.

However, if the user then resizes the screen, the column does not follow that.

Is there any way to set the column to be 100% width rather than a fixed value in pixels?

As requested, here's the code which is absolutely vanilla…

 <lightning-datatable key-field="Id" data={data} columns={columns} is-loading={loading} max-column-width="4000">
        </lightning-datatable>

Js file:

@track data = [{ Id: '1', Name: 'test', link: '/somewhere/else' }];
@track loading = false;
    columns = [
        { label: 'Name', fieldName: 'link', type: 'url', typeAttributes: {
            label: { fieldName: 'Name' }
          } }
    ];

Best Answer

for me it solved with following css

.datatable-full-size {
  width: 100% !important;
}

And in the html side

<lightning-datatable class="datatable-full-size" key-field="Id" columns={columnsSolutions} data={solutionsList}></lightning-datatable>
Related Topic