Table
A responsive table component.
Preview
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
Installation
Install the package using your preferred package manager:
npx shadcn@latest add @airy/tableUsage
Import the component from the package:
import { Table } from "@/components/ui/table"Then use it in your application:
<Table />Examples
Default
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
Selected row state
| Invoice | Status | Amount |
|---|---|---|
| INV003 | Processing | $320.00 |
| INV004 | Paid | $180.00 |
With footer totals
| Plan | Seats | Monthly |
|---|---|---|
| Starter | 5 | $120.00 |
| Growth | 12 | $360.00 |
| Total | $480.00 | |