A complete table setup for data-heavy screens.
Name | Email | Role |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
| Bob Johnson | bob@example.com | User |
| Alice Brown | alice@example.com | Admin |
| Charlie Wilson | charlie@example.com | User |
import { DataTable } from "@fragment_ui/blocks";
const data = [
{ id: 1, name: "John Doe", email: "john@example.com" },
{ id: 2, name: "Jane Smith", email: "jane@example.com" },
];
const columns = [
{
id: "name",
header: "Name",
accessor: (row) => row.name,
sortable: true,
},
{
id: "email",
header: "Email",
accessor: (row) => row.email,
sortable: true,
},
];
<DataTable
data={data}
columns={columns}
pageSize={10}
searchable={true}
searchPlaceholder="Search users..."
onRowClick={(row) => console.log(row)}
/>data - Array of data objects (required)columns - Array of column definitions with id, header, accessor, and optional sortable (required)pageSize - Number of items per page (default: 10)searchable - Enable search functionality (default: true)searchPlaceholder - Search input placeholder (default: "Search...")onRowClick - Callback when row is clicked (optional)className - Additional CSS classesnpx shadcn@latest add /r/data-table.jsonData table includes proper ARIA attributes, keyboard navigation for sorting, and is fully accessible for screen readers. Compliant with WCAG 2.1.