I found a custom solution, but the official site has recently added the native method. I have, however, rewritten the code to use the tables as a reusable tableContainer
import {
MaterialReactTable,
useMaterialReactTable,
} from 'material-react-table';
import { Box, Typography } from '@mui/material';
import { data } from './makeData';
reusable component passing props from parent component, for reduce hardcode in complex table
const Example = ({ columns, data, renderRowSubComponent }) => {
const table = useMaterialReactTable({
columns,
data,
initialState: { showColumnFilters: true },
enableExpandAll: false, //disable expand all button
muiDetailPanelProps: () => ({
sx: (theme) => ({
backgroundColor:
theme.palette.mode === 'dark'
? 'rgba(255,210,244,0.1)'
: 'rgba(0,0,0,0.1)',
}),
}),
//custom expand button rotation
muiExpandButtonProps: ({ row, table }) => ({
onClick: () => table.setExpanded({ [row.id]: !row.getIsExpanded() }), //only 1 detail panel open at a time
sx: {
transform: row.getIsExpanded() ? 'rotate(180deg)' : 'rotate(-90deg)',
transition: 'transform 0.2s',
},
}),
//conditionally render detail panel
renderDetailPanel: ({ row }) => renderRowSubComponent( row ),
});
return <MaterialReactTable table={table} />;
};
export default Example;`