Plugins

addTableFilter

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

# Options

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.

# serverSide?: boolean

If true, the table 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: {
      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

{#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 -->
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

# BodyCell

# matches: boolean

Whether the body cell matches the current filter value.

Useful for highlighting the matching cell of the filtered rows.

# Plugin State

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.

# Examples

# Simple table filtering