Table
Semantic HTML table with Storm styling. Includes header, body, footer, row, head, cell, and caption sub-components.
Usage
tsx
1import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@storm-ds/ui'23<Table>4 <TableHeader>5 <TableRow>6 <TableHead>Name</TableHead>7 <TableHead>Email</TableHead>8 </TableRow>9 </TableHeader>10 <TableBody>11 <TableRow>12 <TableCell>John</TableCell>13 <TableCell>john@example.com</TableCell>14 </TableRow>15 </TableBody>16</Table>Default
| Name | Status | Role |
|---|---|---|
| Alice Johnson | Active | Admin |
| Bob Smith | Pending | Editor |
| Carol White | Inactive | Viewer |
tsx
1<Table>2 <TableHeader>3 <TableRow>4 <TableHead>Name</TableHead>5 <TableHead>Status</TableHead>6 <TableHead>Role</TableHead>7 </TableRow>8 </TableHeader>9 <TableBody>10 <TableRow>11 <TableCell>Alice</TableCell>12 <TableCell>Active</TableCell>13 <TableCell>Admin</TableCell>14 </TableRow>15 <TableRow>16 <TableCell>Bob</TableCell>17 <TableCell>Inactive</TableCell>18 <TableCell>User</TableCell>19 </TableRow>20 </TableBody>21</Table>With Caption
| Date | Description | Amount |
|---|---|---|
| 2024-01-15 | Subscription renewal | $29.00 |
| 2024-01-10 | Add-on purchase | $9.00 |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Custom classes |
Use with AI
Create a Next.js component using Storm UI's Table. Import: `import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@storm-ds/ui'`. Compose them like semantic HTML tables. TableHead for column headers, TableCell for data. Hover effect on rows. Server component compatible. Example: `<Table><TableHeader><TableRow><TableHead>Col</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Data</TableCell></TableRow></TableBody></Table>`