@redsift/ds-mcp-server 12.5.13-muiv6 → 12.5.13

package/data/demos/patterns/stateful-single-datagrid-client-side/StatefulSingleDatagridClientSide.interaction.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent, waitFor } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-pro';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -626,6 +626,88 @@ export const SortingInteraction: Story = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Row Grouping — set via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _rowGroupingRouter: ReturnType<typeof createMockRouter>;
+let _rowGroupingApiRef: ReturnType<typeof useGridApiRef>;
+
+export const RowGroupingInteraction: Story = {
+  render: () => {
+    _rowGroupingRouter = usePersistentMockRouter();
+    _rowGroupingApiRef = useGridApiRef();
+    return <Example useRouter={_rowGroupingRouter.useRouter} apiRef={_rowGroupingApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _rowGroupingRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Set row grouping to Category', async () => {
+      _rowGroupingApiRef.current!.setRowGroupingModel(['Category']);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_rowGrouping=Category');
+      });
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkRowGrouping: true });
+    });
+
+    await step('Clear row grouping', async () => {
+      _rowGroupingApiRef.current!.setRowGroupingModel([]);
+      await waitFor(() => {
+        expect(getSearch()).not.toContain('_rowGrouping');
+      });
+    });
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Aggregation — set via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _aggregationRouter: ReturnType<typeof createMockRouter>;
+let _aggregationApiRef: ReturnType<typeof useGridApiRef>;
+
+export const AggregationInteraction: Story = {
+  render: () => {
+    _aggregationRouter = usePersistentMockRouter();
+    _aggregationApiRef = useGridApiRef();
+    return <Example useRouter={_aggregationRouter.useRouter} apiRef={_aggregationApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _aggregationRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Set aggregation Paid=sum', async () => {
+      _aggregationApiRef.current!.setAggregationModel({ Paid: 'sum' });
+      await waitFor(() => {
+        expect(getSearch()).toContain('_aggregation=Paid.sum');
+      });
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkAggregation: true });
+    });
+
+    await step('Clear aggregation', async () => {
+      _aggregationApiRef.current!.setAggregationModel({});
+      await waitFor(() => {
+        expect(getSearch()).not.toContain('_aggregation');
+      });
+    });
+  },
+};
+
 // ---------------------------------------------------------------------------
 // Column Order — reorder via apiRef, assert URL
 // ---------------------------------------------------------------------------
@@ -668,6 +750,52 @@ export const ColumnOrderInteraction: Story = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Pivot — activate via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _pivotRouter: ReturnType<typeof createMockRouter>;
+let _pivotApiRef: ReturnType<typeof useGridApiRef>;
+
+export const PivotInteraction: Story = {
+  render: () => {
+    _pivotRouter = usePersistentMockRouter();
+    _pivotApiRef = useGridApiRef();
+    return <Example useRouter={_pivotRouter.useRouter} apiRef={_pivotApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _pivotRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Activate pivot with Category columns, Items rows, Paid sum values', async () => {
+      _pivotApiRef.current!.setPivotModel({
+        columns: [{ field: 'Category' }],
+        rows: [{ field: 'Items' }],
+        values: [{ field: 'Paid', aggFunc: 'sum' }],
+      });
+      _pivotApiRef.current!.setPivotActive(true);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_pivot=');
+      });
+    });
+
+    await step('Assert pivot params in URL', async () => {
+      const search = getSearch();
+      expect(search).toContain('cols:Category');
+      expect(search).toContain('rows:Items');
+      expect(search).toContain('vals:Paid.sum');
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkPivot: true });
+    });
+  },
+};
+
 // ---------------------------------------------------------------------------
 // State variants — with interaction assertions
 // ---------------------------------------------------------------------------

