SV5UI sv5ui v2.6.1
Getting Started v1.3.0

Installation

Add the grid to a SvelteKit project that already runs sv5ui.

1

Install the package

The grid ships separately from sv5ui, and needs sv5ui 2.5.0 or later beside it. @iconify/svelte and tailwindcss are declared as peer dependencies rather than dependencies, so the grid and sv5ui share one instance of each. You do not install them yourself: sv5ui already carries @iconify/svelte, and any package manager that resolves peers automatically finds it there.

npm
npm install @sv5ui/datagrid sv5ui
2

Import both themes

Tailwind 4 skips node_modules when it scans for class names, so a package has to register its own compiled output. Each theme file does that for itself, which is why no @source path of your own is needed.

src/routes/layout.css
@import 'tailwindcss';
@import 'sv5ui/theme.css';
@import '@sv5ui/datagrid/theme.css';

@custom-variant dark (&:where(.dark, .dark *));
3

Render a grid

Rows, columns and a stable row id are the only required props. The shorthand form registers sorting, filtering, column operations and pagination for you.

src/routes/+page.svelte
<script lang="ts">
  import { DataGrid, type ColumnDef } from '@sv5ui/datagrid';

  interface Person {
    id: number;
    name: string;
    age: number;
  }

  const people: Person[] = [
    { id: 1, name: 'Ada Lovelace', age: 36 },
    { id: 2, name: 'Alan Turing', age: 41 }
  ];

  const columns: ColumnDef<Person>[] = [
    { id: 'name', header: 'Name', sortable: true, filter: 'text', flex: 1 },
    { id: 'age', header: 'Age', sortable: true, align: 'right', width: 100 }
  ];
</script>

<DataGrid data={people} {columns} getRowId={(person) => String(person.id)} toolbar />
4

Pick your features (optional)

Use createDataGrid when you want to choose exactly which features load, hold the state yourself, or drive the grid from outside. A feature you do not register is never imported.

src/routes/+page.svelte
<script lang="ts">
  import {
    createDataGrid,
    DataGrid,
    columnOps,
    filtering,
    selection,
    sorting,
    virtualization
  } from '@sv5ui/datagrid';

  const grid = createDataGrid<Person>({
    data: people,
    columns,
    getRowId: (person) => String(person.id),
    features: [sorting(), filtering(), columnOps(), selection(), virtualization()]
  });
</script>

<DataGrid {grid} toolbar class="h-[640px]" />

Requirements

PackageVersion
SvelteKit2.x
Svelte5.x
Tailwind CSS4.x
sv5ui2.5.0 or later
@iconify/svelte5.2.1 or later

Localization

Twelve language packs ship from a separate entry point. Import the ones your app offers and the grid picks between them using the page language.

locales.ts
import { createDataGrid } from '@sv5ui/datagrid';
import { enUS, jaJP, viVN } from '@sv5ui/datagrid/locales';

// Hand the grid the languages it may use; it picks one from the page's own
// language. Only what you import is bundled.
const grid = createDataGrid<Person>({ columns, data, getRowId, locales: [enUS, viVN, jaJP] });

App-wide Defaults

Set the density and slot classes every grid in the app starts from. Grids read this when they mount, so call it once at startup.

config.ts
// src/routes/+layout.svelte or a setup module
import { defineDataGridConfig } from '@sv5ui/datagrid';

defineDataGridConfig({
  defaultVariants: { density: 'compact' },
  slots: { cell: 'font-mono', headerCell: 'uppercase tracking-wide' }
});

Troubleshooting

Three things go wrong often enough to name. Each one is a build or setup problem rather than something a demo can show, so what follows is the fix in full.

/* 1. The grid renders unstyled.
   The theme import is missing. It goes in the same stylesheet that imports
   sv5ui, next to it rather than anywhere else. A @source path pointing into
   node_modules is not the fix. */
@import 'tailwindcss';
@import 'sv5ui/theme.css';
@import '@sv5ui/datagrid/theme.css';

/* 2. "Only one window-order feature may be registered".
   pagination() and virtualization() both take over the windowing stage, so
   registering both throws when the grid is constructed. Pick one per grid:

   features: [sorting(), pagination({ pageSize: 25 })]   // paged
   features: [sorting(), virtualization({ rowHeight: 40 })]  // scrolled

   3. "Cannot find module @iconify/svelte".
   It is a peer dependency, and sv5ui already depends on it directly, so any
   package manager that resolves peers (bun, pnpm 8+, npm 7+) finds it there.
   Install it yourself only if your setup does not:

   bun add @iconify/svelte */
Introduction Quick Start