1. Plugins
  2. addColumnFilters

Plugins

addColumnFilters

addColumnFilters filters table rows by specific column values.

Options

Options passed into addColumnFilters.

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

serverSide?: boolean

If true, the column filter will have no effect on the rows of the table. Instead, you can control filtering by updating $data. The plugin's state can be used as variables in your data-fetching query to get filtered data from the server directly.

Defaults to false.

Column Options

Options passed into column definitions.

const columns = table.createColumns([
  table.column({
    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 -->
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

HeaderCell

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.

Examples

Simple filtering