Table
A table component for displaying tabular data with sorting support.
Installation
npm install fuyukaki-uiUsage
import {
Table,
TableHeader,
TableBody,
TableRow,
TableHead,
TableCell,
} from 'fuyukaki-ui'
function App() {
return (
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Item 1</TableCell>
<TableCell>Active</TableCell>
</TableRow>
</TableBody>
</Table>
)
}Basic Example
Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
With Selection
Name | Email | Role |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
| Bob Johnson | bob@example.com | User |
Props
| Component | Prop | Type |
|---|---|---|
| Table | variant | 'default' | 'striped' |
| Table | size | 'sm' | 'md' | 'lg' |
| TableRow | selected | boolean |
| TableHead | sortable | boolean |
| TableHead | sortDirection | 'asc' | 'desc' | undefined |
| TableHead | onSort | () => void |
