amezquita design systemGet started

Patterns

Table

Static data table with semantic header, body, and row structure

Markdown version for agents

Import
import { Table } from '@amezquita/design-system/components/patterns/Table'

Live render

TokenValue
space-inline-gap8px
space-element-gap16px

    Props

    PropTypeDescription
    striped?boolean
    bordered?boolean
    compact?boolean
    className?string
    scrollLabel?stringAccessible name for the scroll region — override when a page has more than one table.
    childrenReact.ReactNode

    Tokens

    TokenTypeValue
    --table-header-font-weightfontWeight600

    Usage example

    tsx
    <Table>
  <TableHead>
    <TableRow>
      {sampleHeaders.map(h => <TableHeader key={h}>{h}</TableHeader>)}
    </TableRow>
  </TableHead>
  <TableBody>
    {sampleRows.map(row => (
      <TableRow key={row[0]}>
        {row.map((cell, i) => <TableCell key={i}>{cell}</TableCell>)}
      </TableRow>
    ))}
  </TableBody>
</Table>

    Sub-components

    Imported from the same path as Table.