Table

Semantic table primitives for tabular data.

#Import

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Design system</TableCell>
      <TableCell>Ready</TableCell>
    </TableRow>
  </TableBody>
</Table>

#Preview

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Design system</TableCell>
      <TableCell>Ready</TableCell>
    </TableRow>
  </TableBody>
</Table>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Row hover

<Table hoverable>...</Table>

#Sizes

<Table size="sm">...</Table>

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.