react-sticky-table | Responsive and dynamically-sized fixed headers and columns | Grid library

Goal

I'm wanting to create a table with a scrolling body and a sticky header. The table header cell widths need to match their corresponding body column widths.

It's in React, and the Table component contain two separate components (one for the header, and another for the rows in the body). The content of the components will be coming from an outside source, so I can't make any assumptions on the widths of anything. The body of the table will have a lot of rows, so the table header is going to need to be sticky and stay at the top.

Problem

While the widths of the columns in the table body are automatically set, the widths are not automatically set in the table head. The table header widths need to be automatically set based on the contents of the table.

You can see the issue and my test code here: https://codesandbox.io/s/y0jx5rp081

Things to note

• I'm open to using plugins or libraries if there's a good enough reason, but would rather not if possible
• I've already tried react-sticky, which doesn't support table format
• I've also tried react-sticky-table, which doesn't allow me to split the table into row components, which I need to do in order to help with more efficient rendering
• Once again, I need the widths to all be set automatically. The only solutions I have seen so far involve setting the width in the header manually