DataTable
A data table component with sorting, selection, and pagination.
Installation
tsx
npx smi-ui add data-tablePreview
| Name | Role | |
|---|---|---|
| John Doe | [email protected] | Admin |
| Jane Smith | [email protected] | Editor |
| Bob Johnson | [email protected] | Viewer |
Loading State
| Name | Role | |
|---|---|---|
Empty State
| Name | Role |
|---|
No users found
Usage
tsx
import { DataTable, Column } from "@/components/blocks/data-table"
const columns: Column<User>[] = [
{ id: "name", header: "Name", cell: (row) => row.name },
{ id: "email", header: "Email", cell: (row) => row.email },
]
<DataTable
data={users}
columns={columns}
getRowKey={(row) => row.id}
onRowClick={(row) => console.log(row)}
/>