Complete Example

Here is the full working example with all features combined:

import { useState } from 'react'
import { createColumnHelper, useTable, Table, Pagination, GlobalFilter } from '@zvndev/yable-react'
import type { SortingState } from '@zvndev/yable-react'
import '@zvndev/yable-themes'

// Data type
interface Employee {
  id: number
  name: string
  department: string
  salary: number
  startDate: string
  active: boolean
}

// Column helper
const columnHelper = createColumnHelper<Employee>()

// Column definitions
const columns = [
  columnHelper.accessor('name', {
    header: 'Name',
    enableSorting: true,
    editable: true,
    editConfig: { type: 'text' },
  }),
  columnHelper.accessor('department', {
    header: 'Department',
    enableSorting: true,
    editable: true,
    editConfig: {
      type: 'select',
      options: [
        { label: 'Engineering', value: 'Engineering' },
        { label: 'Marketing', value: 'Marketing' },
        { label: 'Sales', value: 'Sales' },
      ],
    },
  }),
  columnHelper.accessor('salary', {
    header: 'Salary',
    enableSorting: true,
    editable: true,
    editConfig: { type: 'number' },
    cell: ({ getValue }) => `$${getValue().toLocaleString()}`,
  }),
  columnHelper.accessor('startDate', {
    header: 'Start Date',
    enableSorting: true,
    sortingFn: 'datetime',
  }),
  columnHelper.accessor('active', {
    header: 'Active',
    editable: true,
    editConfig: { type: 'toggle' },
  }),
]

// Initial data
const initialData: Employee[] = [
  {
    id: 1,
    name: 'Alice Johnson',
    department: 'Engineering',
    salary: 120000,
    startDate: '2021-03-15',
    active: true,
  },
  {
    id: 2,
    name: 'Bob Smith',
    department: 'Marketing',
    salary: 85000,
    startDate: '2020-07-01',
    active: true,
  },
  {
    id: 3,
    name: 'Charlie Brown',
    department: 'Engineering',
    salary: 110000,
    startDate: '2022-01-10',
    active: false,
  },
  {
    id: 4,
    name: 'Diana Prince',
    department: 'Sales',
    salary: 95000,
    startDate: '2019-11-20',
    active: true,
  },
  {
    id: 5,
    name: 'Eve Williams',
    department: 'Engineering',
    salary: 130000,
    startDate: '2018-05-03',
    active: true,
  },
  {
    id: 6,
    name: 'Frank Miller',
    department: 'Marketing',
    salary: 78000,
    startDate: '2023-02-14',
    active: true,
  },
  {
    id: 7,
    name: 'Grace Lee',
    department: 'Sales',
    salary: 92000,
    startDate: '2021-08-22',
    active: false,
  },
  {
    id: 8,
    name: 'Henry Davis',
    department: 'Engineering',
    salary: 115000,
    startDate: '2020-12-01',
    active: true,
  },
]

export function EmployeeTable() {
  const [data, setData] = useState(initialData)
  const [sorting, setSorting] = useState<SortingState>([])

  const table = useTable({
    data,
    columns,
    state: { sorting },
    onSortingChange: setSorting,
    enableCellEditing: true,
    onEditCommit: (changes) => {
      setData((prev) =>
        prev.map((row, i) => {
          const rowChanges = changes[String(i)]
          return rowChanges ? { ...row, ...rowChanges } : row
        }),
      )
    },
    initialState: {
      pagination: { pageIndex: 0, pageSize: 5 },
    },
  })

  return (
    <div>
      <GlobalFilter table={table} placeholder="Search employees..." />
      <Table table={table} striped stickyHeader>
        <Pagination table={table} showPageSize pageSizes={[5, 10, 25]} />
      </Table>
    </div>
  )
}

---