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

package/data/docs/llms-full.txt

@@ -3,8 +3,8 @@
 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-09-08T08:10:20.125Z
-Total Components: 156
+Generated: 2026-09-08T08:02:04.666Z
+Total Components: 164
 
 ---
 
@@ -4951,8 +4951,8 @@ For `boolean` columns, use `type: 'boolean'` directly (no createColumn wrapper n
 | selectionBannerPlacement | "top" \| "bottom" \| "belowToolbar" | No | 'top' | Where to render the row-selection banner (the "All N rows on this page are selected…" line). Independent of `paginationPlacement` — the latter only controls the pager controls.  - `'top'` — above the toolbar (default, current behaviour). - `'bottom'` — in the footer, alongside the bottom pager. - `'belowToolbar'` — between the toolbar and the grid body. Rendered via   the toolbar slot, so the toolbar slot is forced to render even when   `hideToolbar` is set (the toolbar itself stays hidden, only the banner shows).   Combine with `paginationPlacement="belowToolbar"` for a banner-left / pager-right   row. Only applies when `pagination` is enabled. |
 | 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. |
 
 ---
 
@@ -4968,7 +4968,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 | - |  |
@@ -5010,8 +5010,8 @@ Use when users need persistent table preferences. Requires unique `localStorageK
 | selectionBannerPlacement | "top" \| "bottom" \| "belowToolbar" | No | 'top' | Where to render the row-selection banner (the "All N rows on this page are selected…" line). Independent of `paginationPlacement` — the latter only controls the pager controls.  - `'top'` — above the toolbar (default, current behaviour). - `'bottom'` — in the footer, alongside the bottom pager. - `'belowToolbar'` — between the toolbar and the grid body. Rendered via   the toolbar slot, so the toolbar slot is forced to render even when   `hideToolbar` is set (the toolbar itself stays hidden, only the banner shows).   Combine with `paginationPlacement="belowToolbar"` for a banner-left / pager-right   row. Only applies when `pagination` is enabled. |
 | 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. |
 
 ---
 
@@ -5046,9 +5046,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. |
@@ -5078,6 +5078,168 @@ above and below it is symmetric.
 
 ---
 
+## Package: @redsift/table-pro
+
+### ControlledPagination
+
+**Package:** @redsift/table-pro
+**File:** packages/table-pro/src/components/Pagination/ControlledPagination.tsx
+
+---
+
+### DataGrid
+
+DataGrid displays tabular data with sorting, filtering, pagination, and row selection.
+Built on MUI X DataGrid Pro with Red Sift styling and theming.
+
+Requires MUI X Pro license key (set via `MUI_LICENSE_KEY` env variable).
+
+Use `createColumn()` to get pre-configured column definitions with typed filter operators.
+Supported types: `string`, `number`, `date`, `dateTime`, `singleSelect`, `multiSelect`, `tags`.
+For `boolean` columns, use `type: 'boolean'` directly (no createColumn wrapper needed).
+
+**Package:** @redsift/table-pro
+**File:** packages/table-pro/src/components/DataGrid/DataGrid.tsx
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| license | string | No | - | License key for MUI Datagrid Pro. |
+| height | string | No | '500px' | Height. A default one is set to prevent rendering all rows. |
+| 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" \| "belowToolbar" | No | 'both' | Indicates where to render the pagination controls (the "Rows per page" + page navigation bar). Independent of `selectionBannerPlacement`.  - `'top'` / `'bottom'` / `'both'` — above / below / both sides of the grid body. - `'none'` — no pager controls. - `'belowToolbar'` — in a row directly below the toolbar (right-aligned). Pair   with `selectionBannerPlacement="belowToolbar"` to get the banner on the left   and the pager on the right in the same row. Only applies when `pagination` is enabled. |
+| selectionBannerPlacement | "top" \| "bottom" \| "belowToolbar" | No | 'top' | Where to render the row-selection banner (the "All N rows on this page are selected…" line). Independent of `paginationPlacement` — the latter only controls the pager controls.  - `'top'` — above the toolbar (default, current behaviour). - `'bottom'` — in the footer, alongside the bottom pager. - `'belowToolbar'` — between the toolbar and the grid body. Rendered via   the toolbar slot, so the toolbar slot is forced to render even when   `hideToolbar` is set (the toolbar itself stays hidden, only the banner shows).   Combine with `paginationPlacement="belowToolbar"` for a banner-left / pager-right   row. Only applies when `pagination` is enabled. |
+| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
+| theme | "light" \| "dark" | No | - | Theme. |
+| 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. |
+
+---
+
+### GridToolbarFilterSemanticField
+
+The GridToolbarFilterSemanticField component.
+
+**Package:** @redsift/table-pro
+**File:** packages/table-pro/src/components/GridToolbarFilterSemanticField/GridToolbarFilterSemanticField.tsx
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| nlpFilterConfig | FilterConfig | Yes | - |  |
+| onFilterModelChange | (filterModel: GridFilterModel) => void | No | - |  |
+| dateFormat | string | No | - |  |
+| defaultModel | string | No | - |  |
+| defaultFilter | CompletionResponse | No | - |  |
+| disablePower | false \| true | No | - |  |
+| localeText | LocaleText | No | - |  |
+
+---
+
+### ServerSideControlledPagination
+
+**Package:** @redsift/table-pro
+**File:** packages/table-pro/src/components/Pagination/ServerSideControlledPagination.tsx
+
+---
+
+### StatefulDataGrid
+
+StatefulDataGrid extends DataGrid with automatic state persistence to localStorage.
+Preserves filters, sorting, pagination, column visibility, and column widths
+across page refreshes.
+
+Use when users need persistent table preferences. Requires unique `localStorageKey`.
+
+**Package:** @redsift/table-pro
+**File:** packages/table-pro/src/components/StatefulDataGrid/StatefulDataGrid.tsx
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| useRouter | () => { pathname: string; search: string; historyReplace: (newSearch: string, options?: { authoritative?: boolean \| undefined; } \| undefined) => void; } | Yes | - | Hook returning pathname, search params and a method to update query params. |
+| localStorageVersion | number | No | - | Local Storage version, to upgrade when we want to force a clean out. |
+| previousLocalStorageVersions | number[] | No | - | Previous Local Storage versions to clean out when a new one is released. |
+| license | string | No | - | License key for MUI Datagrid Pro. |
+| height | string | No | '500px' | Height. A default one is set to prevent rendering all rows. |
+| 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" \| "belowToolbar" | No | 'both' | Indicates where to render the pagination controls (the "Rows per page" + page navigation bar). Independent of `selectionBannerPlacement`.  - `'top'` / `'bottom'` / `'both'` — above / below / both sides of the grid body. - `'none'` — no pager controls. - `'belowToolbar'` — in a row directly below the toolbar (right-aligned). Pair   with `selectionBannerPlacement="belowToolbar"` to get the banner on the left   and the pager on the right in the same row. Only applies when `pagination` is enabled. |
+| selectionBannerPlacement | "top" \| "bottom" \| "belowToolbar" | No | 'top' | Where to render the row-selection banner (the "All N rows on this page are selected…" line). Independent of `paginationPlacement` — the latter only controls the pager controls.  - `'top'` — above the toolbar (default, current behaviour). - `'bottom'` — in the footer, alongside the bottom pager. - `'belowToolbar'` — between the toolbar and the grid body. Rendered via   the toolbar slot, so the toolbar slot is forced to render even when   `hideToolbar` is set (the toolbar itself stays hidden, only the banner shows).   Combine with `paginationPlacement="belowToolbar"` for a banner-left / pager-right   row. Only applies when `pagination` is enabled. |
+| paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
+| theme | "light" \| "dark" | No | - | Theme. |
+| 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. |
+
+---
+
+### TextCell
+
+The Cell component.
+
+**Package:** @redsift/table-pro
+**File:** packages/table-pro/src/components/TextCell/TextCell.tsx
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| badge | ReactNode | No | - | Including Badge Component. |
+| leftIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
+| leftIconColor | "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "question" \| "no-data" \| "asm" \| "brand-trust" \| "certificates" \| "ondmarc" \| "pulse" \| "radar" \| "rojo-ds" \| "vendor-secure" \| "website" \| string & {} | No | - | Left Icon Color variant. |
+| rightIcon | string \| string[] \| ReactElement<any, string \| JSXElementConstructor<any>> | No | - | Can be a string or an array of strings containing `d` property of the `path` SVG element.<br /> Can also be a ReactElement. |
+| rightIconColor | "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "question" \| "no-data" \| "asm" \| "brand-trust" \| "certificates" \| "ondmarc" \| "pulse" \| "radar" \| "rojo-ds" \| "vendor-secure" \| "website" \| string & {} | No | - | Right Icon Color variant. |
+| shieldVariant | "success" \| "warning" \| "question" \| "successLocked" \| "successUnlocked" \| "fail" \| "failLocked" \| "failUnlocked" \| "warningLocked" \| "warningUnlocked" \| "ignored" \| "noData" \| "email" | No | - | Shield variant. |
+
+---
+
+### Toolbar
+
+------
+
+**Package:** @redsift/table-pro
+**File:** packages/table-pro/src/components/Toolbar/Toolbar.tsx
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| columnsButtonProps | GridToolbarColumnsButtonProps \| GridToolbarColumnsButtonProps & RefAttributes<HTMLButtonElement> | No | - | Props to forward to the column button. |
+| columnsButtonRef | RefObject<HTMLButtonElement> | No | - | Column button ref. |
+| 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. |
+| filterButtonProps | GridToolbarFilterButtonProps | No | - | Props to forward to the filter button. |
+| filterButtonRef | RefObject<HTMLButtonElement> | No | - | Filter button ref. |
+| hasColumnsButton | false \| true | No | - | Whether the columns button is displayed or not. |
+| hasDensityButton | false \| true | No | - | Whether the density button is displayed or not. |
+| hasExportButton | false \| true | No | - | Whether the export button is displayed or not. |
+| hasFilterButton | false \| true | No | - | Whether the filter button is displayed or not. |
+| onFilterModelChange | (filterModel: GridFilterModel) => void | No | - | Configuration object for NLP filter. undefined if disabled. |
+| semanticFilterProps | GridToolbarFilterSemanticProps | No | - |  |
+| showQuickFilter | false \| true | No | - | Whether you want to show the quick filter or not. |
+
+---
+
+### ToolbarWrapper
+
+Renders a toolbar followed by a row that can contain the selection banner (left)
+and/or the pager controls (right), so they sit between the toolbar and the grid body
+(`selectionBannerPlacement="belowToolbar"` and/or `paginationPlacement="belowToolbar"`).
+The banner/pager visibility is driven by `displaySelection` / `displayPagination`.
+The row gets a top margin matching the banner's built-in bottom margin so the spacing
+above and below it is symmetric.
+
+**Package:** @redsift/table-pro
+**File:** packages/table-pro/src/components/ToolbarWrapper/ToolbarWrapper.tsx
+
+---
+
 ## Package: @redsift/dashboard
 
 ### ChartEmptyState
@@ -5112,7 +5274,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<GridApiPro \| null> | No | - | Datagrid API Ref. MUI v8: can be null initially. |
 
 ---
 
@@ -6106,7 +6268,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
 
@@ -6189,22 +6351,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)}
         />
@@ -6243,7 +6405,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
 
@@ -6354,9 +6516,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';
@@ -6371,7 +6533,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>>();
@@ -6409,7 +6571,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)}
         />
@@ -6477,9 +6639,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';
@@ -6490,20 +6653,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)}
         />
@@ -6559,9 +6722,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';
@@ -6573,7 +6737,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) => {
@@ -6582,7 +6746,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
@@ -6617,7 +6781,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)}
         />
@@ -6679,7 +6843,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
 
@@ -6773,7 +6937,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';
@@ -6977,7 +7141,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
 
@@ -7259,7 +7423,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';
@@ -7534,9 +7698,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';
@@ -7743,8 +7907,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];
@@ -7752,8 +7916,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)
               }
             />
 
@@ -7778,8 +7942,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];
@@ -7787,8 +7951,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>
@@ -7966,7 +8130,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

@@ -16,7 +16,8 @@ The Red Sift Design System provides reusable UI components including forms, navi
 - **@redsift/popovers** (22 components): Popover, tooltip, dialog, and toast components
 - **@redsift/pickers** (21 components): Selection components (combobox, menu button, select)
 - **@redsift/charts** (14 components): D3.js-based chart components (bar, line, pie, scatter)
-- **@redsift/table** (8 components): DataGrid components built on MUI X Data Grid
+- **@redsift/table** (8 components): DataGrid components built on MUI X Data Grid (Premium tier, includes pivoting, row grouping, and aggregation)
+- **@redsift/table-pro** (8 components): DataGrid components built on MUI X Data Grid (Pro tier — same API as @redsift/table without pivoting, row grouping, or aggregation)
 - **@redsift/dashboard** (10 components): Dashboard components with crossfilter integration
 - **@redsift/products** (20 components): Product-specific component implementations
 
@@ -182,6 +183,17 @@ The Red Sift Design System provides reusable UI components including forms, navi
 - **Toolbar** (15 props): ------
 - **ToolbarWrapper** (0 props): Renders a toolbar followed by a row that can contain the selection banner (left)
 
+### table-pro
+
+- **ControlledPagination** (0 props)
+- **DataGrid** (10 props): DataGrid displays tabular data with sorting, filtering, pagination, and row selection.
+- **GridToolbarFilterSemanticField** (7 props): The GridToolbarFilterSemanticField component.
+- **ServerSideControlledPagination** (0 props)
+- **StatefulDataGrid** (13 props): StatefulDataGrid extends DataGrid with automatic state persistence to localStorage.
+- **TextCell** (6 props): The Cell component.
+- **Toolbar** (15 props): ------
+- **ToolbarWrapper** (0 props): Renders a toolbar followed by a row that can contain the selection banner (left)
+
 ### dashboard
 
 - **ChartEmptyState** (4 props)
@@ -231,12 +243,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 |