Table - EnterUI

Data & FeedbackUpdated May 3, 2026

#Default usage

Package health snapshot.
Name	Status	Usage
API	Healthy	82%
Docs	Review	64%

#Usage

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

export function Example() {
  return (
    <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>
  );
}

#Patterns

Component	State
Dialog	Ready

#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

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

Edit this page