Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: adding top content option #1355

Open
wants to merge 2 commits into
base: v3
Choose a base branch
from

Conversation

jonathanl-dropit
Copy link

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).

Copy link

vercel bot commented Jan 8, 2025

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
Copy link
Owner

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.

image

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

@jonathanl-dropit
Copy link
Author

Hey, thanks for your reply.

I don't see how all of this isn't already possible

The critical functionality here is including content inside MRT_TableContainer, so that it will scroll together with the table. The goal of the PR is just to add a slot inside it; the toolbar changes are required to accommodate sticky behavior.

Am I missing a different way to add things inside the scroll container?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants