Step 7: Add Filtering

Global Filter

Use the GlobalFilter component for a search-across-all-columns input:

import { useTable, Table, GlobalFilter } from '@zvndev/yable-react'

export function EmployeeTable() {
  const table = useTable({ data: employees, columns })

  return (
    <div>
      <GlobalFilter table={table} placeholder="Search employees..." debounce={300} />
      <Table table={table} />
    </div>
  )
}

Per-Column Filters

Set column filter values programmatically:

// Filter the department column to show only "Engineering"
table.setColumnFilters([{ id: 'department', value: 'Engineering' }])

// Clear all column filters
table.resetColumnFilters(true)

You can also use built-in filter functions on column definitions:

columnHelper.accessor('salary', {
  header: 'Salary',
  filterFn: 'inNumberRange', // Built-in: filters by [min, max] tuple
})

Available built-in filter functions: includesString, includesStringSensitive, equalsString, equalsStringSensitive, arrIncludes, arrIncludesAll, arrIncludesSome, equals, weakEquals, inNumberRange, inDateRange.

---