# Quick start

A realistic 25-row × 9-column grid with sort, filter, selection, inline editing, and column resize all enabled.

Uses `@svgrid/grid` (MIT). Category: Getting Started. Live demo: https://svgrid.com/demos/01-quick-start/

Install: `npm i @svgrid/grid` (Svelte 5).

## 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](https://svgrid.com/docs/getting-started/2-first-grid.md)
- [Cell data types](https://svgrid.com/docs/help/cells/cell-data-types.md)
- [Column definitions](https://svgrid.com/docs/help/columns/column-definitions.md)
- [Column headers - styling & height](https://svgrid.com/docs/help/columns/column-headers.md)
- [Row data](https://svgrid.com/docs/help/rows/row-data.md)

## Related articles

- [Evaluating SVAR Svelte DataGrid? What Changes if You Pick SvGrid](https://svgrid.com/blog/svar-svelte-datagrid-alternative/) - 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.
- [SvGrid Cheat Sheet - The One-Page Quick Reference](https://svgrid.com/blog/svgrid-cheat-sheet/) - Dense copy-paste reference for @svgrid/grid - install, column shapes, features, the imperative API, server-side data, custom cells, and theming tokens on one page.
- [Introducing SvGrid - A Native Svelte 5 Data Grid from jQWidgets](https://svgrid.com/blog/introducing-svgrid/) - SvGrid is a headless-first data grid built specifically for Svelte 5 runes. Here is what it does differently, why the architecture matters, and how to get started in under ten minutes.
- [Render Your First Svelte Data Grid in Under 5 Minutes](https://svgrid.com/blog/render-your-first-svelte-data-grid/) - How to add a fast, accessible, sortable data grid to a Svelte 5 app with SvGrid - covering data, typed columns, feature composition, and the imperative API.

## Source code (01-quick-start.svelte)

```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](https://github.com/sv-grid/sv-grid/blob/main/examples/src/demos/01-quick-start.svelte)