Plugins

addColumnFilters

addColumnFilters filters table rows by specific column values.

# Options

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

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

{#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

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