Full width table

[bogdancss]

Hey - this hook is very useful and should be mentioned on the react-table readme - thank you!

I am trying to modify the example provided and make it go full width, and adapt the width of the columns. Do you have any suggestions for this?

[GuillaumeJasmin]

Hi, It seems currently impossible to have a full width with native CSS. It' like the resizing example of react-table. If you let the browser define the width of cell for you, it will try to show all cells without any scroll. You could try to manually set the width of table after the first render, it's not clean but I don't see any suggestions now.

I'm sure there is better solution, but it need some time and research to find a better implementation. If you find it, share it :) . Thanks !

[Chochek]

Hi, I managed to get it to work (sort of). It's not perfect but it's good enough. The sticky columns will always be the same width but the rest of the columns will grow to fill the table width. On really big screens this might look a little weird but for most screen sizes it should be ok.

I set the min-width: 100%; on .header (and .footer if you need it), then on the .row I set min-width: 100%;, and lastly I set .th:not([data-sticky-td]) { flex-grow: 1; } and .td:not([data-sticky-td]) { flex-grow: 1; }

Check it out here (zoom out to confirm that the non-sticky columns grow to fill the width)

[Anas2258]

Hi, I managed to get it to work (sort of). It's not perfect but it's good enough. The sticky columns will always be the same width but the rest of the columns will grow to fill the table width. On really big screens this might look a little weird but for most screen sizes it should be ok.

I set the min-width: 100%; on .header (and .footer if you need it), then on the .row I set min-width: 100%;, and lastly I set .th:not([data-sticky-td]) { flex-grow: 1; } and .td:not([data-sticky-td]) { flex-grow: 1; }

Check it out here (zoom out to confirm that the non-sticky columns grow to fill the width)

Thank you so much man! you saved my day.