Data Grid
Surveillance-style data table with sticky header, auto-scroll capability, sortable columns with type auto-detection, automatic pagination, and motion-animated row entry.
[SRC]tsx
1import { DataGrid } from "@mdrbx/nerv-ui";
Basic Usage
DEFAULTinspection frame
live inspectionframe-01
UNIT REGISTRY4 ENTRIES
| UNIT | PILOT | STATUS | SYNC % |
|---|---|---|---|
| EVA-00 | AYANAMI REI | ACTIVE | 68.2 |
| EVA-01 | IKARI SHINJI | STANDBY | 41.5 |
| EVA-02 | SORYU ASUKA | ACTIVE | 92.1 |
| EVA-03 | SUZUHARA TOJI | OFFLINE | 0.0 |
ROWS: 4
Sortable Columns
SORTABLEinspection frame
live inspectionframe-01
SORTABLE REGISTRY5 ENTRIES
| UNIT— | PILOT— | SYNC %— | STATUS— |
|---|---|---|---|
| EVA-00 | AYANAMI REI | 68.2 | ACTIVE |
| EVA-01 | IKARI SHINJI | 41.5 | STANDBY |
| EVA-02 | SORYU ASUKA | 92.1 | ACTIVE |
| EVA-03 | SUZUHARA TOJI | 0.0 | OFFLINE |
| EVA-04 | NAGISA KAWORU | 99.9 | CLASSIFIED |
ROWS: 5
Paginated
PAGINATEDinspection frame
live inspectionframe-01
EVENT LOG7 ENTRIES
| # | TIMESTAMP— | EVENT— | LEVEL— |
|---|---|---|---|
| 001 | 14:32:01.221 | PATTERN BLUE DETECTED | CRITICAL |
| 002 | 14:32:01.445 | A.T. FIELD ANALYSIS BEGIN | INFO |
| 003 | 14:32:02.102 | MAGI CONSENSUS REQUESTED | INFO |
ROWS: 7
PAGE 01/03
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns* | DataGridColumn[] | — | Column definitions: { key, header, width?, align?, sortable?, type? } |
| data* | Record<string, string | number>[] | — | Row data array |
| color | "orange" | "green" | "cyan" | "green" | Table color theme |
| autoScroll | boolean | false | Enable continuous scroll (pauses on hover) |
| scrollSpeed | number | 30 | Scroll speed in pixels/second |
| maxHeight | string | "400px" | Container max height |
| title | string | — | Title bar text |
| showIndex | boolean | false | Show row index column |
| pageSize | number | — | Rows per page — undefined shows all rows |
| className | string | "" | Additional CSS classes |
[i]COLUMN SORTING
Set sortable: true on columns to enable click-to-sort. Type auto-detection
checks the first value: integers, floats, datetimes, or string fallback.
Override with type: "int" | "float" | "datetime" | "string". Click cycles:
unsorted → ascending → descending → unsorted.