Quick start

About this example

The Svelte 5 data grid quick start: a 25-row by 9-column table with sortable headers, a filter with an operator picker in every column menu, checkbox row selection, click-and-drag cell range selection, inline editing on double-click or F2, a row-number column and column resize. It is the shape of grid you would put in an admin tool, wired in about a hundred lines with tableFeatures for sorting, filtering and row selection.

A realistic small grid you'd actually surface in an admin tool. Wires up:

• a row-number column ("#")
• sortable headers
• per-column filter row + the column menu's operator picker
• row checkboxes for multi-row selection
• cell range selection (click+drag, Shift+arrows)
• inline editing (double-click or F2 on any cell)
• column resize (drag the right edge of any header)

Imports, features and API used

Imports: @svgrid/grid, ../shared/seed

Table features registered: rowSortingFeature, columnFilteringFeature, rowSelectionFeature

Columns: company (Company), product (Name), sellDate (Sell date), inStock (In stock), quantity (Quantity), orderId (Order ID), country (Country), price (Price)

Frequently asked questions

What is the minimum code for a sortable, filterable Svelte grid?

Import SvGrid and tableFeatures from @svgrid/grid, pass data and columns, and register rowSortingFeature and columnFilteringFeature in the features prop. filterMode="menu" puts the filter and its operator picker in each column's header menu (filterMode="row" would add a filter row instead); selectionMode="both" with showRowSelection adds the checkboxes and cell ranges.

How do I turn on inline editing?

Set enableInlineEditing on the grid. Double-click a cell or press F2 to edit it; Enter commits and Escape cancels. Columns can opt out individually with editable: false.

How do I get a reference to the grid API?

Pass an onApiReady callback. It receives the SvGridApi instance once the grid has mounted, which is what the demo uses for programmatic selection, filtering and editing.

Related documentation

• 2. First grid in 60 seconds
• Cell data types
• Column definitions
• Column headers - styling & height
• Row data

Related articles

• Evaluating SVAR Svelte DataGrid? What Changes if You Pick SvGrid - A fair comparison of SVAR Svelte DataGrid and SvGrid - both MIT, both Svelte-native - covering suite breadth, grouping and pivot, the headless engine, download numbers, and what porting actually costs.

Source code (01-quick-start.svelte)

<script lang="ts">
  /**
   * 01. Quick start
   * ---------------
   * A realistic small grid you'd actually surface in an admin tool.
   * Wires up:
   *   - a row-number column ("#")
   *   - sortable headers
   *   - per-column filter row + the column menu's operator picker
   *   - row checkboxes for multi-row selection
   *   - cell range selection (click+drag, Shift+arrows)
   *   - inline editing (double-click or F2 on any cell)
   *   - column resize (drag the right edge of any header)
   */
  import {
    SvGrid,
    tableFeatures,
    rowSortingFeature,
    columnFilteringFeature,
    rowSelectionFeature,
    type GridColumns,
    type SvGridApi,
  } from '@svgrid/grid'
  import { makeOrders, type Order } from '../shared/seed'

  const features = tableFeatures({
    rowSortingFeature,
    columnFilteringFeature,
    rowSelectionFeature,
  })

  let rows = $state<Order[]>(makeOrders(25))
  let api = $state<SvGridApi<typeof features, Order> | null>(null)

  // Columns: the leading "#" column comes from the grid's built-in
  // showRowNumbers prop, so we don't need to declare an `index` column here.
  // Widths are sized to keep the total under a typical sidebar+padding
  // viewport so the grid doesn't need a horizontal scrollbar.
  const columns: GridColumns<Order> = [
    { field: 'company', header: 'Company',  editorType: 'text', width: 140 },
    { field: 'product', header: 'Name',     editorType: 'text', width: 170 },
    {
      field: 'sellDate',
      header: 'Sell date',
      editorType: 'date',
      width: 110,
      hideBelow: 640,
      format: { type: 'date', pattern: 'y-m-d' },
    },
    {
      field: 'inStock',
      header: 'In stock',
      editorType: 'checkbox',
      width: 90,
      hideBelow: 640,
    },
    {
      field: 'quantity',
      header: 'Quantity',
      editorType: 'number',
      width: 90,
      format: { type: 'number', options: { maximumFractionDigits: 0 } },
    },
    { field: 'orderId', header: 'Order ID', editorType: 'text', width: 130, hideBelow: 640 },
    { field: 'country', header: 'Country',  editorType: 'text', width: 130, hideBelow: 640 },
    {
      field: 'price',
      header: 'Price',
      editorType: 'number',
      width: 100,
      format: { type: 'currency', currency: 'USD' },
    },
  ]
</script>

<section class="flex flex-col flex-1 min-h-0 gap-3">
  <div class="text-sm shrink-0" style="color: var(--sg-muted);">
    {rows.length} rows · {columns.length} columns ·
    sort, filter, select, edit, and resize columns are all live.
    Double-click a cell or press <kbd>F2</kbd> to edit.
  </div>

  <div class="flex-1 min-h-0">
    <SvGrid
      columnResize
      data={rows}
      columns={columns}
      features={features}
      filterMode="menu"
      selectionMode="both"
      showRowSelection={true}
      showRowNumbers={true}
      showGroupingControls={false}
      enableInlineEditing={true}
      enableCellSelection={true}
      rowHeight={36}
      containerHeight="100%"
      fitColumns={true}
      responsive={true}
      onApiReady={(next) => (api = next)}
    />
  </div>

  <footer class="text-sm shrink-0" style="color: var(--sg-muted);">
    Rows: {rows.length}
  </footer>
</section>

View this example on GitHub

More Getting Started examples

• Trading desk - live - 10,000 securities ticking on a 500 ms feed. Pinned Symbol + P&L, per-company logo marks, direction-coloured sparklines, sector chips, a KPI strip, and a notifications bell that flags standout movers. The hero.
• Shortcut config - Capabilities are off by default - opt into sort / filter / edit / group / paging with one boolean shortcut each. No `features` array, no fine-grained props. Toggle the switches to build the config live.
• Admin template - Self-contained admin app: sidebar + three pages (Dashboard, Orders w/ Enterprise export bar, Customers w/ inline edit). Read end-to-end in one file.
• 100k rows × 100 columns - Row + column virtualization. Chunked load with progress + cancellation.
• 1 million rows - A literal 1,000,000-row dataset with sort, filter, group, scroll, and inline edit all on. Chunked generation with progress.