Table

Table defines how EnterUI handles semantic table primitives for compact product data, including default structure, accessible states, and token-driven styling.

#Default usage

<TableContainer>
  <Table>
    <TableCaption>Package health snapshot.</TableCaption>
    <TableHeader><TableRow><TableHead>Name</TableHead><TableHead>Status</TableHead><TableHead align="end">Usage</TableHead></TableRow></TableHeader>
    <TableBody>
      <TableRow><TableCell>API</TableCell><TableCell>Healthy</TableCell><TableCell align="end">82%</TableCell></TableRow>
      <TableRow selected><TableCell>Docs</TableCell><TableCell>Review</TableCell><TableCell align="end">64%</TableCell></TableRow>
    </TableBody>
  </Table>
</TableContainer>

#Import

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableContainer,
  TableHead,
  TableHeader,
  TableRow,
} from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

Use real table structure for tabular data. Add TableCaption when the table needs an accessible summary beyond nearby text.

#API

• Table supports dense and native table props.
• TableRow supports selected.
• TableHead and TableCell support align="start|center|end".

#Styling

TableContainer provides a raised surface and horizontal scrolling when columns cannot fit. Record fields stay on one line by default, including dates and names. For long prose, place Text directly inside TableCell to allow wrapping. Small Buttons inside cells use compact 32px controls; keep related actions in an HStack without wrap to avoid increasing row height. Dense mode reduces cell padding.

These defaults are package styles, not a page-specific table theme.

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.