addTableFilter

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

Options

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

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

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

Custom filter. filterValue is a string; value is serialized to string by default.

initialFilterValue?: string

Default ''.

includeHiddenColumns?: boolean

Whether hidden columns are included. Default false.

serverSide?: boolean

If true, use server-side filtering by updating $data.

Column Options

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

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

exclude?: boolean

Exclude the column from search. Default false.

getFilterValue?: (value) => string

Map a cell value to a filterable string. Default serializes value.

Prop Set

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

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

BodyCell

matches: boolean — whether the cell matches the current filter value.

Plugin State

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

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

preFilteredRows: Readable<BodyRow<Item>[]>

filterValue: Writable<string>

Examples

$filterValue =