Semantic table primitives for compact product data.
Table defines how EnterUI handles semantic table primitives for compact product data, including default structure, accessible states, and token-driven styling.
Tables use subtle borders and calm hover states.
| Name | Status | Usage |
|---|---|---|
| API | Healthy | 82% |
| Docs | Review | 64% |
<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 {
Table,
TableBody,
TableCaption,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow,
} from "@froggdesign/enter-ui-react";Dense tables are useful in operational screens.
| Component | State |
|---|---|
| Dialog | Ready |
Use real table structure for tabular data. Add TableCaption when the table needs an accessible summary beyond nearby text.
Table supports dense and native table props.TableRow supports selected.TableHead and TableCell support align="start|center|end".Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.