2. First grid in 60 seconds

Step 2 of 6 · ← Install · Next: Data and columns →

Anatomy of the minimal example: a data rows array and a columns ColumnDef array flow into a SvGrid element that renders a small table with a header row and three body rows.

<script lang="ts">
  import { SvGrid, type GridColumns } from '@svgrid/grid'

  type Person = { firstName: string; age: number; status: string }

  const rows: Person[] = [
    { firstName: 'Ada',   age: 36, status: 'active' },
    { firstName: 'Linus', age: 54, status: 'active' },
    { firstName: 'Grace', age: 85, status: 'inactive' },
  ]

  const columns: GridColumns<Person> = [
    { field: 'firstName', header: 'First name' },
    { field: 'age',       header: 'Age' },
    { field: 'status',    header: 'Status' },
  ]
</script>

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

That's a complete, working grid.

Learn SvGrid 1: install and your first grid (2:01, silent). Watch with narration on YouTube
Transcript

Welcome to lesson one. By the end of it you will have a working data grid in a Svelte 5 project, and you will understand every line that put it there.

SvGrid is a single npm package. There is no CLI step and nothing to copy into your project: you install it and import from it.

It needs Svelte 5, because the grid is built on runes. If you are starting from nothing, the create command scaffolds a project with the grid already wired up.

Now the component. Import SvGrid, and import the GridColumns type as well. That type is what makes the column list check itself against your rows.

Your data is a plain array of plain objects. No store, no wrapper, no adapter. If you already have rows in your app, they are already in the right shape.

Columns are the other half. Each one maps a field on your row to a header the user reads. Because the array is typed as GridColumns of Person, a typo in a field name is a compile error, not a blank column.

Then render the component with both. That is the whole API for a basic grid: data in, columns in.

Save, and the dev server shows this. A real table element, with a header row and your three rows in it.

You did not ask for any of this, but you got it: click a cell and it takes focus, arrow keys move between cells, Home and End jump to the ends of a row. That is the ARIA grid pattern, on by default.

What you do not have yet is sorting, filtering or paging. Those are switched on deliberately, so a grid you never configured stays small in your bundle. Lesson two puts your own data in, and lesson three turns those features on.

The code from this lesson is on the page linked below, and it runs there too. See you in lesson two.

What you got out of the box

What you didn't get yet

Sort, filter, pagination, grouping, expansion, selection are off until you register the matching features. That's the next step.

<!-- after registering rowSortingFeature + columnFilteringFeature -->
<SvGrid
  data={rows}
  columns={columns}
  features={features}
  filterMode="menu"
/>

Step 3 → covers how data and columns work in detail; step 4 → lights up everything else.

See it run

The quick-start demo is a slightly fancier version (more columns, inline editing, range selection):

Open the live example: Quick start (Getting Started)

Source: examples/src/demos/01-quick-start.svelte.

Adding the three common features

Each capability is one boolean. Turn on what the screen needs and nothing else ships - which is why the first grid stays small.

<script lang="ts">
  import { SvGrid, type GridColumns, type SvGridApi } from '@svgrid/grid'

  type Person = {
    id: number
    name: string
    email: string
    city: string
    age: number
    salary: number
  }

  const seed: Person[] = [
    { id: 1, name: 'Ada Lovelace',   email: '[email protected]',   city: 'London',   age: 36, salary: 142000 },
    { id: 2, name: 'Grace Hopper',   email: '[email protected]', city: 'New York', age: 45, salary: 168000 },
    { id: 3, name: 'Linus Torvalds', email: '[email protected]', city: 'Portland', age: 54, salary: 155000 },
  ]

  const columns: GridColumns<Person> = [
    { field: 'name',   header: 'Name',   width: 180 },
    { field: 'city',   header: 'City',   width: 140 },
    { field: 'age',    header: 'Age',    width: 90 },
    { field: 'salary', header: 'Salary', width: 140,
      format: { type: 'currency', currency: 'USD' } },
  ]
</script>

<SvGrid data={seed} {columns} sortable filterable pageable pageSize={2} />

Related articles