Filtering and Search

First Name Filter Mode: Fuzzy	State AlabamaAlaskaArizonaArkansasCaliforniaColoradoConnecticutGeorgiaHawaiiIdahoIndianaIowaKansasLouisianaMaineMarylandMichiganMississippiMissouriMontanaNebraskaNevadaNew HampshireNew JerseyNew MexicoNew YorkNorth DakotaOhioOklahomaPennsylvaniaRhode IslandSouth CarolinaTennesseeTexasUtahVermontVirginiaWest VirginiaWisconsinWyoming Filter Mode: Equals	Age (range) Filter Mode: Between Inclusive	Salary (slider) 35144 187367 Filter Mode: Between Inclusive	Active Filter by Active
Rasheed	New York	41	109386	true
Elijah	West Virginia	33	101177	true
Carlotta	Vermont	43	51493	true
Keith	Alabama	45	111712	false
Beth	Ohio	24	148988	true
Leonora	Nebraska	42	115810	false
Roma	Louisiana	43	177249	false
Alessia	Missouri	28	95326	true
Mark	Virginia	56	89381	true
Avis	Louisiana	37	35348	false

Rows per page 5101520253050100

1-10 of 80

FilterVariants.svelte

<script lang="ts">
  import { MaterialSvelteTable, type MRT_ColumnDef } from 'material-svelte-tanstack-table';
  import { type Person, makeData, states } from '../data/makeData';

  const columns: MRT_ColumnDef<Person>[] = [
    { accessorKey: 'firstName', header: 'First Name' }, // text (default)
    {
      accessorKey: 'state',
      filterSelectOptions: states,
      filterVariant: 'select',
      header: 'State',
    },
    { accessorKey: 'age', filterVariant: 'range', header: 'Age (range)', size: 200 },
    { accessorKey: 'salary', filterVariant: 'range-slider', header: 'Salary (slider)', size: 220 },
    {
      accessorFn: (row) => String(row.isActive),
      filterVariant: 'checkbox',
      header: 'Active',
      id: 'isActive',
      size: 140,
    },
  ];

  const data = makeData(80);
</script>

<MaterialSvelteTable
  options={{
    columns,
    data,
    enableColumnFilterModes: true,
    enableFacetedValues: true,
    initialState: { showColumnFilters: true },
  }}
/>

Filter variants

Set filterVariant on a column to choose its input:

Variant	Input
text (default)	Text field
select, multi-select	Dropdown. Give filterSelectOptions, or enable enableFacetedValues to build them from the data
range	Min and max fields
range-slider	Two-thumb slider
checkbox	Any / true / false (compares the strings 'true' and 'false')
autocomplete	Text field with suggestions
date, datetime, time, and their -range forms	Native date and time inputs

Date filters receive Date objects (HH:mm strings for time), so your column values should be Dates too.

Filter modes

Each column filters with a function (fuzzy by default). Let users switch with enableColumnFilterModes, limit the choices per column with columnFilterModeOptions, or set one with filterFn:

{ accessorKey: 'name', header: 'Name', filterFn: 'startsWith', columnFilterModeOptions: ['startsWith', 'contains'] }

Built in: fuzzy, contains, startsWith, endsWith, equals, notEquals, between, betweenInclusive, greaterThan, greaterThanOrEqualTo, lessThan, lessThanOrEqualTo, empty, notEmpty, plus TanStack’s.

Custom filter functions

Pass a function as a column’s filterFn:

{
  accessorKey: 'name',
  header: 'Name',
  filterFn: (row, columnId, filterValue) =>
    String(row.getValue(columnId)).toLowerCase().startsWith(String(filterValue).toLowerCase()),
}

To use a name instead (including as the globalFilterFn), register functions with the filterFns option. They are registered once, when the table is created:

options={{ columns, data, filterFns: { startsWithLetter }, globalFilterFn: 'startsWithLetter' }}

Global search

The search box is on by default, and fuzzy with ranked results. Useful options: enableGlobalFilter, globalFilterFn, enableGlobalFilterModes, enableGlobalFilterRankedResults, positionGlobalFilter and initialState.showGlobalFilter.

Filter display

columnFilterDisplayMode is 'subheader' (a row under the headers, the default), 'popover' (opens from the column header) or 'custom' (you place the filters). A column’s Filter snippet replaces the built-in input.

Server-side filtering

Set manualFiltering: true and control columnFilters and globalFilter yourself. See Remote data.