Data Table

A structured data display component with optional striped rows. Pass typed column definitions and a data array — the table renders headers and rows automatically, with no extra configuration required.

Preview

Striped variant

Name	Role	Status	Joined
Ada Lovelace	Engineer	Active	2021-03-12
Grace Hopper	Architect	Active	2020-07-04
Alan Turing	Researcher	Inactive	2019-11-30
Dorothy Vaughan	Engineer	Active	2022-01-18
Katherine Johnson	Analyst	Active	2023-05-22

Usage

import { DataTable } from '@/components/DataTable';

const columns = [
  { key: 'name',       header: 'Name'       },
  { key: 'role',       header: 'Role'       },
  { key: 'status',     header: 'Status'     },
  { key: 'joined',     header: 'Joined'     },
];

const data = [
  { name: 'Ada Lovelace',    role: 'Engineer',   status: 'Active',   joined: '2021-03-12' },
  { name: 'Grace Hopper',    role: 'Architect',  status: 'Active',   joined: '2020-07-04' },
  { name: 'Alan Turing',     role: 'Researcher', status: 'Inactive', joined: '2019-11-30' },
  { name: 'Dorothy Vaughan', role: 'Engineer',   status: 'Active',   joined: '2022-01-18' },
];

// Default
<DataTable columns={columns} data={data} />

// Striped rows
<DataTable columns={columns} data={data} striped />

Props

Prop	Type	Default	Description
`columns`	`ColumnDef<T>[]`	`—`	Array of column definitions. Each entry has a key (matching a data row field) and a header string displayed in the table head. Required.
`data`	`T[]`	`—`	Array of row objects. Each object must contain at least the keys referenced by columns. Required.
`striped`	`boolean`	`false`	Alternates the background color of odd rows using the ink-05 token for improved scanability.
`className`	`string`	`—`	Additional CSS class names merged into the table element.