High-performance data table with virtual scrolling (10k+ rows). Use cases: Telemetry logs, test results tables, event logs, CSV data viewers, database query results, flight data records.
Copy and paste the following code into your project.
npx plexus-ui add data-grid
1. Copy the component code from components/data-grid.tsx
2. Install dependencies:
npm install react@latest
3. Copy any required primitive components
GPU-accelerated data grid with live updates. Monitors 50 satellites with 60fps rendering and virtual scrolling. Updates 5 random rows every 2 seconds.
Virtual scrolling enables smooth 60fps rendering of 10,000 flights. Only visible rows are rendered to the DOM. GPU acceleration renders backgrounds and borders. Try scrolling and sorting!
Custom formatters display values with units, colors, and formatting. Each column can have its own formatter function for precise data presentation.
Use DataGrid.Root, DataGrid.Canvas, DataGrid.Header, and DataGrid.Body primitives for full control over composition and layout. Add custom components between primitives.
DataGrid component for displaying tabular data with sorting, filtering, and pagination
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | required | Array of data objects to display in the grid |
| columns | Column<T>[] | required | Column definitions. Column: { key: keyof T, header: string, width?: number, align?: 'left'|'center'|'right', formatter?: (value) => ReactNode } |
| sortable | boolean | false | Enable column sorting |
| filterable | boolean | false | Enable column filtering |
| paginated | boolean | false | Enable pagination |
| pageSize | number | 10 | Number of rows per page (when paginated) |
| striped | boolean | true | Alternate row background colors |
| hoverable | boolean | true | Highlight rows on hover |
| compact | boolean | false | Use compact row height |
| onRowClick | (row: T) => void | undefined | Callback when a row is clicked |
| loading | boolean | false | Show loading state |
| emptyMessage | string | "No data available" | Message to show when data is empty |
| className | string | "" | Additional CSS classes |
Configuration for table columns
| Prop | Type | Default | Description |
|---|---|---|---|
| key | keyof T | required | Property key from the data object |
| header | string | ReactNode | required | Column header label |
| width | number | string | auto | Column width (px or %) |
| align | "left" | "center" | "right" | "left" | Text alignment |
| sortable | boolean | true | Enable sorting for this column |
| formatter | (value: any, row: T) => ReactNode | undefined | Custom cell renderer |
Root component for building custom layouts with primitives
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | required | Array of data objects |
| columns | Column<T>[] | required | Column definitions |
| sortable | boolean | false | Enable sorting |
| filterable | boolean | false | Enable filtering |
| paginated | boolean | false | Enable pagination |
| children | ReactNode | undefined | Primitive components (Table, Header, Body, Footer, Pagination) |
Use with DataGrid.Root for complete control over composition
| Prop | Type | Default | Description |
|---|---|---|---|
| DataGrid.Table | component | - | Table container. Props: striped?: boolean, hoverable?: boolean, compact?: boolean |
| DataGrid.Header | component | - | Table header with column labels |
| DataGrid.Body | component | - | Table body with data rows |
| DataGrid.Footer | component | - | Table footer (optional) |
| DataGrid.Pagination | component | - | Pagination controls |