Playground

Table

container

Structured data display in rows and columns

Data tables with headers and cells

import { Table } from "@everydayos/ui";

Usage

Basic table with headers and data

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell><Badge variant="emerald">Active</Badge></TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell><Badge variant="secondary">Pending</Badge></TableCell>
      <TableCell>User</TableCell>
    </TableRow>
  </TableBody>
</Table>

API

variant

Default: default

defaultspecsbordered

Prop	Type	Default
`className`	`string`	—
`children`*	`React.ReactNode`	—

Composition

Pairs well with

Badge

Button

Text

When to avoid

Need grid layout — use Grid instead
Simple list — use Stack or List instead