Blank sheet - just type

About this example

An empty Excel-style sheet on a plain Svelte 5 SvGrid: column-letter headers, the grid's built-in row-number gutter, a name box and formula bar with a browsable function picker, gridlines, range selection and a fill handle. HyperFormula computes the display values, so typing a literal or a formula such as =SUM(B2:D2) or =IF(...) recalculates every dependent cell live; drag a row or column border to resize and right-click for Cut, Copy, Paste and Clear.

An empty workbook and nothing else:

<SvSheet />

With no workbook and no data it creates a single empty sheet, which is what "open a spreadsheet" means. Click a cell, type a number, type =SUM(A1:A5) and watch it resolve.

Worth trying, because none of it is wired up in this file:

Ctrl+Arrow run to the edge of a block, hopping gaps Ctrl+D / Ctrl+R fill down / right, translating references as they go Ctrl+; stamp today's date Alt+= AutoSum the run above Ctrl+B bold, and watch the ribbon button light up Ctrl+Shift+4 currency Ctrl+Z one press per action, not one per cell

Drag the fill handle on the active cell's corner to extend a series; drag a column border in the header to resize.

Everything typed, formatted, resized, hidden or frozen is the sheet's document: getState() returns it as JSON and setState() puts it back, and onChange says when something landed. In development the pair is on window.svSheet so the browser tests can save and restore.

Imports, features and API used

Imports: @svgrid/enterprise

Frequently asked questions

What does the grid provide and what does the demo add?

The grid supplies the row-number gutter with showRowNumbers, inline editing, cell-range selection with the fill handle, rowResize and header resize. The demo adds the letter columns, the name box, the formula bar with autocomplete and the HyperFormula engine.

How does the function picker work?

Typing = in the formula bar opens a list of functions filtered by prefix with their signature; choosing one inserts it, so a signature never has to be remembered.

Where does the value live?

The grid stores the raw text you typed. HyperFormula evaluates it and the cell shows the result, so editing a cell always shows the formula, not the number.

Related documentation

• Migrating from Handsontable
• Spreadsheet: getting started
• Spreadsheet formulas

Related articles

• A Fill Handle (Drag to Fill) in SvGrid - Build a working spreadsheet-style fill handle on top of SvGrid's cell selection and editing - pointer tracking, range highlighting, series fill, and undo/redo integration all covered.
• Pivot Tables in Svelte - Summarize Data Without a Spreadsheet - Run a cross-tab pivot directly inside your Svelte app using @svgrid/enterprise createPivotModel - no Excel, no server-side aggregation, no stale exports.
• Spreadsheet-Style Cell Range Selection in SvGrid - How to enable drag-to-select cell ranges, read live selection state, and build a status-bar footer that sums and averages the selected values.

Source code (207-blank-sheet.svelte)

<script lang="ts">
  /**
   * 207. Blank sheet - just type
   * -----------------------------
   * An empty workbook and nothing else:
   *
   *   <SvSheet />
   *
   * With no `workbook` and no `data` it creates a single empty sheet, which
   * is what "open a spreadsheet" means. Click a cell, type a number, type
   * =SUM(A1:A5) and watch it resolve.
   *
   * Worth trying, because none of it is wired up in this file:
   *
   *   Ctrl+Arrow      run to the edge of a block, hopping gaps
   *   Ctrl+D / Ctrl+R fill down / right, translating references as they go
   *   Ctrl+;          stamp today's date
   *   Alt+=           AutoSum the run above
   *   Ctrl+B          bold, and watch the ribbon button light up
   *   Ctrl+Shift+4    currency
   *   Ctrl+Z          one press per action, not one per cell
   *
   * Drag the fill handle on the active cell's corner to extend a series;
   * drag a column border in the header to resize.
   *
   * Everything typed, formatted, resized, hidden or frozen is the sheet's
   * document: `getState()` returns it as JSON and `setState()` puts it
   * back, and `onChange` says when something landed. In development the
   * pair is on `window.svSheet` so the browser tests can save and restore.
   */
  import { SvSheet } from '@svgrid/enterprise'

  let sheet = $state<SvSheet>()
  $effect(() => {
    const mounted = sheet
    if (!import.meta.env.DEV || !mounted) return
    ;(window as unknown as { svSheet?: unknown }).svSheet = {
      getState: () => mounted.getState(),
      setState: (state: Parameters<SvSheet['setState']>[0]) => mounted.setState(state),
      changes: [] as string[],
    }
  })
</script>

<SvSheet
  bind:this={sheet}
  height="100%"
  rows={60}
  columns={14}
  onChange={(reasons) => {
    if (!import.meta.env.DEV) return
    const handle = (window as unknown as { svSheet?: { changes: string[] } }).svSheet
    handle?.changes.push(...reasons.map((r) => r.kind))
  }}
/>

View this example on GitHub

More Spreadsheet examples

• Spreadsheet + Ribbon bar - The whole Excel surface as one component, <SvSheet workbook={wb} />: a six-tab ribbon (Home, Insert, Formulas, Data, Review, View), the Name Box and fx bar, sheet tabs and the Sum / Average / Count status bar. Format cells, merge them, comment on them, validate what goes in, colour them by rule, filter the region, protect the sheet; every button is the same call as its shortcut, so Ctrl+B and the Bold button cannot drift. A two-sheet P&L with the formats travelling in the document.
• Spreadsheet + formulas - Real formula engine inside the grid: cell refs (A1), ranges (A1:A10), SUM / AVG / IF / COUNTIF / ROUND, arithmetic, string concat, cycle detection.
• Excel keyboard shortcuts - The muscle memory a spreadsheet user arrives with: Ctrl+Arrow jumps to the edge of the data region (a run-boundary search, so it hops gaps rather than running to the end), Ctrl+Shift+Arrow extends there, Ctrl+A takes the current region then the sheet, Ctrl+Space / Shift+Space take the column or row, Ctrl+D / Ctrl+R fill, Ctrl+; stamps the date. One enableSheet() call. Ctrl+Z undoes a whole fill in one press, not one per cell.
• Formula bar + cell formats - The Excel cell experience: a formula bar showing the RAW text behind the active cell (the grid shows 1,234.50, the bar shows =B2*C2) with function autocomplete and signature hints, a Name Box that jumps to an address, and number formats that live on the CELL rather than the column. Ctrl+Shift+4 for currency, Ctrl+B to bold. The format store keys on row id, so sorting does not leave formatting behind on the old index.
• Paste Special, Find/Replace - The three Excel operations that write more than one cell: Paste Special (values / formulas / formats / transpose / arithmetic, with a text/html clipboard flavour so formats survive a round trip through Excel), Find and Replace that searches what you SEE but writes what you TYPED so a formula is not destroyed by replacing its result, and insert/delete that rewrites every formula - inserting above =SUM(B1:B4) widens it instead of dropping the new row.