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 ;
+};