Filter Variants

Turn on enableColumnFilters. Each column gets a filter under its header; pick the kind with filterVariant.

First Name

State

Age

Active

Filter by StateAlaskaArkansasCaliforniaColoradoConnecticutFloridaHawaiiIdahoIllinoisIndianaIowaKansasLouisianaMaineMarylandMassachusettsMichiganMinnesotaMississippiMissouriMontanaNevadaNew HampshireNew JerseyNew YorkNorth CarolinaNorth DakotaOhioOregonPennsylvaniaSouth DakotaTennesseeTexasVirginiaWashingtonWisconsinWyoming

Tyson

Pennsylvania

56

No

Lennie

Colorado

47

No

Ira

Kansas

39

Yes

Jodi

Idaho

36

No

Hyman

Pennsylvania

66

No

1–5 of 80

FilterVariants.svelte

<script lang="ts">
  import { MaterialHeadlessTable, type CellContext, type HeadlessColumnDef } from 'material-svelte-headless-table';
  import { type Person, makeData } from '../data/makeData';

  const columns: HeadlessColumnDef<Person>[] = [
    { accessor: 'firstName', header: 'First Name' },
    { accessor: 'state', header: 'State', filterVariant: 'select' },
    { accessor: 'age', header: 'Age', filterVariant: 'range', width: 160 },
    {
      accessor: 'isActive',
      header: 'Active',
      filterVariant: 'checkbox',
      cell: active,
      width: 120,
    },
  ];

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

{#snippet active({ value }: CellContext<Person, boolean>)}
  {value ? 'Yes' : 'No'}
{/snippet}

<MaterialHeadlessTable {columns} {data} enableColumnFilters initialState={{ pageSize: 5 }} pageSizes={[5, 10]} />