Skip to content
Shadcn Svelte Table

Install

Shadcn Svelte Table needs Svelte 5 and Tailwind CSS 4. Everything else it uses (TanStack Table v9, TanStack Virtual, bits-ui and the shadcn-svelte components) is installed with it.

  1. Install the package.

    Terminal window
    npm install shadcn-svelte-tanstack-table

  2. Import the stylesheet once, after Tailwind, in your global CSS. It makes Tailwind scan the library for the classes it uses and defines the standard shadcn-svelte tokens.

    @import 'tailwindcss';
    @import 'shadcn-svelte-tanstack-table/styles.css';

  3. Optionally, define your own shadcn tokens after that import. If your app already has a shadcn-svelte setup, the table uses your tokens as they are. See Theming.

    :root {
      --primary: oklch(0.55 0.2 260);
      --card: oklch(1 0 0);
      --foreground: oklch(0.145 0 0);
    }

SvelteKit and Astro

Section titled “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

Section titled “Requirements”
RequirementVersion
Svelte5.x
Node20+