1. Plugins
  2. addTableFilter



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


Options passed into addTableFilter.

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

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

Defines the filter behavior for the column.

Receives a filterValue and the column cell value (or the value returned from getFilterValue), and returns true if the cell should be visible.

filterValue is a string, and value will be serialized into a string.

Defaults to case-insensitive prefix matching.

initialFilterValue?: string

Defines the initial filter value.

Defaults to ''.

includeHiddenColumns?: boolean

Determines if hidden columns should be searched for matching values.

Defaults to false.

Column Options

Options passed into column definitions.

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

exclude?: boolean

Determines if the column should be excluded when searching for matching values.

Defaults to false.

getFilterValue?: (value) => string

Receives the value of the column cell and returns the value to filter the column on.

Defaults to serializing the value to string.

Prop Set

Extensions to the view model.

Subscribe to .props() on the respective table components.

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.filter} <!-- HeaderRow props -->
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.filter} <!-- HeaderCell props -->


matches: boolean

Whether the body cell matches the current filter value.

Useful for highlighting the matching cell of the filtered rows.

Plugin State

State provided by addTableFilter.

const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.filter;

preFilteredRows: Readable<BodyRow<Item>[]>

The view model rows before filtering.

filterValue: Writable<string>

The active filter value.


Simple table filtering