Step 8: Add Pagination
Add the Pagination component as a child of Table:
import { useTable, Table, Pagination, GlobalFilter } from '@zvndev/yable-react'
export function EmployeeTable() {
const table = useTable({
data: employees,
columns,
// Optional: set initial page size
initialState: {
pagination: { pageIndex: 0, pageSize: 5 },
},
})
return (
<div>
<GlobalFilter table={table} placeholder="Search employees..." />
<Table table={table} striped>
<Pagination
table={table}
showPageSize
pageSizes={[5, 10, 25, 50]}
showInfo
/>
</Table>
</div>
)
}