Table
@/components/kamod-ui/table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
Installation
Import Table primitives from `@/components/kamod-ui/table`.
pnpm add @kamod-ch/uiUsage
Use TableHeader/TableBody/TableFooter and align numeric data to the right for better scanability.
import { Table } from "@/components/kamod-ui/table";<Table />Invoice Table
A modern invoice table with status, payment method, and right-aligned amounts.
Table Actions
Add contextual row actions with a compact dropdown menu.
| Product | Price | Actions |
|---|---|---|
| Wireless Mouse | $29.99 | |
| Mechanical Keyboard | $129.99 | |
| USB-C Hub | $49.99 |
API Reference
Props, slots and variants for this component.
Table
Table component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| Table children | TableHeader/TableBody/... primitives | required |
| TableCaption | caption element | optional |
| TableFooter | footer section | optional |
| class | string | undefined |
Accessibility Notes
Use concise header labels, preserve semantic table structure, and keep meaningful caption/footer content so assistive technologies can map row and column relationships.