Full Width Resizable Grid React Table v8

[victorkvarghese]

Hi,

Any way to build a table that has 100% width and is resizable. auto-size columns to stretch and fit the 100% length?

Right now if we hardcode the width, table looks different in different resolutions. Any way to make sure 100% width is occupied?

[talatkuyuk]

Full width table is a little bit tricky. You can provide full width table via CSS, but you have to get all ths width from the DOM and update the column sizing state of the react table in a useEffect. If you have a toggle icon for fullwidth/halfwidth, you have to keep both column sizing states in a different refs and update the column sizing state of the react table whenever toggle it.

But !, the react table resize handler is not suitable for full width table, why?, because the resizing event only updates the current column sizing in the default resize handler of the react table, but, in a full width tables, the resizing event has to update both the current column and the adjacent column width in order to keep the table stays as a full width. I mean, would be better if some body implement the full width resize handler, and make a PR.

[victorkvarghese]

@talatkuyuk

I was able to create a logic to calculate column width based on available length. This logic will make sure the columns have proper width to fill the space.

Con:
Regarding resizing, It will work but not the way we need for full width table. Resizing will be independent meaning user can reduce the width of column which can cause blank horizontal space inside table.

Apart from that things will work. And yes i agree , need to built a logic for resize handling for full width resizable table.

[talatkuyuk]

@victorkvarghese I've opened an issue for full-width table resizing, waiting response from the authors/contributors.