Svelte Spreadsheet
The difference between a data grid and a spreadsheet is mostly interaction: cell-range selection instead of row selection, a fill handle, column-letter headers, a formula bar and paste that understands a rectangle of TSV. SvGrid ships all of that in the free package, so a sheet is a configuration of the grid rather than a separate component.
Formulas are the one piece that needs an engine. createHyperFormulaSheet binds the grid to HyperFormula so a cell can hold =SUM(B2:D2) and every dependent cell recalculates as you type, with cycle detection included.
Install
npm i @svgrid/gridFree and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.
The code
<script lang="ts">
import { SvGrid, tableFeatures } from '@svgrid/grid'
const features = tableFeatures({})
</script>
<SvGrid
{data}
{columns}
{features}
selectionMode="cell"
enableCellSelection={true}
showRowNumbers={true}
rowNumberWidth={48}
/>What you get
- Cell ranges and the fill handle - Select a rectangle, drag the corner to fill, and copy or paste TSV straight into and out of Excel and Google Sheets.
- A real formula engine - A1 references, A1:A10 ranges, SUM, AVG, IF, COUNTIF and ROUND, with live recalculation of every dependent cell and cycle detection.
- Freeze panes - Pin the first columns while a year of months scrolls sideways. It is the initialColumnPinning prop, not a separate sheet mode.
- Data validation - List-constrained columns with a dropdown, numeric bounds, and a declarative validate() hook that lights invalid cells red with the reason.
- Merged cells and borders - Merge a run of cells for a section header and draw real cell borders, so a sheet can carry the layout a report needs.
- Free and MIT - All of the above is in @svgrid/grid. Only Excel export and import need the commercial package.
Live examples
- Blank sheet - just type - An empty Excel-style sheet on a plain <SvGrid>: column-letter headers (A..Z), a built-in 1..N row gutter, a name box + formula bar with a browsable function picker, gridlines, range selection and a fill handle. A real HyperFormula engine underneath: type a literal or a formula like =SUM(B2:D2) / =IF(...) and every dependent cell recalculates live. Drag a row or column border to resize; right-click for Cut / Copy / Paste / Clear.
- Spreadsheet + formulas - Real formula engine inside the grid: cell refs (A1), ranges (A1:A10), SUM / AVG / IF / COUNTIF / ROUND, arithmetic, string concat, cycle detection.
- Spreadsheet + Ribbon bar - Excel-style Ribbon UI driving the grid via SvGridApi: cell formatting (bold, color, number format), insert/delete row, sort, live SUM/AVG/COUNT.
- Freeze panes - The Excel Freeze Panes corner on a plain <SvGrid>: the Account and Owner columns stay pinned while you scroll across a full year of months, and the sticky column-letter + row-number headers stay put as you scroll down. HyperFormula keeps each row total (column O) and the bottom Total row live as you edit any month. Pinning those two columns is one prop: initialColumnPinning.
- Cell merging (spreadsheet shell) - A real invoice rendered on an Excel-style shell: A / B / C / D / E column letters across the top, row numbers down the left. Brand band, bill-from / bill-to address blocks, meta block, line items, totals, notes, signatures - all assembled from MergeSpec + CellBorderSpec. Editable Qty / Rate / addresses / notes; totals recompute live.
- HyperFormula integration - Full HyperFormula engine wired into the grid as a peer-optional dep. Editable spreadsheet with A1-style cell refs, dozens of formulas across math (SUM / SUMIF), lookup (VLOOKUP / INDEX-MATCH), text (CONCAT / UPPER), date (TODAY / DATEDIF), logical (IF nests), financial (PMT / IRR / NPV), statistical (AVERAGE / MAX / RANK).
Documentation
- Spreadsheet formulas - A minimal Excel-style formula engine that runs in the browser, with no dependencies. Cells can hold either a literal value (number, string, boolean) or a…
- Expressions - SvGrid does not ship a formula / expression language for cells. Computed values are JavaScript - either via fieldFn or inside a cell callback.
- Column pinning - Pinning sticks a column to the left or right edge of the viewport so it does not scroll horizontally with the rest.
Related articles
- 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.
- Paste from Excel into a Svelte Data Grid - How to wire up clipboard paste so users can drop a copied Excel or Google Sheets block directly into SvGrid - TSV parsing, type coercion, validation, and row growth all covered.
- 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.
Frequently asked questions
Can SvGrid work as a spreadsheet?
Yes. Set selectionMode to cell, enable cell selection and row numbers and you have range selection, a fill handle and clipboard round-trips. Add createHyperFormulaSheet for real formulas.
Which formulas are supported?
Formulas come from HyperFormula, so the usual sheet functions work: SUM, AVG, IF, COUNTIF, ROUND, arithmetic and string concatenation, with A1 refs and A1:A10 ranges.
Is the spreadsheet behaviour free?
Yes. Cell ranges, the fill handle, clipboard, freeze panes, validation and merging are all MIT-licensed in @svgrid/grid. Excel export and import are the paid parts.
Can I paste from Excel?
Yes. The clipboard round-trips TSV, so copying a block from Excel and pasting it into the grid keeps the rectangle and types the values as it lands.