Svelte Editable Table
Editing is opt-in per column, which is the safe default: turn on enableInlineEditing and a column with no editorType stays read-only. Give a column an editorType and it gets the right editor, whether that is a text box, a number field, a checkbox, a date picker or a dropdown backed by your own options.
Commits come back to you as events rather than mutations. onCellValueChange hands you the row, the column, the old value and the new one, so validation, optimistic updates and a save button are all decisions you make.
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, type ColumnDef } from '@svgrid/grid'
const features = tableFeatures({})
const columns: ColumnDef<typeof features, Person>[] = [
{ field: 'firstName', header: 'First', editorType: 'text' },
{ field: 'age', header: 'Age', editorType: 'number' },
{ field: 'joinedAt', header: 'Joined', editorType: 'date' },
{ field: 'active', header: 'Active', editorType: 'checkbox' },
]
</script>
<SvGrid
{data}
{columns}
{features}
enableInlineEditing={true}
onCellValueChange={(e) => save(e.row, e.columnId, e.newValue)}
/>What you get
- Typed editors - Text, number, checkbox, date, date-time and list editors ship with the grid, each with the keyboard behaviour you expect.
- Validation while editing - A validate hook per column marks a cell invalid with a reason as you type, and can block the commit until it is fixed.
- Full-row editing - Edit every cell in a row at once and commit or cancel as a unit, which is what forms-in-a-grid usually want.
- Fill handle and paste - Drag the corner of a selection to fill it, or paste a rectangle from Excel and have the values typed as they land.
- Undo and redo - Ctrl+Z and Ctrl+Y across edits, fills and pastes, so a mistake in a bulk change is one keystroke away from being gone.
- Free and MIT - Every editor, validation and undo are in @svgrid/grid. Only staged batch editing is part of the commercial package.
Live examples
- Inline editing - Typed editors (text/number/checkbox/date) with dirty tracking + save.
- Editor types + custom slot - Built-in select / rich-select / textarea editors plus a custom `cellEditor` snippet (a range slider) for cases the built-ins do not cover.
- Full-row editing - The `fullRowEditing` prop puts the WHOLE row into edit at once - every editable cell (text, select, number, date, checkbox) shows an inline editor. Enter or click-away commits all cells in one update; Esc cancels the row.
- Validation while editing - Per-column rules: invalid commits get rolled back via setCellValue + logged to a recent-rejections panel.
- Excel-style fill handle - Walks through every fill pattern the engine detects: numeric series, date series, weekday sequence, reverse-fill, horizontal fill, copy-mode.
- Undo / redo (Ctrl+Z) - `api.undo()` / `api.redo()` + Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z. 200-step bounded history; clearHistory after a successful save resets the baseline.
Documentation
- Editing - overview - Inline editing is a single prop on <SvGrid>. Try it - double-click any cell, type to replace, hit Enter to commit. Tab moves to the next editable cell:
- Provided cell editors - The grid ships nine built-in editors, selected via editorType on the column definition. Each editor renders inside the cell while editing and falls back to…
- Validation - There is no validate(value) callback on ColumnDef today. Validation happens by intercepting committed edits and either accepting or reverting them.
Related articles
- Inline Editing with Validation in SvGrid - How to wire up typed cell editors, reject bad input before it reaches your data, and keep per-cell error state without a form library.
- Inside SvGrid: The Inline Editing Engine - How SvGrid handles inline cell editing - typed editors, an event-based commit model, undo/redo, and why the grid never touches your data directly.
- An Editable Select / Dropdown Cell in SvGrid - Build a dropdown cell editor in SvGrid using a Svelte 5 snippet - constrain user input to a fixed option set while keeping sort, filter, and undo working on the underlying value.
Frequently asked questions
How do I make a Svelte table editable?
Set enableInlineEditing on <SvGrid> and give each editable column an editorType. Columns without an editorType stay read-only even when editing is enabled.
How do I save an edit?
Handle onCellValueChange, which reports the row, the column id, the old value and the new one. Persist it however you like; the grid does not write to your data itself.
Can I use a dropdown in a cell?
Yes. Use editorType 'list' with editorOptions, which accepts plain values or objects with a label and a colour for a chip-style editor.
Is inline editing free?
Yes. Editing, the provided editors, validation, the fill handle and undo are all MIT-licensed in @svgrid/grid.