`, `| `, ` | `) to ensure proper accessibility and structure. Compose the table by nesting the sub-components:
```tsx
import {
TableRoot,
TableHeader,
TableBody,
TableHead,
TableRow,
TableCell,
Typography,
} from '@chainlink/blocks'
export function MyTable() {
return (
Name
Email
Role
John Doe
john.doe@example.com
Admin
)
}
```
### Using TablePagination
To add pagination to your table, you can use the `TablePagination` component alongside the Table primitives. This requires setting up a TanStack Table instance:
```tsx
import {
TableRoot,
TableHeader,
TableBody,
TableHead,
TableRow,
TableCell,
TablePagination,
Typography,
} from '@chainlink/blocks'
import {
type ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
} from '@tanstack/react-table'
type DataType = {
name: string
email: string
}
const columns: ColumnDef[] = [
{
accessorKey: 'name',
header: 'Name',
cell: ({ getValue }) => (
{getValue() as string}
),
},
{
accessorKey: 'email',
header: 'Email',
cell: ({ getValue }) => (
{getValue() as string}
),
},
]
export function PaginatedTable({ data }: { data: DataType[] }) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
initialState: {
pagination: {
pageSize: 10,
},
},
})
return (
<>
{table.getHeaderGroups().map((headerGroup) => (
{headerGroup.headers.map((header) => (
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
))}
))}
{table.getRowModel().rows.map((row) => (
{row.getVisibleCells().map((cell) => (
{flexRender(cell.column.columnDef.cell, cell.getContext())}
))}
))}
)
}
```
To use a static `Page N` control instead of the page select dropdown, use the same setup as the display pagination story:
```tsx
const PaginatedTableDisplayExample = () => {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
initialState: {
pagination: {
pageSize: 10,
},
},
})
return (
<>
{/* ...table header/body rendering... */}
)
}
```
## Rendered Element
The `TableRoot` component renders a `` wrapper containing a ` ` element. The sub-components render their corresponding semantic HTML elements:
- `TableHeader` renders a `` element
- `TableBody` renders a `` element
- `TableRow` renders a `` element
- `TableHead` renders a `| ` element
- `TableCell` renders a ` | ` element
This semantic structure ensures proper accessibility and allows screen readers to understand the table structure.
## Examples
### With Actions
Tables can include action buttons in cells for row-level operations.
### Invoice Table
A practical example showing invoice data with status indicators using Tags.
### Product Table
An example displaying product information with conditional styling based on stock levels.
### Empty Table
Display a message when no data is available using `colSpan` to span all columns.
### Single Column
A simple single-column table for displaying lists or tasks.
### Expandable Rows
Tables can include expandable rows to show additional details. This pattern is useful for displaying error messages, detailed information, or nested content. Use `colSpan` to span the expanded content across all columns, and manage the expanded state with React's `useState` hook.
### With Pagination
The Table primitives can be combined with `TablePagination` to add pagination controls. This requires setting up a TanStack Table instance with pagination enabled. The `TablePagination` component displays whatever pagination information is available, from a static `Page N` control up to range text and a page select when the total is known.
### With Display Pagination
Use `pageControlMode="display"` to show a static `Page N` control between the previous/next buttons.
| |