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

---