Table

Semantic data table with 5 visual variants. Variant context flows from the root <Table> to all sub-components automatically — no extra props needed on children.

When to use

Tabular data with consistent columns and rows (invoices, employee lists, metrics).
Comparison grids where alignment matters.
Read-only data views paired with external controls.
For interactive tables with sorting/filtering, use DataTable.

When NOT to use

For key-value pairs — use a definition list or Card.
For layout — never use <table> for page layout.

Import

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from '@mihcm/ui/Table';

Basic usage

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Aisha</TableCell>
      <TableCell>Engineer</TableCell>
    </TableRow>
  </TableBody>
</Table>

Variants

Set variant on the root <Table> — all sub-components adapt automatically via React context.

Variant	Description
`default`	Subtle row separators, no outer border. Clean & modern.
`bordered`	Full grid with vertical cell dividers and outer border.
`striped`	Alternating row backgrounds, no row borders.
`minimal`	Header underline only, no row borders at all.
`card`	Outer border with rounded corners, subtle separators.

<Table variant="striped">
  {/* All children automatically inherit the variant */}
</Table>

Header tone and responsive width

Use headerTone on the root table when the header needs stronger hierarchy:

<Table variant="card" headerTone="primary" wrapperClassName="max-w-full">
  {/* TableHeader, TableHead, TableBody, TableCell */}
</Table>

Available tones are default, muted, primary, accent, success, warning, and danger. For one-off cells, pass tokenized Tailwind classes to TableHead directly. The root wrapper remains horizontally scrollable by default, so wide tables do not break mobile layouts.

Sub-components

Component	HTML element	Notes
`Table`	`<table>`	Root — accepts `variant`, `headerTone`, and `wrapperClassName`. Wrapped in a scrollable `<div>`.
`TableHeader`	`<thead>`	Border style adapts to variant.
`TableBody`	`<tbody>`	Last row border removed.
`TableFooter`	`<tfoot>`	Muted background, top border.
`TableRow`	`<tr>`	Hover highlight; border style adapts to variant.
`TableHead`	`<th>`	Uppercase, muted foreground. Vertical dividers in `bordered`.
`TableCell`	`<td>`	Standard padding, middle-aligned. Vertical dividers in `bordered`.
`TableCaption`	`<caption>`	Positioned below the table, muted text.

Composition

Wrap Table in ScrollArea for responsive horizontal overflow on narrow viewports.
Use TableCaption to describe the table for screen readers.
For interactive tables (sorting, filtering, pagination), use DataTable instead.
Pair cells with Badge or StatusBadge for inline status indicators.

DataTable — interactive table with sorting, filtering, pagination.
Card — single-record detail views.
Badge — inline status pills inside table cells.