Implement automatic calculation of the column width when adding it

[iakovalgaev]

2 of the five columns are hidden. When I turn on a column, my --data-table-library_grid-template-columns is updated, but the column takes a different width. And only after the page is refreshed, the included column takes that width from --data-table-library_grid-template-columns

[rwieruch]

Works as intended. But thanks for raising the issue of missing documentation here!

When creating your theme with a custom layout, you can create a dynamic grid-template-layout. Check the following example and let me know if it makes sense:

const HIDEABLE_COLUMNS = 6;

export const getTheme = (hiddenColumns) => ({
  Table: `
    --data-table-library_grid-template-columns: 32px repeat(${HIDEABLE_COLUMNS - hiddenColumns.length}, minmax(0, 1fr)) 36px;
  `,
});

For every hideable but shown column, we allocate a minmax(0, 1fr) grid item. In the example the first and last column are not hideable and take up a fixed space of 36px. The rest of the displayed columns take up all the remaining space evenly.

[iakovalgaev]

I want that when the Theme object changes, the table is updated in accordance with it.

For example. I have three columns "10px 20px 30px". When I swap the first and third columns, I also update --data-table-library_grid-template-column to "30px 20px 10px".
But in the table, the new css is not applied immediately, but only after the update. Library version: 4.0.10

[santiaago]

I had the same issue, even after implementing what @rwieruch suggested.

Then I realised I had horizontalScroll: true as well. Once I removed it the new css is applied dynamically.

So posting here in case someone else has the same issue.