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>
  )
}