addColumnFilters

addColumnFilters filters table rows by specific column values.

Options

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

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

serverSide?: boolean

If true, filtering will not change $rows. Control filtering by updating $data and use plugin state to drive your fetch.

Defaults to false.

Column Options

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

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

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

Defines filter behavior for the column. Return true to keep the row.

render?: (renderProps) => RenderConfig

Renders a control on HeaderCell->props.[pluginName].render. renderProps extends TableState and includes:

• id: string
• filterValue: Writable<any>
• values: Readable<any[]>
• preFilteredValues: Readable<any[]>
• preFilteredRows: Readable<BodyRow[]>

initialFilterValue?: any

Initial filter value.

Prop Set

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

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

Plugin State

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

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

preFilteredRows: Readable<BodyRow<Item>[]>

Rows before filtering.

filterValues: Writable<Record<Id, FilterValue>>

Active filter values by column id.

Examples

$filterValues = {}