Usage

Pass columns and data. Every feature has a prop that turns it on or off.

<script lang="ts">
  import { MaterialHeadlessTable, type HeadlessColumnDef } from 'material-svelte-headless-table';

  type Person = { name: string; age: number; city: string };

  // Define the columns once: they are read when the table is created.
  const columns: HeadlessColumnDef<Person>[] = [
    { accessor: 'name', header: 'Name' },
    { accessor: 'age', header: 'Age', align: 'end', width: 100 },
    { accessor: 'city', header: 'City', filterVariant: 'select' },
  ];

  let data = $state<Person[]>([]);
</script>

<MaterialHeadlessTable {columns} {data} enableRowSelection enableColumnFilters />

data is reactive: assign a new array and the table updates. The columns and the set of enabled features are read once, when the table is created.

Reading the table from outside

Bind table to get the table instance. It exposes the state (table.state) and methods such as setSorting, setGlobalFilter, setPageIndex and toggleAllRows. See The table instance.

<script lang="ts">
  import type { HeadlessTableInstance } from 'material-svelte-headless-table';

  let table = $state<HeadlessTableInstance<Person>>();
</script>

<MaterialHeadlessTable bind:table {columns} {data} />
<button onclick={() => table?.setGlobalFilter('Paris')}>Search Paris</button>

Plugins only

The table only has features that Svelte Headless Table provides as plugins. It does not add column pinning, in-table editing, fuzzy search modes, facet counts or detail panels. If you need those, see the TanStack Table based packages in the same repository.