diff --git a/src/pages/Grouping.tsx b/src/pages/Grouping.tsx
index eb1386a..fa75b4c 100644
--- a/src/pages/Grouping.tsx
+++ b/src/pages/Grouping.tsx
@@ -12,15 +12,23 @@ export default function GroupingPage({
       exampleKey="grouping"
       title="Grouping"
       variants={[
-        { name: 'Show Group Bar', props: { showGroupByDropZone: true } },
+        {
+          name: 'Show Group Bar',
+          props: { showGroupByDropZone: true, enableReorder: true },
+        },
         {
           name: 'Preset Group By Category',
-          props: { showGroupByDropZone: true, defaultGroupBy: [{ path: ['category'] }] },
+          props: {
+            showGroupByDropZone: true,
+            enableReorder: true,
+            defaultGroupBy: [{ path: ['category'] }],
+          },
         },
         {
           name: 'Preset Group + Expanded',
           props: {
             showGroupByDropZone: true,
+            enableReorder: true,
             defaultGroupBy: [{ path: ['category'] }],
             defaultExpandedKeys: ['["one"]', '["two"]', '[null]'],
           },
diff --git a/tests/massive-table.grouping.test.tsx b/tests/massive-table.grouping.test.tsx
index cc5b12a..fc89e38 100644
--- a/tests/massive-table.grouping.test.tsx
+++ b/tests/massive-table.grouping.test.tsx
@@ -42,6 +42,41 @@ class MockDataTransfer {
 }
 
 describe('MassiveTable grouping', () => {
+  it('reorders columns while grouped', async () => {
+    const getRows = makeGetRowsGrouped();
+    const onPreview = vi.fn();
+    const onFinal = vi.fn();
+    render(
+      <MassiveTable<Row>
+        getRows={getRows}
+        rowCount={2}
+        columns={columns}
+        showGroupByDropZone
+        enableReorder
+        defaultGroupBy={[{ path: ['a'] }]}
+        onColumnOrderPreviewChange={onPreview}
+        onColumnOrderChange={onFinal}
+        style={{ height: 240, width: 400 }}
+      />,
+    );
+    const headerA = screen.getByRole('button', { name: /^A/ });
+    const headerB = screen.getByRole('button', { name: /^B/ });
+    const dt = new MockDataTransfer();
+    await act(async () => {
+      fireEvent.dragStart(headerA, { dataTransfer: dt });
+      fireEvent.dragOver(headerB, { dataTransfer: dt });
+    });
+    expect(onPreview).toHaveBeenCalled();
+    const lastPreview = onPreview.mock.calls.at(-1)![0];
+    expect(lastPreview).toEqual([1, 0]);
+    await act(async () => {
+      fireEvent.drop(headerB, { dataTransfer: dt });
+      fireEvent.dragEnd(headerA, { dataTransfer: dt });
+    });
+    expect(onFinal).toHaveBeenCalled();
+    const final = onFinal.mock.calls.at(-1)![0];
+    expect(final).toEqual([1, 0]);
+  });
   it('adds a group via header -> group bar drop', async () => {
     const getRows = makeGetRowsGrouped();
     render(