Install

Material Headless Table needs Svelte 5. Everything else it uses (Svelte Headless Table, Svelte Virtual List and Svelte Material UI) is installed with it.

1. Install the package.

   npm

   npm install material-svelte-headless-table

   pnpm

   pnpm add material-svelte-headless-table

   yarn

   yarn add material-svelte-headless-table

2. Import the stylesheet once, for example in your root layout. It contains the base styles of the Svelte Material UI components the table is built from.

   import 'material-svelte-headless-table/styles.css';

3. Define the Material theme variables you want. The table reads these and has sensible fallbacks, so this step is optional. See Theming.

   :root {
     --mdc-theme-primary: #1976d2;
     --mdc-theme-surface: #ffffff;
     --mdc-theme-on-surface: #000000;
   }

SvelteKit and Astro

The package ships .svelte files, so a bundler that understands Svelte is needed. SvelteKit, Vite with @sveltejs/vite-plugin-svelte, and Astro with @astrojs/svelte all do. In Astro, render the table in an island with a client directive (this site uses client:load).

Requirements

Requirement	Version
Svelte	5.30+
Node	20+