uix-uiTable
Data table rows + table. 4 types.
| Order | Customer | Status |
|---|---|---|
| #1042 | Nusrat Jahan | Packing |
| #1041 | Tanvir Ahmed | Delivered |
| #1040 | Sadia Rahman | Cancelled |
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
export default function Example() {
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>Order</TableHead>
<TableHead>Customer</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow><TableCell>#1042</TableCell><TableCell>Nusrat Jahan</TableCell><TableCell><Badge color="warning">Packing</Badge></TableCell></TableRow>
<TableRow><TableCell>#1041</TableCell><TableCell>Tanvir Ahmed</TableCell><TableCell><Badge color="success">Delivered</Badge></TableCell></TableRow>
<TableRow><TableCell>#1040</TableCell><TableCell>Sadia Rahman</TableCell><TableCell><Badge color="error">Cancelled</Badge></TableCell></TableRow>
</TableBody>
</Table>
);
}
Installation
$ npx uix-ui@latest add tableThis copies the file into components/ui/table.tsx in your project. npx shadcn@latest add @uix/table works too.
Usage
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
<Table>
<TableHeader>
<TableRow>
<TableHead>Order</TableHead>
<TableHead>Customer</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow><TableCell>#1042</TableCell><TableCell>Nusrat Jahan</TableCell><TableCell><Badge color="warning">Packing</Badge></TableCell></TableRow>
<TableRow><TableCell>#1041</TableCell><TableCell>Tanvir Ahmed</TableCell><TableCell><Badge color="success">Delivered</Badge></TableCell></TableRow>
<TableRow><TableCell>#1040</TableCell><TableCell>Sadia Rahman</TableCell><TableCell><Badge color="error">Cancelled</Badge></TableCell></TableRow>
</TableBody>
</Table>
Examples
Selectable rows
| Order | Customer | Total |
|---|---|---|
| #1042 | Nusrat Jahan | ৳1,260 |
| #1041 | Tanvir Ahmed | ৳840 |
| #1040 | Sadia Rahman | ৳2,100 |
import * as React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
export default function Example() {
const [sel, setSel] = React.useState("1041");
const rows = [["1042", "Nusrat Jahan", "৳1,260"], ["1041", "Tanvir Ahmed", "৳840"], ["1040", "Sadia Rahman", "৳2,100"]];
return (
<Table>
<TableHeader>
<TableRow><TableHead>Order</TableHead><TableHead>Customer</TableHead><TableHead>Total</TableHead></TableRow>
</TableHeader>
<TableBody>
{rows.map(([id, who, total]) => (
<TableRow key={id} aria-selected={sel === id} onClick={() => setSel(id)} style={{ cursor: "pointer" }}>
<TableCell>#{id}</TableCell><TableCell>{who}</TableCell><TableCell>{total}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
frameClassName | string | – | Classes for the scrolling frame around the table. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts
This file exports 6 parts: Table, TableHeader, TableBody, TableRow, TableHead, TableCell. Use only the ones you need.