Table

Presentational semantic <table> for admin data grids. Use compound Table.Header / Body / Row / Column / Cell parts or a data-driven columns + data API.

Examples

Default

A simple two-column data table.

import { Table } from '@var-ui/react';

<Table
  columns={[
    { key: 'name', header: 'Name', isRowHeader: true },
    { key: 'role', header: 'Role' },
  ]}
  data={[{ name: 'Ada', role: 'Admin' }]}
/>

Striped compact

Enable isStriped and density="compact" for denser rosters; add caption for an accessible table title.

import { Table } from '@var-ui/react';

<Table
  isStriped
  density="compact"
  caption="Team roster"
  columns={[
    { key: 'name', header: 'Name', isRowHeader: true },
    { key: 'role', header: 'Role' },
    { key: 'status', header: 'Status' },
  ]}
  data={[
    { name: 'Ada', role: 'Admin', status: 'Active' },
    { name: 'Grace', role: 'Editor', status: 'Active' },
  ]}
/>

Props

Accessibility

Renders a real <table>. Mark the identifying column with isRowHeader (scope="row"). Prefer a caption (or external heading referenced with aria-labelledby) so the table has an accessible name. Sort chrome sets aria-sort when you wire allowsSorting / onSortChange.