1. Plugins
  2. addColumnFilters



addColumnFilters filters table rows by specific column values.


Options passed into addColumnFilters.

const table = createTable(data, {
  colFilter: addColumnFilters({ ... }),

Nothing here so far.

Column Options

Options passed into column definitions.

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

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

Defines the filter behavior for the column.

Receives filterValue and the column cell value, and returns true if the cell should be visible.

render: (renderProps) => RenderConfig

Defines the component to render on HeaderCell->props.[pluginName].render.

renderProps extends TableState and includes additional properties.

renderProps.id: string

The id of the column.

renderProps.filterValue: Writable<any>

A Writable store with the current filter value.

renderProps.values: Readable<any[]>

A Readable store with the filtered values on the column.

renderProps.preFilteredValues: Readable<any[]>

A Readable store with the pre-filtered values on the column.

renderProps.preFilteredRows: Readable<BodyRow[]>

A Readable store with the pre-filtered rows on the table.

initialFilterValue?: any

Defines the initial filter value for the column.

Defaults to undefined.

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.colFilter} <!-- HeaderRow props -->
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.colFilter} <!-- HeaderCell props -->


Possibly undefined if no filter is configured on the column represented by the header cell.

render: RenderConfig | undefined

The render component defined in the column options of the data column represented by the header cell.

Plugin State

State provided by addColumnFilters.

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

preFilteredRows: Readable<BodyRow<Item>[]>

The view model rows before filtering.

filterValues: Writable<Record<Id, FilterValue>>

The active filter values. A record of column id to filter value.


Simple filtering