Data Display

Table

A complete table system for displaying tabular data. Includes Table, TableHeader, TableBody, TableRow, TableHead, and TableCell components.

Overview

The Table component system provides a flexible way to display tabular data. It consists of multiple composable components that work together to create accessible, styled data tables.

Name Email Role Status
John Doe john@example.com Admin Active
Jane Smith jane@example.com Editor Active
Bob Johnson bob@example.com Viewer Pending

Components

The Table system includes these components:

Component Description
Table Root table container with variant and size props
TableHeader Container for header rows (thead)
TableBody Container for data rows (tbody)
TableRow A single row (tr)
TableHead Header cell with optional sorting (th)
TableCell Data cell (td)

Props

Table Props

Prop Type Default Description
variant 'default' | 'striped' 'default' Visual variant
size 'sm' | 'md' | 'lg' 'md' Size variant affecting padding
hoverable boolean true Whether rows highlight on hover

TableHead Props

Prop Type Default Description
sortable boolean false Whether column is sortable
sortDirection 'asc' | 'desc' | null null Current sort direction
onSort () => void - Sort handler
align 'left' | 'center' | 'right' 'left' Text alignment

TableCell Props

Prop Type Default Description
align 'left' | 'center' | 'right' 'left' Text alignment

Variants

Striped

The striped variant adds alternating row colors for better readability.

ID Name Department
001 Alice Brown Engineering
002 Charlie Davis Marketing
003 Diana Evans Sales
004 Edward Ford Support 
<Table variant="striped">
  ...
</Table>

Sizes

Three size options control the padding and font size.

Small

Name Email
John Doe john@example.com

Medium (Default)

Name Email
John Doe john@example.com

Large

Name Email
John Doe john@example.com

Examples

Basic Table

Product Price Stock
Widget A $19.99 142
Widget B $29.99 87 
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Product</TableHead>
      <TableHead>Price</TableHead>
      <TableHead>Stock</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Widget A</TableCell>
      <TableCell>$19.99</TableCell>
      <TableCell>142</TableCell>
    </TableRow>
  </TableBody>
</Table>

Column Alignment

Use the align prop on TableHead and TableCell for alignment.

Item Quantity Price
Premium Plan 1 $99.00
Add-on Service 2 $29.98
Total $128.98 
<TableHead align="right">Price</TableHead>
<TableCell align="right">$99.00</TableCell>

With Components in Cells

Table cells can contain any React components.

Patient Appointment Status
Sarah Wilson Jan 15, 2025 at 10:00 AM Confirmed
Mike Chen Jan 15, 2025 at 11:30 AM Pending
Emily Davis Jan 15, 2025 at 2:00 PM Cancelled

Without Hover Effect

Feature Free Pro
Users 1 Unlimited
Storage 5 GB 100 GB 
<Table hoverable={false}>
  ...
</Table>

Accessibility

  • Semantic HTML: Uses native <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements.
  • Header Association: Table headers (<th>) are properly associated with their columns.
  • Sort Announcement: Sortable columns use aria-sort to announce current sort direction.
  • Keyboard Navigation: Interactive elements within tables are fully keyboard accessible.

Best Practices

  • Always include a TableHeader with descriptive column names
  • For complex tables, consider adding a caption or description
  • Avoid wide tables that cause horizontal scrolling when possible
  • Use appropriate alignment for data types (right-align numbers)