1. Install

Step 1 of 6 · Next: First grid →

SvGrid is a single npm package. There is no peer dependency on a CSS framework - bring your own, or use the default theme that ships with the render component.

Fastest start: scaffold a project

Starting fresh? Skip the manual wiring and scaffold a project with the grid already set up:

npm create sv-grid@latest                                   # interactive
npm create sv-grid@latest my-admin -- --template admin-dashboard

See Starters & scaffolding for the templates (minimal Vite app or a full SvelteKit admin dashboard) and the Deploy-to-Vercel flow. To add SvGrid to an existing app, install it directly:

# pnpm (recommended)
pnpm add sv-grid-community

# npm
npm install sv-grid-community

# yarn
yarn add sv-grid-community

Requirements

The bundle is tree-shakeable: features you don't import don't ship. There's no monolithic entry that pulls everything.

Verify the install

A 5-line smoke test:

<script lang="ts">
  import { SvGrid } from 'sv-grid-community'
  const rows = [{ name: 'Ada' }, { name: 'Linus' }]
  const columns = [{ field: 'name', header: 'Name' }]
</script>

<SvGrid data={rows} columns={columns} />

If you see a styled <table> with two rows, you're done.

Pro add-on (optional)

If you need data export (Excel / PDF / CSV), data import, the AI assistant, or built-in pivot tables, install the paid Pro pack alongside the Community package:

pnpm add sv-grid-pro

See Pro features for what ships and how to license.

Where the rest of this guide goes

1. Install ← you're here
2. First grid - the minimum runnable example explained
3. Data and columns - the two arrays the grid actually reads
4. Features - opt into sort, filter, pagination, grouping, etc.
5. Theme and density - --sg-* tokens, dark mode, row height
6. Going to production - server-side data, virtualization, a11y, SSR

The combined "everything in one page" version is at ../getting-started-full.md - useful for printing or single-tab reading.