Design System
Table
Tables display structured data in rows and columns. They provide an efficient way to organize and present information.
Basic Usage
Tables consist of header, body, and optional footer sections with rows and cells.
Basic Table
| Name | Role | |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
| Bob Johnson | bob@example.com | Moderator |
Hover States
Table rows have hover states for better interactivity.
Table with Hover
| Product | Price | Stock |
|---|---|---|
| Widget A | $19.99 | 150 |
| Widget B | $24.99 | 75 |
| Widget C | $29.99 | 200 |
Usage
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export function MyComponent() {
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>John Doe</TableCell>
<TableCell>john@example.com</TableCell>
</TableRow>
</TableBody>
</Table>
);
}Material 3 Features
- Borders: Subtle outline-variant borders with opacity
- Hover States: Surface-container-low background on hover
- Header: Surface-container-high background for contrast
- Transitions: Smooth hover transitions using motion tokens
- Theme Support: Automatically adapts to light and dark themes