@cdx-ui/data-grid

Web DataGrid with an MUI X–shaped rows / columns API. TanStack Table is an internal engine — do not import it from consumer code. gridPolarityNumberColDef and gridDeltaNumberColDef are spreadable number column presets for signed numbers and changes.

import { DataGrid, type GridColDef } from '@cdx-ui/data-grid';

Install alongside @cdx-ui/components. DataGrid is web-only.

Add the grid's stylesheet to your Tailwind CSS entry, after the components stylesheet, so Tailwind generates the grid's classes:

@import '@cdx-ui/components/styles.css';
@import '@cdx-ui/data-grid/styles.css';

The grid uses a 300px viewport by default (MUI Data Grid Community). Headers stay visible while rows scroll; pagination stays at the bottom. Override with className or style, or set autoHeight to size the grid to its rows.

Pin columns with pinnedColumns={{ start, end }}. Deprecated left / right keys alias start / end. See the Data Grid docs.