2026-04-18 · Svelte · Integration guide

Svelte & SvelteKit Data Table: Simple Table Adapter Guide

Build a Svelte or SvelteKit data table with @simple-table/svelte—stylesheet import, component usage, and the same core features as other adapters.

Install @simple-table/svelte

Works with Svelte 4+ and SvelteKit layouts. Peers: Svelte 4+. The component follows Svelte conventions for props and slots while delegating rendering to the shared core.

npm install @simple-table/svelte

Global styles

Import the stylesheet from your root layout or +layout.svelte so routes that host the grid inherit table styling without duplication.

import "@simple-table/svelte/styles.css";

Component bootstrap

Import SimpleTable and bind data with Svelte stores or local state. Because the core is framework-agnostic, you can lift column definitions into shared modules if you also ship Vue or React clients.

import { SimpleTable } from "@simple-table/svelte";
import "@simple-table/svelte/styles.css";

SvelteKit routing

Place the grid in route components that need it; keep data loaders in +page.ts or server endpoints, then pass results into the table as props. Avoid blocking navigation on huge payloads— paginate or virtualize large sets using the same patterns as other stacks.

Next steps

Visit the Svelte hub for install verification and StackBlitz, then explore feature docs for APIs that are identical across adapters.

Continue on your stack

Simple Table pairs a shared core (simple-table-core) with official adapters for React, Vue, Angular, Svelte, Solid, and vanilla TypeScript.