Filter Variants

One column per filter variant, with the filter row shown and filter modes enabled. See the Filtering guide.

First Name Filter Mode: Fuzzy	State Filter Mode: Equals	Age (range) Filter Mode: Between Inclusive	Salary (slider) 33216 188250 Filter Mode: Between Inclusive	Active Filter by Active
Jude	Mississippi	21	60024	false
Brody	Ohio	61	155110	true
Muriel	Colorado	68	152443	true
Thad	New Mexico	32	164100	true
Betsy	Missouri	61	77767	true
Trycia	Illinois	25	123955	false
Rex	Massachusetts	61	107469	true
Domenick	Washington	66	149173	true
Theron	South Carolina	21	157805	true
Althea	Pennsylvania	30	169941	false

<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 },
  }}
/>