diff --git a/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx b/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx index 4ffad0838..05b8c8580 100644 --- a/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx +++ b/packages/material-react-table/stories/features/ColumnGrouping.stories.tsx @@ -3,9 +3,11 @@ import { type MRT_Column, type MRT_ColumnDef, MaterialReactTable, + useMaterialReactTable, } from '../../src'; import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; +import { Button } from '@mui/material'; const meta: Meta = { title: 'Features/Column Grouping Examples', @@ -360,3 +362,59 @@ export const GroupingAndDraggingWithSomeDisabledGrouping = () => { /> ); }; + +export const GroupingBug = () => { + const [open, setOpen] = useState(false); + + return ( + <> + + + {open && } + + ); +}; + +const GroupingTableBug = () => { + const columns = useMemo[]>( + () => [ + { + accessorKey: 'firstName', + enableGrouping: false, + header: 'First Name', + }, + { + accessorKey: 'lastName', + header: 'Last Name', + }, + ], + [], + ); + + const rowCount = useMemo(() => data.length ?? 0, [data.length]); + + const table = useMaterialReactTable({ + rowCount, + enableRowVirtualization: true, + columns, + data, + enableGrouping: true, + groupedColumnMode: 'remove', + enablePagination: false, + initialState: { expanded: true }, + state: { grouping: ['firstName'] }, + + // Bug when set `enableTopToolbar: false` + enableTopToolbar: false, + }); + + console.log('[table] rowModel', table.getRowModel()); + + return ; +};