addTableFilter

addTableFilter filters table rows on data that may be in any column.

Options

const table = createTable(data, {
  filter: addTableFilter({ ... }),
});

const table = createTable(data, {
  filter: addTableFilter({ ... }),
});

fn?: ({ filterValue, value }) => boolean

Custom filter. filterValue is a string; value is serialized to string by default.

initialFilterValue?: string

Default ''.

includeHiddenColumns?: boolean

Whether hidden columns are included. Default false.

serverSide?: boolean

If true, use server-side filtering by updating the table’s data.

Column Options

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      filter: { ... },
    },
  }),
]);

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      filter: { ... },
    },
  }),
]);

exclude?: boolean

Exclude the column from search. Default false.

getFilterValue?: (value) => string

Map a cell value to a filterable string. Default serializes value.

Prop Set

BodyCell props cell.current.props.tableFilter

matches: boolean

True if this cell matches the current filter.

Interactions

• Hidden columns are excluded from the search by default. Set includeHiddenColumns: true to search their values while they are hidden.
• With addSubRows, a parent row is kept when any descendant matches, and only the matching descendants are shown under it.

Plugin State

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { filterValue } = pluginStates.filter

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { filterValue } = pluginStates.filter

filterValue: Box<string>

The current filter text. Bind an input to it directly:

<input bind:value={filterValue.current} placeholder="Search rows..." />

<input bind:value={filterValue.current} placeholder="Search rows..." />

preFilteredRows: ReadonlyBox<BodyRow<Item>[]>

The rows before filtering was applied.

Examples

filterValue.current =