Table

A responsive table component for displaying tabular data.

Installation

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@gradeui/ui"

Usage

A list of your recent projects.
Device	Status	Power
Marketing Site	Live	v2.4

Examples

Project List

Your recent projects
ID	Project	Status	Version	Today
PRJ001	Marketing Site	Live	v2.4	1,482 visits
PRJ002	Mobile App	Live	v1.8	6,210 sessions
PRJ003	Admin Dashboard	Deploying	v3.1	—
PRJ004	API Gateway	Live	v0.9	2.1M requests
PRJ005	Docs Portal	Live	—	—

With Footer

Daily activity summary
Date	Deploys	Requests	Errors
2024-01-15	8	2.1M	14
2024-01-14	5	1.8M	21
2024-01-13	12	2.4M	6
2024-01-12	3	1.5M	38
2024-01-11	9	2.0M	11
Total (5 days)	37	9.8M	90

Simple Table

Metric	Value
Active users	1,284
Today's sessions	6,210
This month	186,420
All-time	12.4M

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes.

Accessibility

Uses native HTML table elements for semantics
TableCaption provides accessible description
TableHead cells use proper th elements
Supports keyboard navigation
Scrollable container for responsive design

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/table.md and shipped inside the published @gradeui/ui tarball.

---
name: Table
import: "@gradeui/ui"
subcomponents: [TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption]
props:
  - Each subcomponent accepts native table HTML attrs
  - No variants — styling follows the active theme tokens
when_to_use: Structured tabular data — rows × columns with alignment requirements. NOT a layout grid — for that use div+Tailwind grid utilities. Keep to <100 rows; larger datasets need virtualisation (not in DS).
composes_with: [Card (wrap the table), Badge (inside TableCell for status), Checkbox (row selection), Button (row actions)]
aliases: [table, table view, data table, datatable, grid view, data grid, rows and columns]
---

```jsx
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Invoice #001</TableCell>
      <TableCell className="text-right">$250</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

Chart

Skeleton