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

package/data/docs/llms-full.txt

@@ -3,7 +3,7 @@
 This file contains comprehensive documentation for all components in the Red Sift Design System.
 It is optimized for LLM consumption and includes props, types, defaults, and usage examples.
 
-Generated: 2026-04-15T11:48:43.043Z
+Generated: 2026-04-10T18:15:31.360Z
 Total Components: 228
 
 ---
@@ -6034,10 +6034,10 @@ For `boolean` columns, use `type: 'boolean'` directly (no createColumn wrapper n
 | toolbar | ReactNode | No | - | Toolbar. A default one is provided but every button from this default Toolbar can be customized and the entire Toolbar can be replaced. |
 | hideToolbar | false \| true | No | - | Whether the Toolbar is displayed or not. |
 | paginationPlacement | "top" \| "bottom" \| "both" \| "none" | No | 'both' | Indicates how to display pagination. |
-| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "page" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
+| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
 | theme | "light" \| "dark" | No | - | Theme. |
-| className | string | No | - |  |
-| style | CSSProperties | No | - |  |
+| getTreeDataPath | (row: any) => readonly string[] | No | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element. @template R @param row The row from which we want the path. @returns The path to the row. |
+| setTreeDataPath | (path: string[], row: any) => any | No | - | Updates the tree path in a row model. Used when reordering rows across different parents in tree data. @template R @param path The new path for the row. @param row The row model to update. @returns The updated row model with the new path. |
 
 ---
 
@@ -6053,7 +6053,7 @@ The GridToolbarFilterSemanticField component.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | nlpFilterConfig | FilterConfig | Yes | - |  |
-| onFilterModelChange | (filterModel: GridFilterModel) => void | Yes | - |  |
+| onFilterModelChange | (filterModel: GridFilterModel) => void | No | - |  |
 | dateFormat | string | No | - |  |
 | defaultModel | string | No | - |  |
 | defaultFilter | CompletionResponse | No | - |  |
@@ -6092,10 +6092,10 @@ Use when users need persistent table preferences. Requires unique `localStorageK
 | toolbar | ReactNode | No | - | Toolbar. A default one is provided but every button from this default Toolbar can be customized and the entire Toolbar can be replaced. |
 | hideToolbar | false \| true | No | - | Whether the Toolbar is displayed or not. |
 | paginationPlacement | "top" \| "bottom" \| "both" \| "none" | No | 'both' | Indicates how to display pagination. |
-| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "page" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
+| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
 | theme | "light" \| "dark" | No | - | Theme. |
-| className | string | No | - |  |
-| style | CSSProperties | No | - |  |
+| getTreeDataPath | (row: any) => readonly string[] | No | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element. @template R @param row The row from which we want the path. @returns The path to the row. |
+| setTreeDataPath | (path: string[], row: any) => any | No | - | Updates the tree path in a row model. Used when reordering rows across different parents in tree data. @template R @param path The new path for the row. @param row The row model to update. @returns The updated row model with the new path. |
 
 ---
 
@@ -6130,9 +6130,9 @@ The Cell component.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| columnsButtonProps | GridToolbarColumnsProps | No | - | Props to forward to the column button. |
+| columnsButtonProps | GridToolbarColumnsButtonProps \| GridToolbarColumnsButtonProps & RefAttributes<HTMLButtonElement> | No | - | Props to forward to the column button. |
 | columnsButtonRef | RefObject<HTMLButtonElement> | No | - | Column button ref. |
-| densityButtonProps | GridToolbarDensityProps | No | - | Props to forward to the density button. |
+| densityButtonProps | GridToolbarDensitySelectorProps \| GridToolbarDensitySelectorProps & RefAttributes<HTMLButtonElement> | No | - | Props to forward to the density button. |
 | densityButtonRef | RefObject<HTMLButtonElement> | No | - | Density button ref. |
 | exportButtonProps | GridToolbarExportProps | No | - | Props to forward to the export button. |
 | exportButtonRef | RefObject<HTMLButtonElement> | No | - | Export button ref. |
@@ -6205,7 +6205,7 @@ When one chart is filtered, all connected charts update automatically.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | data | JSONArray | Yes | - | Dataset that will be share across every components within the dashboard. |
-| dataGridApiRef | MutableRefObject<GridApiPro> | No | - | Datagrid API Ref. |
+| dataGridApiRef | MutableRefObject<GridApiPremium \| null> | No | - | Datagrid API Ref. MUI v8: can be null initially. |
 
 ---
 
@@ -7871,7 +7871,7 @@ Each pattern describes a common UI scenario, the components involved, how they a
 ## Datagrid Page
 **Description:** Full-page MUI DataGrid with built-in Toolbar (columns, filters, density, export, quick search). Uses GridColDef[] with createColumn() for typed filter operators (string, number, date, singleSelect, multiSelect, tags), renderCell with TextCell and Pill, pagination, and checkboxSelection. All filtering, sorting, and pagination happen client-side — all rows are loaded into the DataGrid at once. Optionally includes bulk selection actions (rowSelectionModel + onRowSelectionModelChange). For server-side data handling, see the Server Datagrid Page pattern. Matches the table pattern used across OnDMARC, Certificates, and Brand Trust.
 **Components:** DataGrid, TextCell, StatefulDataGrid, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink
-**Packages:** @redsift/table, @redsift/design-system, @mui/x-data-grid-pro
+**Packages:** @redsift/table, @redsift/design-system, @mui/x-data-grid-premium
 **Layout:** DataGrid with autoHeight, pagination, pageSize, built-in Toolbar via componentsProps.toolbar.showQuickFilter. Optional bulk actions bar when selectionModel.length > 0.
 **Tags:** table, datagrid, list, pagination, filter, toolbar, bulk-actions, GridColDef, filterModel, checkboxSelection, client-side
 
@@ -7954,22 +7954,22 @@ type Row = {
 
 ```tsx
 import React, { useState } from 'react';
-import { DataGrid } from '@redsift/table';
+import { DataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel } from '@mui/x-data-grid-premium';
 import { rows } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { CustomToolbar, BulkActionBar } from '../_shared/helpers';
 import { DEFAULT_FILTER_MODEL, DEFAULT_SORT_MODEL } from '../_shared/defaults';
 
 export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }) => {
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   return (
     <div style={{ width: '100%' }}>
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />
@@ -8008,7 +8008,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
 ## Server Datagrid Page
 **Description:** Full-page MUI DataGrid where filtering, sorting, and pagination are all handled server-side. Uses paginationMode='server', sortingMode='server', filterMode='server' with controlled rowCount and loading props. The same column types and toolbar as the client-side Datagrid Page pattern, but only the current page of data is fetched per request. Filter changes are debounced to avoid excessive requests. Ideal for datasets too large to load entirely in the browser.
 **Components:** DataGrid, TextCell, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink
-**Packages:** @redsift/table, @redsift/design-system, @mui/x-data-grid-pro
+**Packages:** @redsift/table, @redsift/design-system, @mui/x-data-grid-premium
 **Layout:** DataGrid with autoHeight, paginationMode='server', sortingMode='server', filterMode='server', rowCount, loading, built-in Toolbar. Optional bulk actions bar when selectionModel.length > 0.
 **Tags:** table, datagrid, server-side, pagination, paginationMode, filterMode, sortingMode, loading, rowCount, filter, toolbar, bulk-actions, GridColDef, filterModel, sortModel, debounce
 
@@ -8119,9 +8119,9 @@ type FetchResult = {
 
 ```tsx
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { DataGrid } from '@redsift/table';
+import { DataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-premium';
 import { Row } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';
@@ -8136,7 +8136,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
   const [pageSize, setPageSize] = useState(10);
   const [sortModel, setSortModel] = useState<GridSortModel>(DEFAULT_SORT_MODEL);
   const [filterModel, setFilterModel] = useState<GridFilterModel>(initialFilterModel ?? DEFAULT_FILTER_MODEL);
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   const quickFilterText = (filterModel as { quickFilterValues?: string[] }).quickFilterValues?.join(' ') || '';
   const debounceRef = useRef<ReturnType<typeof setTimeout>>();
@@ -8174,7 +8174,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
     <div style={{ width: '100%' }}>
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />
@@ -8242,9 +8242,10 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
 
 ```tsx
 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';
@@ -8255,20 +8256,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)}
         />
@@ -8324,9 +8325,10 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
 
 ```tsx
 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';
@@ -8338,7 +8340,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) => {
@@ -8347,7 +8349,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
@@ -8382,7 +8384,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)}
         />
@@ -8444,7 +8446,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
 ## Drilldown Datagrid Page
 **Description:** Extends the Datagrid Page with summary DataCards placed above the grid. Each DataCard contains DataRows showing aggregate counts for a field (status, category, active). Clicking a DataRow adds an isAnyOf filter to the DataGrid — a one-click shortcut. This is a one-way interaction: DataCard counts always reflect the full (unfiltered) dataset. When the user sets an is or isNot filter via the filter panel, the DataCard selection clears and clicking a DataRow overwrites with isAnyOf.
 **Components:** DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink
-**Packages:** @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-pro
+**Packages:** @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-premium
 **Layout:** Flexbox column: DataCard row (Flexbox gap=12px flexWrap=wrap with 1-N DataCards), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Optional bulk actions bar when selectionModel.length > 0.
 **Tags:** table, datagrid, datacard, drilldown, drilldown-item, filter, isAnyOf, summary-cards, kpi, one-way, filterModel, client-side
 
@@ -8538,7 +8540,7 @@ import { DataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
 import { DataCard, DataRow } from '@redsift/dashboard';
 import { mdiShapeOutline, mdiToggleSwitch, mdiFoodOff } from '@redsift/icons';
-import { GridFilterModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel } from '@mui/x-data-grid-premium';
 import { rows } from '../_shared/data';
 import { columns, CATEGORY_OPTIONS, ALLERGEN_OPTIONS } from '../_shared/columns';
 import { CustomToolbar } from '../_shared/helpers';
@@ -8742,7 +8744,7 @@ export default () => {
 ## Cross-filtered Datagrid Page
 **Description:** Extends the Drilldown Datagrid Page with two-way synchronization between DataCards and the DataGrid filter panel. DataRow clicks add isAnyOf filters. Filter panel changes update DataCard selection state. DataCard counts recalculate against the cross-filtered dataset — each card computes counts by applying all filters except its own field, preventing a card from zeroing out its non-selected values. When the user sets is/isNot via the filter panel, the DataCard clears. Clicking a DataRow overwrites with isAnyOf.
 **Components:** DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink
-**Packages:** @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-pro
+**Packages:** @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-premium
 **Layout:** Flexbox column: DataCard row (cross-filtered counts), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side via applyFilters. Optional bulk actions bar.
 **Tags:** table, datagrid, datacard, drilldown, drilldown-item, cross-filter, crossfilter, two-way, bidirectional, filter, isAnyOf, summary-cards, kpi, dashboard, filterModel, client-side
 
@@ -9016,7 +9018,7 @@ import { DataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
 import { DataCard, DataRow } from '@redsift/dashboard';
 import { mdiShapeOutline, mdiToggleSwitch, mdiFoodOff } from '@redsift/icons';
-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, ALLERGEN_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData, FetchResult } from '../_shared/api-client';
@@ -9291,9 +9293,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
 import { DataCard, DataRow } from '@redsift/dashboard';
-import { BarChart, PieChart } from '@redsift/charts';
+import { BarChart, PieChart, ArcDatum, BarDatum } from '@redsift/charts';
 import { mdiShapeOutline, mdiToggleSwitch, mdiFoodOff } from '@redsift/icons';
-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, ALLERGEN_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData, FetchResult } from '../_shared/api-client';
@@ -9496,8 +9498,8 @@ export default () => {
               }}
               data={itemsChartData}
               sliceRole="option"
-              onSliceClick={(datum: any) => {
-                const key = datum.data.key as string;
+              onSliceClick={(datum: ArcDatum) => {
+                const key = datum.data.key;
                 setFilterModel((prev) => {
                   const selected = getSelectedFromFilterModel(prev, 'Items');
                   const next = selected.includes(key) ? selected.filter((v) => v !== key) : [...selected, key];
@@ -9505,8 +9507,8 @@ export default () => {
                 });
                 setPage(0);
               }}
-              isSliceSelected={(datum: any) =>
-                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key as string)
+              isSliceSelected={(datum: ArcDatum) =>
+                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key)
               }
             />
 
@@ -9527,8 +9529,8 @@ export default () => {
               barProps={{ gap: 20 }}
               data={tagsChartData}
               barRole="option"
-              onBarClick={(datum: any) => {
-                const key = datum.data.key as string;
+              onBarClick={(datum: BarDatum) => {
+                const key = String(datum.data.key);
                 setFilterModel((prev) => {
                   const selected = getSelectedFromFilterModel(prev, 'Tags');
                   const next = selected.includes(key) ? selected.filter((v) => v !== key) : [...selected, key];
@@ -9536,8 +9538,8 @@ export default () => {
                 });
                 setPage(0);
               }}
-              isBarSelected={(datum: any) =>
-                tagsSelection.length === 0 || tagsSelection.includes(datum.data.key as string)
+              isBarSelected={(datum: BarDatum) =>
+                tagsSelection.length === 0 || tagsSelection.includes(String(datum.data.key))
               }
             />
           </Flexbox>
@@ -9715,7 +9717,7 @@ export default () => {
 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/llms.txt

@@ -284,12 +284,12 @@ Proven component groupings for common UI scenarios, extracted from production ap
 
 | Pattern | Components | Packages |
 |---------|-----------|----------|
-| Datagrid Page | DataGrid, TextCell, StatefulDataGrid, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink | @redsift/table, @redsift/design-system, @mui/x-data-grid-pro |
-| Server Datagrid Page | DataGrid, TextCell, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink | @redsift/table, @redsift/design-system, @mui/x-data-grid-pro |
+| Datagrid Page | DataGrid, TextCell, StatefulDataGrid, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink | @redsift/table, @redsift/design-system, @mui/x-data-grid-premium |
+| Server Datagrid Page | DataGrid, TextCell, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink | @redsift/table, @redsift/design-system, @mui/x-data-grid-premium |
 | Stateful Datagrid Page (Client) | StatefulDataGrid, DataGrid, Pill, Button, Flexbox, Text, Icon | @redsift/table, @redsift/design-system, @mui/x-data-grid-pro |
 | Stateful Datagrid Page (Server) | StatefulDataGrid, DataGrid, Pill, Button, Flexbox, Text, Icon | @redsift/table, @redsift/design-system, @mui/x-data-grid-pro |
-| Drilldown Datagrid Page | DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink | @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-pro |
-| Cross-filtered Datagrid Page | DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink | @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-pro |
+| Drilldown Datagrid Page | DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink | @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-premium |
+| Cross-filtered Datagrid Page | DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink | @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-premium |
 | Server Drilldown Datagrid Page | DataGrid, TextCell, DataCard, DataRow, Flexbox, Pill, Icon | @redsift/table, @redsift/dashboard, @redsift/design-system, @mui/x-data-grid-pro |
 | Server Cross-filtered Datagrid Page | DataGrid, TextCell, DataCard, DataRow, Flexbox, Pill, Icon | @redsift/table, @redsift/dashboard, @redsift/design-system, @mui/x-data-grid-pro |
 | Tabbed Datagrid Page | DataGrid, TextCell, Tabs, Tab, Flexbox, Pill, Number | @redsift/table, @redsift/design-system |

package/data/docs/patterns-catalog.md

@@ -27,7 +27,7 @@ These patterns serve as implementation specs — they give LLMs and developers e
 2. DataGrid — the table itself, configured with autoHeight, pagination, checkboxSelection, and GridColDef[] columns
 3. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell`, `StatefulDataGrid` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridRowSelectionModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox` from `@redsift/design-system`
+**Key imports:** `DataGrid`, `TextCell`, `StatefulDataGrid` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridRowSelectionModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox` from `@redsift/design-system`
 **Components:** DataGrid, TextCell, StatefulDataGrid (from @redsift/table), Flexbox, Button, Pill, Text, Badge, Icon, IconButton, IconButtonLink (from @redsift/design-system)
 **Layout:** DataGrid with `autoHeight`, `pagination`, `pageSize`, built-in Toolbar (Columns | Filters | Density | Export | Search via `componentsProps.toolbar.showQuickFilter`). Columns use `GridColDef[]` with `createColumn()` for typed filter operators (e.g. `...createColumn('string')`, `...createColumn('number')`, `...createColumn('singleSelect')`), `renderCell` returning `TextCell`, `Pill`, `Badge`. Optional bulk actions bar above grid shown when `selectionModel.length > 0`.
 
@@ -98,7 +98,7 @@ type Row = {
 2. DataGrid — the table configured with paginationMode='server', sortingMode='server', filterMode='server', loading, and rowCount
 3. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridSortModel`, `GridSelectionModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon`, `IconButtonLink` from `@redsift/design-system`
+**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridSortModel`, `GridSelectionModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox`, `Icon`, `IconButtonLink` from `@redsift/design-system`
 **Components:** DataGrid, TextCell (from @redsift/table), Flexbox, Button, Pill, Text, Badge, Icon, IconButton, IconButtonLink (from @redsift/design-system)
 **Layout:** DataGrid with `autoHeight`, `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `rowCount`, `loading`, built-in Toolbar (Columns | Filters | Density | Export | Search). Same column types as Datagrid Page.
 
@@ -201,29 +201,29 @@ type FetchResult = {
 
 **Anatomy:**
 
-1. DataCard Row — Flexbox with 1-N DataCards, each containing DataCard.Header and DataCard.Listbox or DataCard.Body with DataRow children
+1. DataCard Row — Flexbox with 1-N DataCards, each containing DataCard.Header and DataCard.Listbox or DataCard.Body with DrilldownItem children
 2. Toolbar — Flexbox wrapping GridToolbarContainer with filter, columns, density, export, quick search controls
 3. DataGrid — the table with controlled filterModel + onFilterModelChange
 4. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DataRow` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
-**Components:** DataGrid, TextCell (from @redsift/table), DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
+**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DrilldownItem` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
+**Components:** DataGrid, TextCell (from @redsift/table), DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DrilldownItem (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
 **Layout:** Flexbox column: DataCard row (Flexbox gap=12px flexWrap=wrap with 1-N DataCards), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Optional bulk actions bar.
 
 **Features:**
 
-| Feature               | Required | Description                                                                      |
-| --------------------- | -------- | -------------------------------------------------------------------------------- |
-| DataCard aggregation  | Yes      | DataCard components showing aggregate counts per field from the full dataset     |
-| DataRow filter push   | Yes      | Clicking a DataRow adds an isAnyOf filter to the DataGrid filterModel            |
-| Listbox multi-select  | Yes      | DataCard.Listbox with selectionMode=multiple and controlled values               |
-| is/isNot clearing     | Yes      | When filter panel has is/isNot for a card's field, the DataCard selection clears |
-| Column definitions    | Yes      | GridColDef[] with custom types                                                   |
-| Toolbar               | Yes      | Built-in toolbar with filter, columns, density, export, and quick search         |
-| Custom cell renderers | Yes      | renderCell returning TextCell, Pill, Icon, IconButtonLink                        |
-| Boolean toggle        | No       | DataCard.Body with DataRow onClick for boolean fields                            |
-| Checkbox selection    | No       | checkboxSelection + rowSelectionModel                                            |
-| Bulk action bar       | No       | Contextual buttons shown when rows are selected                                  |
+| Feature                   | Required | Description                                                                      |
+| ------------------------- | -------- | -------------------------------------------------------------------------------- |
+| DataCard aggregation      | Yes      | DataCard components showing aggregate counts per field from the full dataset     |
+| DrilldownItem filter push | Yes      | Clicking a DrilldownItem adds an isAnyOf filter to the DataGrid filterModel      |
+| Listbox multi-select      | Yes      | DataCard.Listbox with selectionMode=multiple and controlled values               |
+| is/isNot clearing         | Yes      | When filter panel has is/isNot for a card's field, the DataCard selection clears |
+| Column definitions        | Yes      | GridColDef[] with custom types                                                   |
+| Toolbar                   | Yes      | Built-in toolbar with filter, columns, density, export, and quick search         |
+| Custom cell renderers     | Yes      | renderCell returning TextCell, Pill, Icon, IconButtonLink                        |
+| Boolean toggle            | No       | DataCard.Body with DrilldownItem onClick for boolean fields                      |
+| Checkbox selection        | No       | checkboxSelection + rowSelectionModel                                            |
+| Bulk action bar           | No       | Contextual buttons shown when rows are selected                                  |
 
 **Filter helpers:**
 
@@ -257,7 +257,7 @@ type AggregateCounts = {
 
 1. Define your row type — every row must have a unique id field.
 2. Compute aggregate counts — useAggregateCounts(allRows) counts from the full dataset.
-3. Build DataCards with DataCard.Header, DataCard.Listbox (multi-select) or DataCard.Body (boolean toggle) containing DataRow children.
+3. Build DataCards with DataCard.Header, DataCard.Listbox (multi-select) or DataCard.Body (boolean toggle) containing DrilldownItem children.
 4. Write filter helpers — getSelectedFromFilterModel and updateFilterModel.
 5. Wire DataCard handlers — onChange to updateFilterModel, onClick to updateBooleanFilter.
 6. Render the DataGrid with controlled filterModel and onFilterModelChange.
@@ -277,7 +277,7 @@ type AggregateCounts = {
 - DataCard counts should recalculate as filters change — reflecting the current filter context
 - Clicking a card value should add a filter to the datagrid (bidirectional)
 - Changing the filter panel should update the card selection
-- The dataset is small enough to load entirely (under ~50,000 rows — crossfilter2 handles this efficiently)
+- The dataset is small enough to load entirely (under ~1,000 rows)
 
 **When NOT to use:**
 
@@ -290,11 +290,10 @@ type AggregateCounts = {
 1. DataCard Row — Flexbox with 1-N DataCards. Counts are cross-filtered: each card excludes its own field from the filter calculation
 2. Toolbar — Flexbox wrapping GridToolbarContainer with filter, columns, density, export, quick search controls
 3. DataGrid — the table with controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side
-4. Dashboard wrapper — `Dashboard` component wraps everything, providing the crossfilter2 context
-5. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
+4. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DataRow` from `@redsift/dashboard`; `Dashboard`, `WithFilters` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
-**Components:** DataGrid, TextCell (from @redsift/table), Dashboard, WithFilters, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
+**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DrilldownItem` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
+**Components:** DataGrid, TextCell (from @redsift/table), DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DrilldownItem (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
 **Layout:** Flexbox column: DataCard row (cross-filtered counts), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side via applyFilters. Optional bulk actions bar.
 
 **Features:**
@@ -303,14 +302,14 @@ type AggregateCounts = {
 | -------------------------- | -------- | -------------------------------------------------------------------------------- |
 | Cross-filtered aggregation | Yes      | DataCard counts recompute from rows filtered by all fields except the card's own |
 | Two-way filter sync        | Yes      | DataCard selections derive from filterModel; DataCard clicks update filterModel  |
-| DataRow filter push        | Yes      | Clicking a DataRow adds an isAnyOf filter to the DataGrid filterModel            |
+| DrilldownItem filter push  | Yes      | Clicking a DrilldownItem adds an isAnyOf filter to the DataGrid filterModel      |
 | Listbox multi-select       | Yes      | DataCard.Listbox with selectionMode=multiple and controlled values               |
 | is/isNot clearing          | Yes      | When filter panel has is/isNot for a card's field, the DataCard selection clears |
 | Client-side row filtering  | Yes      | applyFilters function filters the full row set by the current filterModel        |
 | Column definitions         | Yes      | GridColDef[] with custom types                                                   |
 | Toolbar                    | Yes      | Built-in toolbar with filter, columns, density, export, and quick search         |
 | Custom cell renderers      | Yes      | renderCell returning TextCell, Pill, Icon, IconButtonLink                        |
-| Boolean toggle             | No       | DataCard.Body with DataRow onClick for boolean fields (active/inactive)          |
+| Boolean toggle             | No       | DataCard.Body with DrilldownItem onClick for boolean fields                      |
 | Checkbox selection         | No       | checkboxSelection + rowSelectionModel                                            |
 | Bulk action bar            | No       | Contextual buttons shown when rows are selected                                  |
 

package/data/docs/patterns.json

@@ -16,7 +16,7 @@
       "IconButton",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-premium"],
     "layout": "DataGrid with autoHeight, pagination, pageSize, built-in Toolbar via componentsProps.toolbar.showQuickFilter. Optional bulk actions bar when selectionModel.length > 0.",
     "tags": [
       "table",
@@ -167,7 +167,7 @@
       "IconButton",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-premium"],
     "layout": "DataGrid with autoHeight, paginationMode='server', sortingMode='server', filterMode='server', rowCount, loading, built-in Toolbar. Optional bulk actions bar when selectionModel.length > 0.",
     "tags": [
       "table",
@@ -448,7 +448,7 @@
       "Icon",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-premium"],
     "layout": "Flexbox column: DataCard row (Flexbox gap=12px flexWrap=wrap with 1-N DataCards), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Optional bulk actions bar when selectionModel.length > 0.",
     "tags": [
       "table",
@@ -616,7 +616,7 @@
       "Icon",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-premium"],
     "layout": "Flexbox column: DataCard row (cross-filtered counts), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side via applyFilters. Optional bulk actions bar.",
     "tags": [
       "table",

package/data/metadata.json

@@ -1,4 +1,4 @@
 {
-  "generatedAt": "2026-04-22T18:11:44.828Z",
-  "commitSha": "6baea6f3d9ffdae6977a63827a537bf0661701d7"
+  "generatedAt": "2026-04-22T18:24:18.286Z",
+  "commitSha": "3dd5b1120b0eab67de52a7942c5b8b16fa520abd"
 }

package/data/patterns/crossfiltered-datagrid-server-side.mdx

@@ -99,7 +99,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Server-driven state
 const [rows, setRows] = useState<Row[]>([]);

package/data/patterns/drilldowned-datagrid-client-side.mdx

@@ -114,7 +114,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useMemo, useState } from 'react';
-import { GridFilterModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel } from '@mui/x-data-grid-premium';
 
 // Filter state — controlled, shared between DataCards and DataGrid
 const [filterModel, setFilterModel] = useState<GridFilterModel>({ items: [] });

package/data/patterns/drilldowned-datagrid-server-side.mdx

@@ -91,7 +91,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Server-driven state
 const [rows, setRows] = useState<Row[]>([]);

package/data/patterns/single-datagrid-client-side.mdx

@@ -33,7 +33,7 @@ When **not** to use:
 
 1. **Toolbar** — `Flexbox` wrapping MUI's `GridToolbarContainer` with `GridToolbarFilterButton`, `GridToolbarColumnsButton`, `GridToolbarDensitySelector`, `GridToolbarExport`, and `GridToolbarQuickFilter`
 2. **DataGrid** — the table itself from `@redsift/table`, configured with `autoHeight`, `pagination`, `checkboxSelection`, and `GridColDef[]` columns
-3. **Bulk Action Bar** — a `Flexbox` row shown when `selectionModel.length > 0`, containing a `Pill` with the selection count and action `Button` components
+3. **Bulk Action Bar** — a `Flexbox` row shown when rows are selected, containing a `Pill` with the selection count and action `Button` components
 
 ## Features
 
@@ -124,10 +124,10 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useState } from 'react';
-import { GridSelectionModel } from '@mui/x-data-grid-pro';
+import { GridRowSelectionModel } from '@mui/x-data-grid-premium';
 
 // Selection state — tracks which rows are checked
-const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
+const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
 // Page size — controlled if you need to persist it
 // (DataGrid manages page/pageSize internally for client-side mode)
@@ -149,7 +149,7 @@ type Row = {
 };
 
 // Column definitions — use createColumn() for built-in filter operators
-import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridColDef } from '@mui/x-data-grid-premium';
 import { createColumn } from '@redsift/table';
 
 const columns: GridColDef[] = [
@@ -184,9 +184,9 @@ When data fetching fails, replace the DataGrid area with an error message and a
 1. **Define your row type** — Create a TypeScript `type Row` per the Data Contract section. Every row must have a unique `id` field.
 2. **Define column definitions** — Create a `GridColDef[]` array. Use `createColumn()` (e.g. `...createColumn('string')`, `...createColumn('number')`, `...createColumn('singleSelect')`, `...createColumn('multiSelect')`) for built-in filter operators. Add `renderCell` for rich content (pills, icons, links).
 3. **Create the toolbar** — Build a `CustomToolbar` component using `GridToolbarContainer` with `GridToolbarFilterButton`, `GridToolbarColumnsButton`, `GridToolbarDensitySelector`, `GridToolbarExport`, and optionally `GridToolbarQuickFilter`.
-4. **Set up state** — Add `useState<GridSelectionModel>([])` for checkbox selection (if needed).
-5. **Render the DataGrid** — Pass `rows`, `columns`, `autoHeight`, `pagination`, `pageSize`, `rowsPerPageOptions`, `checkboxSelection`, `components={{ Toolbar: CustomToolbar }}`.
-6. **Add bulk action bar** — Conditionally render a `Flexbox` with a `Pill` (selection count) and action `Button` components when `selectionModel.length > 0`.
+4. **Set up state** — Add `useState<GridRowSelectionModel>` for checkbox selection (if needed).
+5. **Render the DataGrid** — Pass `rows`, `columns`, `autoHeight`, `pagination`, `pageSize`, `rowsPerPageOptions`, `checkboxSelection`, `slots={{ toolbar: CustomToolbar }}`.
+6. **Add bulk action bar** — Conditionally render a `Flexbox` with a `Pill` (selection count) and action `Button` components when rows are selected.
 7. **Handle edge cases** — Add loading state (`loading` prop), empty state (custom `NoRowsOverlay`), and error state (conditional render with retry).
 8. **Verify** — Test pagination breakpoints, filter operators, column visibility toggle, density switching, and export.
 

package/data/patterns/single-datagrid-server-side.mdx

@@ -34,7 +34,7 @@ When **not** to use:
 
 1. **Toolbar** — `Flexbox` wrapping MUI's `GridToolbarContainer` with `GridToolbarFilterButton`, `GridToolbarColumnsButton`, `GridToolbarDensitySelector`, `GridToolbarExport`, and `GridToolbarQuickFilter`
 2. **DataGrid** — the table configured with `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, and `rowCount`
-3. **Bulk Action Bar** — a `Flexbox` row shown when `selectionModel.length > 0`, containing a `Pill` with the selection count and action `Button` components
+3. **Bulk Action Bar** — a `Flexbox` row shown when rows are selected, containing a `Pill` with the selection count and action `Button` components
 
 ## Features
 
@@ -159,7 +159,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useRef, useState } from 'react';
-import { GridFilterModel, GridSelectionModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Data state — rows returned from the server for the current page
 const [rows, setRows] = useState<Row[]>([]);
@@ -175,7 +175,7 @@ const [sortModel, setSortModel] = useState<GridSortModel>([]);
 const [filterModel, setFilterModel] = useState<GridFilterModel>({ items: [] });
 
 // Selection state
-const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
+const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
 // Quick search
 const [quickFilterText, setQuickFilterText] = useState('');
@@ -269,7 +269,7 @@ The fetch function rejects with an error. The component shows an error banner ab
 6. **Wire the fetch effect** — Use `useEffect` to call your fetch function whenever `page`, `pageSize`, `sortModel`, `filterModel`, or `quickFilterText` changes.
 7. **Configure the DataGrid** — Pass `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, `rowCount={totalRows}`, and all controlled state handlers (`onPageChange`, `onPageSizeChange`, `onSortModelChange`, `onFilterModelChange`).
 8. **Debounce filter changes** — Use a 300ms `setTimeout` in `onFilterModelChange` to avoid excessive requests during rapid typing. Reset to page 0 on filter change.
-9. **Add bulk action bar** — Conditionally render when `selectionModel.length > 0`.
+9. **Add bulk action bar** — Conditionally render when rows are selected.
 10. **Handle edge cases** — Add loading state (`loading` prop), empty state (custom `NoRowsOverlay`), and error state (conditional render with retry).
 11. **Verify** — Test page navigation, sort toggling, filter operators, debounced quick search, loading overlay, empty results, and error recovery.