Feature: adding top content option

[jonathanl-dropit]

This PR adds the option to include arbitrary content at the top of the scroll container.

The main use case is pages with long tables and additional content above them, such as a summary. Currently the only way to place the summary above is to limit the height of the table based on the viewport and the content, which can cause various UX issues (e.g double scrollbars from the page and table; tiny tables on short screens; etc.)

This solution is to allow including additional JSX inside MRT_TableContainer, and setting its wrapper to be sticky in the horizontal axis so it will not scroll with the table.

The only slight complication is that MRT_TopToolbar needs to be added separately inside the sticky wrapper instead of MRT_TablePaper (this also means adjusting the sticky header's top property).

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
material-react-table	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 9, 2025 2:28pm
material-react-table-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 9, 2025 2:28pm

[KevinVandy]

Thanks for your work, but I don't think this is necessary. MRT has increasingly been designed to be modular so that we won't need many of the table options such as render* or enableTopToolbar and such anymore.

Because, instead, you can just import MRT sub components like MRT_Table, MRT_TableContainer, MRT_TopToolbar, etc. and stitch them together with other components how you want.

I don't see how all of this isn't already possible: https://www.material-react-table.com/docs/guides/toolbar-customization#build-your-own-toolbar