Responsive column hiding

[nathan-fletcher-seagull-com]

Some table libraries I have worked with have responsive options or plugins to automatically hide columns on mobile/smaller screens so that there is no side scrolling, and instead display the data from the hidden columns in an expanded details panel.

I didn't see any options like this. I'm guessing it should be handled manually with useMediaQuery and conditionally adjusting hidden columns and the various props in https://www.material-react-table.com/docs/guides/detail-panel such as renderDetailPanel. Does this seem like the correct approach, or are there any other approaches you recommend?

Are there any plans to add a prop like enableResponsive or enableMobileLayout in the future?

[KevinVandy]

I didn't choose to add mobile responsiveness built in because it can be so subjective. You can see in my prop tables source code where I change the column pinning behavior based on a media query. You should be able to do the same with the columnVisibility state + detail panel.

Someone else in the discord recently mentioned they render their own custom mobile rows at a certain media query with the tableBodyProps.children prop, where the whole "row" is more like a custom div panel in mobile instead of columns.

[masterbater]

+1
Been looking for this feature like the datatables handling the responsiveness, no react components libraries I found so far with this capability that is baked in
https://datatables.net/extensions/rowreorder/examples/initialisation/responsive.html

It would be good if there is an example with this kind of implementation
Is there any ways to detect what columns are not in viewport or not visible with using pinned columns and use those columns to add in Detail Panel

[KevinVandy]

probably, but you can also just use the useMediaQuery hook from MUI like in my example given above