Footer row container for Table, used for totals, pagination, and summary rows.
TableFooter renders a semantic tfoot region for the Table primitive. Use it for column totals, aggregate summaries, or footer-anchored controls that belong inside the table layout.
A summary row anchored to the bottom of the table.
| Package | Usage |
|---|---|
| @froggdesign/enter-ui-react | 82% |
| @froggdesign/theme | 14% |
| Total | 96% |
<TableContainer>
<Table dense>
<TableHeader>
<TableRow>
<TableHead>Package</TableHead>
<TableHead align="end">Usage</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>@froggdesign/enter-ui-react</TableCell>
<TableCell align="end">82%</TableCell>
</TableRow>
<TableRow>
<TableCell>@froggdesign/theme</TableCell>
<TableCell align="end">14%</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell>Total</TableCell>
<TableCell align="end">96%</TableCell>
</TableRow>
</TableFooter>
</Table>
</TableContainer>import {
Table,
TableBody,
TableCell,
TableContainer,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@froggdesign/enter-ui-react";TableFooter renders a native tfoot, so assistive tech announces the row group as the table's footer. Keep totals in their own row instead of merging cells across the footer.
tfoot props.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.