Table

Displays structured data in rows and columns. Supports density modes, sticky headers, selection, striped rows, and sticky first/last columns.

Import

import {
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableHeader,
  TableCell,
  TableCaption,
} from '@aspect/react';

Density

Control row padding with the density prop.

<Table density="compact">...</Table>
<Table density="comfortable">...</Table>

Sticky header

Pin the header row when scrolling vertically.

<Table stickyHeader>...</Table>

Sticky columns

Pin the first or last column for wide tables that scroll horizontally.

<table class="mizu-table mizu-table--sticky-first">
  ...
</table>
<table class="mizu-table mizu-table--sticky-last">
  ...
</table>

Row selection

<TableRow selected>...</TableRow>

Variants

Striped rows and bordered cells:

<table class="mizu-table mizu-table--striped">
  ...
</table>
<table class="mizu-table mizu-table--bordered">
  ...
</table>

Props (Table)

| Prop | Type | Default | Description | | -------------- | ----------------------------------------- | ----------- | -------------------- | | density | 'compact' \| 'default' \| 'comfortable' | 'default' | Row padding | | stickyHeader | boolean | false | Pin header on scroll |

Props (TableRow)

| Prop | Type | Default | Description | | ---------- | --------- | ------- | ------------- | | selected | boolean | false | Highlight row |

Guidelines

Do:

• Use compact density for data-heavy admin views
• Use sticky header for long lists
• Align numbers to the right

Don't:

• Don't use tables for layout
• Don't exceed 8-10 columns without sticky first/last