layout

DataGrid

Terminal-style data table with neon accents.

npx chaos add data-grid

PREVIEW

USAGE

import { DataGrid } from '@/components/chaos/layout/data-grid';

const columns = [
  { key: 'name', header: 'Name' },
  { key: 'status', header: 'Status' },
];
const data = [{ name: 'Server-1', status: 'Online' }];

<DataGrid columns={columns} data={data} />

PROPS

PropTypeDefault

columnsColumn definitions {key, header, width?}

DataGridColumn[]-

dataData rows

T[]-

variantColor theme

"cyan" | "green" | "amber""cyan"

stripedStriped rows

booleantrue

hoverableHover effect

booleantrue