package/data/demos/patterns/stateful-single-datagrid-client-side/example.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { StatefulDataGrid } from '@redsift/table';
+import { StatefulDataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, GridApiPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, useGridApiRef } from '@mui/x-data-grid-premium';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 import { rows } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { CustomToolbar, BulkActionBar } from '../_shared/helpers';
@@ -12,20 +13,20 @@ import { StateDebugPanel } from '../_shared/StateDebugPanel';
 interface Props {
   initialFilterModel?: GridFilterModel;
   useRouter?: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
-  apiRef?: React.MutableRefObject<GridApiPro>;
+  apiRef?: React.MutableRefObject<GridApiPremium | null>;
 }
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: propsApiRef }: Props) => {
   const internalApiRef = useGridApiRef();
   const apiRef = propsApiRef ?? internalApiRef;
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   return (
     <div style={{ width: '100%' }}>
       <StateDebugPanel apiRef={apiRef} useRouter={useRouter} localStorageVersion={1} />
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />

package/data/demos/patterns/stateful-single-datagrid-server-side/StatefulSingleDatagridServerSide.interaction.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent, waitFor } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-pro';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -645,6 +645,92 @@ export const SortingInteraction: Story = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Row Grouping — set via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _rowGroupingRouter: ReturnType<typeof createMockRouter>;
+let _rowGroupingApiRef: ReturnType<typeof useGridApiRef>;
+
+export const RowGroupingInteraction: Story = {
+  render: () => {
+    _rowGroupingRouter = usePersistentMockRouter();
+    _rowGroupingApiRef = useGridApiRef();
+    return <Example useRouter={_rowGroupingRouter.useRouter} apiRef={_rowGroupingApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _rowGroupingRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Set row grouping to Category', async () => {
+      _rowGroupingApiRef.current!.setRowGroupingModel(['Category']);
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_rowGrouping=Category');
+      });
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkRowGrouping: true });
+    });
+
+    await step('Clear row grouping', async () => {
+      _rowGroupingApiRef.current!.setRowGroupingModel([]);
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).not.toContain('_rowGrouping');
+      });
+    });
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Aggregation — set via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _aggregationRouter: ReturnType<typeof createMockRouter>;
+let _aggregationApiRef: ReturnType<typeof useGridApiRef>;
+
+export const AggregationInteraction: Story = {
+  render: () => {
+    _aggregationRouter = usePersistentMockRouter();
+    _aggregationApiRef = useGridApiRef();
+    return <Example useRouter={_aggregationRouter.useRouter} apiRef={_aggregationApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _aggregationRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Set aggregation Paid=sum', async () => {
+      _aggregationApiRef.current!.setAggregationModel({ Paid: 'sum' });
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_aggregation=Paid.sum');
+      });
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkAggregation: true });
+    });
+
+    await step('Clear aggregation', async () => {
+      _aggregationApiRef.current!.setAggregationModel({});
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).not.toContain('_aggregation');
+      });
+    });
+  },
+};
+
 // ---------------------------------------------------------------------------
 // Column Order — reorder via apiRef, assert URL
 // ---------------------------------------------------------------------------
@@ -687,6 +773,53 @@ export const ColumnOrderInteraction: Story = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Pivot — activate via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _pivotRouter: ReturnType<typeof createMockRouter>;
+let _pivotApiRef: ReturnType<typeof useGridApiRef>;
+
+export const PivotInteraction: Story = {
+  render: () => {
+    _pivotRouter = usePersistentMockRouter();
+    _pivotApiRef = useGridApiRef();
+    return <Example useRouter={_pivotRouter.useRouter} apiRef={_pivotApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _pivotRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Activate pivot with Category columns, Items rows, Paid sum values', async () => {
+      _pivotApiRef.current!.setPivotModel({
+        columns: [{ field: 'Category' }],
+        rows: [{ field: 'Items' }],
+        values: [{ field: 'Paid', aggFunc: 'sum' }],
+      });
+      _pivotApiRef.current!.setPivotActive(true);
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_pivot=');
+      });
+    });
+
+    await step('Assert pivot params in URL', async () => {
+      const search = getSearch();
+      expect(search).toContain('cols:Category');
+      expect(search).toContain('rows:Items');
+      expect(search).toContain('vals:Paid.sum');
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkPivot: true });
+    });
+  },
+};
+
 // ---------------------------------------------------------------------------
 // State variants — with interaction assertions
 // ---------------------------------------------------------------------------

