ComponentsData Table
Pagination
Client-side and server-side pagination for DataTable.
DataTable supports both client-side and server-side pagination.
Client-Side Pagination
For local data arrays, pass a pageSize and the table will handle slicing automatically.
| Invoice | Status | Type | Customer | Amount | |
|---|---|---|---|---|---|
| INV-0001 | Paid | credit | John Doe | john.doe@example.com | €321.00 |
| INV-0002 | Pending | debit | Jane Smith | jane.smith@example.com | €106.00 |
| INV-0003 | Pending | debit | Bob Wilson | bob.wilson@example.com | €348.00 |
| INV-0004 | Overdue | credit | Alice Brown | alice.brown@example.com | €421.00 |
| INV-0005 | Overdue | credit | Charlie Davis | charlie.davis@example.com | €399.00 |
| INV-0006 | Pending | credit | Eva Martinez | eva.martinez@example.com | €529.00 |
| INV-0007 | Pending | debit | Frank Miller | frank.miller@example.com | €546.00 |
| INV-0008 | Pending | credit | Grace Lee | grace.lee@example.com | €299.00 |
| INV-0009 | Paid | credit | Henry Chen | henry.chen@example.com | €387.00 |
| INV-0010 | Paid | credit | Isabel Garcia | isabel.garcia@example.com | €476.00 |
import { DataTable, DataTableContent, DataTablePagination } from "@epilot/volt-ui"
function MyTable() {
return (
<DataTable
columns={columns}
data={data} // Full dataset
pagination={{ pageSize: 10 }}
>
<DataTableContent />
<DataTablePagination className="mt-4" />
</DataTable>
)
}Server-Side Pagination
For paginated APIs, manage the pagination state yourself and provide totalItems. The table operates in server-side pagination mode and expects only the current page's data.
| Invoice | Status | Type | Customer | Amount | |
|---|---|---|---|---|---|
| INV-0001 | Paid | credit | John Doe | john.doe@example.com | €321.00 |
| INV-0002 | Pending | debit | Jane Smith | jane.smith@example.com | €106.00 |
| INV-0003 | Pending | debit | Bob Wilson | bob.wilson@example.com | €348.00 |
| INV-0004 | Overdue | credit | Alice Brown | alice.brown@example.com | €421.00 |
| INV-0005 | Overdue | credit | Charlie Davis | charlie.davis@example.com | €399.00 |
| INV-0006 | Pending | credit | Eva Martinez | eva.martinez@example.com | €529.00 |
| INV-0007 | Pending | debit | Frank Miller | frank.miller@example.com | €546.00 |
| INV-0008 | Pending | credit | Grace Lee | grace.lee@example.com | €299.00 |
| INV-0009 | Paid | credit | Henry Chen | henry.chen@example.com | €387.00 |
| INV-0010 | Paid | credit | Isabel Garcia | isabel.garcia@example.com | €476.00 |
import { useState } from "react"
import type { PaginationState } from "@tanstack/react-table"
import { DataTable, DataTableContent, DataTablePagination } from "@epilot/volt-ui"
function MyTable() {
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
})
// In real app, use TanStack Query or similar
const { data, totalItems } = useServerData(pagination)
return (
<DataTable
columns={columns}
data={data} // Only current page data from server
pagination={{
pageIndex: pagination.pageIndex,
pageSize: pagination.pageSize,
totalItems: totalItems,
onPaginationChange: setPagination,
}}
>
<DataTableContent />
<DataTablePagination className="mt-4" />
</DataTable>
)
}Pagination Configuration
type PaginationConfig = {
pageIndex?: number // Controlled page index (0-indexed)
pageSize?: number // Default: 10
pageSizeOptions?: number[] // Default: [10, 25, 50, 100]
totalItems?: number // Server-side pagination total
pageCount?: number // Server-side pagination page count
onPaginationChange?: (state: PaginationState) => void
}DataTablePagination Props
| Prop | Type | Default | Description |
|---|---|---|---|
pageSizeOptions | number[] | [10, 25, 50, 100] | Page size options |
siblingCount | number | 2 | Number of sibling pages to show on each side |
className | string | - | Additional CSS classes |