package/data/demos/patterns/stateful-single-datagrid-server-side/example.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { StatefulDataGrid } from '@redsift/table';
+import { StatefulDataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, GridSortModel, GridApiPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel, useGridApiRef } from '@mui/x-data-grid-premium';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 import { Row } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';
@@ -13,7 +14,7 @@ import { StateDebugPanel } from '../_shared/StateDebugPanel';
 interface Props {
   initialFilterModel?: GridFilterModel;
   useRouter?: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
-  apiRef?: React.MutableRefObject<GridApiPro>;
+  apiRef?: React.MutableRefObject<GridApiPremium | null>;
 }
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: propsApiRef }: Props) => {
@@ -22,7 +23,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
   const [rows, setRows] = useState<Row[]>([]);
   const [totalRows, setTotalRows] = useState(0);
   const [loading, setLoading] = useState(true);
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   // Refs track the latest model values so fetchData() always reads current state.
   // StatefulDataGrid manages filter/sort/pagination internally — we use callbacks
@@ -57,7 +58,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
       <StateDebugPanel apiRef={apiRef} useRouter={useRouter} localStorageVersion={1} />
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />

package/data/demos/patterns/tabbed-datagrid-server-side/example.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { DataGrid } from '@redsift/table';
 import { Flexbox, Pill, Number, Text, Tabs, Tab } from '@redsift/design-system';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 import { Row } from '../_shared/data';
 import { columns, CATEGORY_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';

package/data/docs/components/dashboard/Dashboard.json

@@ -14,8 +14,8 @@
     },
     {
       "name": "dataGridApiRef",
-      "description": "Datagrid API Ref.",
-      "type": "MutableRefObject<GridApiPro>",
+      "description": "Datagrid API Ref. MUI v8: can be null initially.",
+      "type": "MutableRefObject<GridApiPro | null>",
       "required": false,
       "defaultValue": null,
       "category": "props"

package/data/docs/components/products/DmarcSummaryBoxes.json

@@ -1,6 +1,6 @@
 {
   "name": "DmarcSummaryBoxes",
-  "description": "DmarcSummaryBoxes renders two side-by-side summary boxes for the DMARC card.\n\n- Box 1 (\"Email: Compliance\") summarises whether the specific email passed DMARC.\n  Hidden in domain-analyzer mode (no email to evaluate) and when result is an error.\n- Box 2 (\"Domain: Policy\") summarises the domain's DMARC policy strength. Always shown.\n\nOn smaller viewports (≤765px) the boxes stack vertically.",
+  "description": "",
   "package": "@redsift/products",
   "filePath": "packages/products/src/components/signal-cards/cards/SignalCardDmarc/DmarcSummaryBoxes.tsx",
   "props": [

package/data/docs/components/table/DataGrid.json

@@ -85,17 +85,17 @@
       "category": "props"
     },
     {
-      "name": "className",
-      "description": "",
-      "type": "string",
+      "name": "getTreeDataPath",
+      "description": "Determines the path of a row in the tree data.\nFor instance, a row with the path [\"A\", \"B\"] is the child of the row with the path [\"A\"].\nNote that all paths must contain at least one element.\n@template R\n@param row The row from which we want the path.\n@returns The path to the row.",
+      "type": "(row: any) => readonly string[]",
       "required": false,
       "defaultValue": null,
       "category": "props"
     },
     {
-      "name": "style",
-      "description": "",
-      "type": "CSSProperties",
+      "name": "setTreeDataPath",
+      "description": "Updates the tree path in a row model.\nUsed when reordering rows across different parents in tree data.\n@template R\n@param path The new path for the row.\n@param row The row model to update.\n@returns The updated row model with the new path.",
+      "type": "(path: string[], row: any) => any",
       "required": false,
       "defaultValue": null,
       "category": "props"

package/data/docs/components/table/GridToolbarFilterSemanticField.json

@@ -16,7 +16,7 @@
       "name": "onFilterModelChange",
       "description": "",
       "type": "(filterModel: GridFilterModel) => void",
-      "required": true,
+      "required": false,
       "defaultValue": null,
       "category": "props"
     },

package/data/docs/components/table/StatefulDataGrid.json

@@ -109,17 +109,17 @@
       "category": "props"
     },
     {
-      "name": "className",
-      "description": "",
-      "type": "string",
+      "name": "getTreeDataPath",
+      "description": "Determines the path of a row in the tree data.\nFor instance, a row with the path [\"A\", \"B\"] is the child of the row with the path [\"A\"].\nNote that all paths must contain at least one element.\n@template R\n@param row The row from which we want the path.\n@returns The path to the row.",
+      "type": "(row: any) => readonly string[]",
       "required": false,
       "defaultValue": null,
       "category": "props"
     },
     {
-      "name": "style",
-      "description": "",
-      "type": "CSSProperties",
+      "name": "setTreeDataPath",
+      "description": "Updates the tree path in a row model.\nUsed when reordering rows across different parents in tree data.\n@template R\n@param path The new path for the row.\n@param row The row model to update.\n@returns The updated row model with the new path.",
+      "type": "(path: string[], row: any) => any",
       "required": false,
       "defaultValue": null,
       "category": "props"

package/data/docs/components/table/Toolbar.json

@@ -7,7 +7,10 @@
     {
       "name": "columnsButtonProps",
       "description": "Props to forward to the column button.",
-      "type": "GridToolbarColumnsProps",
+      "type": [
+        "GridToolbarColumnsButtonProps",
+        "GridToolbarColumnsButtonProps & RefAttributes<HTMLButtonElement>"
+      ],
       "required": false,
       "defaultValue": null,
       "category": "props"
@@ -23,7 +26,10 @@
     {
       "name": "densityButtonProps",
       "description": "Props to forward to the density button.",
-      "type": "GridToolbarDensityProps",
+      "type": [
+        "GridToolbarDensitySelectorProps",
+        "GridToolbarDensitySelectorProps & RefAttributes<HTMLButtonElement>"
+      ],
       "required": false,
       "defaultValue": null,
       "category": "props"

package/data/docs/components/table-pro/ControlledPagination.json

@@ -0,0 +1,9 @@
+{
+  "name": "ControlledPagination",
+  "description": "",
+  "package": "@redsift/table-pro",
+  "filePath": "packages/table-pro/src/components/Pagination/ControlledPagination.tsx",
+  "props": [],
+  "examples": [],
+  "tags": {}
+}

package/data/docs/components/table-pro/DataGrid.json

@@ -0,0 +1,114 @@
+{
+  "name": "DataGrid",
+  "description": "DataGrid displays tabular data with sorting, filtering, pagination, and row selection.\nBuilt on MUI X DataGrid Pro with Red Sift styling and theming.\n\nRequires MUI X Pro license key (set via `MUI_LICENSE_KEY` env variable).\n\nUse `createColumn()` to get pre-configured column definitions with typed filter operators.\nSupported types: `string`, `number`, `date`, `dateTime`, `singleSelect`, `multiSelect`, `tags`.\nFor `boolean` columns, use `type: 'boolean'` directly (no createColumn wrapper needed).",
+  "package": "@redsift/table-pro",
+  "filePath": "packages/table-pro/src/components/DataGrid/DataGrid.tsx",
+  "props": [
+    {
+      "name": "license",
+      "description": "License key for MUI Datagrid Pro.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "height",
+      "description": "Height. A default one is set to prevent rendering all rows.",
+      "type": "string",
+      "required": false,
+      "defaultValue": "'500px'",
+      "category": "props"
+    },
+    {
+      "name": "toolbar",
+      "description": "Toolbar. A default one is provided but every button from this default Toolbar can be customized and the entire Toolbar can be replaced.",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "hideToolbar",
+      "description": "Whether the Toolbar is displayed or not.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "paginationPlacement",
+      "description": "Indicates where to render the pagination controls (the \"Rows per page\" + page\nnavigation bar). Independent of `selectionBannerPlacement`.\n\n- `'top'` / `'bottom'` / `'both'` — above / below / both sides of the grid body.\n- `'none'` — no pager controls.\n- `'belowToolbar'` — in a row directly below the toolbar (right-aligned). Pair\n  with `selectionBannerPlacement=\"belowToolbar\"` to get the banner on the left\n  and the pager on the right in the same row. Only applies when `pagination` is enabled.",
+      "type": [
+        "\"top\"",
+        "\"bottom\"",
+        "\"both\"",
+        "\"none\"",
+        "\"belowToolbar\""
+      ],
+      "required": false,
+      "defaultValue": "'both'",
+      "category": "props"
+    },
+    {
+      "name": "selectionBannerPlacement",
+      "description": "Where to render the row-selection banner (the \"All N rows on this page are\nselected…\" line). Independent of `paginationPlacement` — the latter only\ncontrols the pager controls.\n\n- `'top'` — above the toolbar (default, current behaviour).\n- `'bottom'` — in the footer, alongside the bottom pager.\n- `'belowToolbar'` — between the toolbar and the grid body. Rendered via\n  the toolbar slot, so the toolbar slot is forced to render even when\n  `hideToolbar` is set (the toolbar itself stays hidden, only the banner shows).\n  Combine with `paginationPlacement=\"belowToolbar\"` for a banner-left / pager-right\n  row. Only applies when `pagination` is enabled.",
+      "type": [
+        "\"top\"",
+        "\"bottom\"",
+        "\"belowToolbar\""
+      ],
+      "required": false,
+      "defaultValue": "'top'",
+      "category": "props"
+    },
+    {
+      "name": "paginationProps",
+      "description": "Props to forward to the pagination component.",
+      "type": "Omit<TablePaginationProps, \"paginationMode\" | \"component\" | \"count\" | \"onPageChange\" | \"onRowsPerPageChange\" | \"page\" | \"rowsPerPage\" | \"rowsPerPageOptions\">",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "theme",
+      "description": "Theme.",
+      "type": [
+        "\"light\"",
+        "\"dark\""
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "getTreeDataPath",
+      "description": "Determines the path of a row in the tree data.\nFor instance, a row with the path [\"A\", \"B\"] is the child of the row with the path [\"A\"].\nNote that all paths must contain at least one element.\n@template R\n@param row The row from which we want the path.\n@returns The path to the row.",
+      "type": "(row: any) => readonly string[]",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "setTreeDataPath",
+      "description": "Updates the tree path in a row model.\nUsed when reordering rows across different parents in tree data.\n@template R\n@param path The new path for the row.\n@param row The row model to update.\n@returns The updated row model with the new path.",
+      "type": "(path: string[], row: any) => any",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    }
+  ],
+  "examples": [],
+  "tags": {},
+  "keywords": [
+    "data grid",
+    "data table",
+    "table",
+    "grid view",
+    "list view",
+    "spreadsheet"
+  ]
+}