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.

A live, editable Svelte 5 data grid example from the SvGrid gallery (Editing). See the SvGrid documentation for the full API.

About this example

Full-row editing in the Svelte 5 data grid: the fullRowEditing prop puts every editable cell of a row into edit at once, with a text, select, number, date or checkbox editor per column. Enter or clicking away commits all cells in one update and Escape cancels the whole row, giving a form-style entry experience at grid density in under a hundred lines.

fullRowEditing puts the WHOLE row into edit at once - every editable cell shows an inline editor. Enter (or clicking away) commits all cells in one update; Esc cancels the whole row. A form-style entry experience with the density of a grid.

Imports, features and API used

Imports: @svgrid/grid

Table features registered: rowSortingFeature

Columns: name (Name), role (Role), department (Department), salary (Salary), startDate (Start date), active (Active)

Frequently asked questions

How do I switch from cell editing to row editing?

Keep enableInlineEditing on and add fullRowEditing. Double-click or F2 then opens editors in every editable cell of that row instead of one cell.

When are the values written?

All at once when the row commits, on Enter or when focus leaves the row. Escape discards every change in the row. The full-row editor covers the text, number, date, datetime, checkbox and list editor types.

Can some columns stay read-only in row mode?

Yes. Columns with editable: false or no editorType show their value as text while the rest of the row is in edit.

Source code (177-full-row-editing.svelte)

<!-- Documented in: docs/help/editing/full-row.md -->
<script lang="ts">
  /**
   * 177. Full-row editing
   * ---------------------
   * `fullRowEditing` puts the WHOLE row into edit at once - every editable
   * cell shows an inline editor. Enter (or clicking away) commits all cells in
   * one update; Esc cancels the whole row. A form-style entry experience with
   * the density of a grid.
   */
  import {
    SvGrid,
    tableFeatures,
    rowSortingFeature,
    type GridColumns,
  } from '@svgrid/grid'

  type Employee = {
    name: string
    role: string
    department: string
    salary: number
    startDate: string
    active: boolean
  }

  let rows = $state<Employee[]>([
    { name: 'Ada Lovelace', role: 'Staff Engineer', department: 'Engineering', salary: 172000, startDate: '2021-03-01', active: true },
    { name: 'Linus Torvalds', role: 'Architect', department: 'Engineering', salary: 198000, startDate: '2019-07-15', active: true },
    { name: 'Grace Hopper', role: 'VP Product', department: 'Product', salary: 210000, startDate: '2018-01-10', active: true },
    { name: 'Tim Berners-Lee', role: 'Designer', department: 'Design', salary: 148000, startDate: '2022-09-05', active: false },
    { name: 'Margaret Hamilton', role: 'Director', department: 'Operations', salary: 205000, startDate: '2017-04-22', active: true },
  ])

  const features = tableFeatures({ rowSortingFeature })

  const columns: GridColumns<Employee> = [
    { field: 'name', header: 'Name', editorType: 'text', width: 180 },
    { field: 'role', header: 'Role', editorType: 'text', width: 160 },
    {
      field: 'department',
      header: 'Department',
      editorType: 'select',
      width: 150,
      editorOptions: ['Engineering', 'Product', 'Design', 'Operations', 'Sales'],
    },
    {
      field: 'salary',
      header: 'Salary',
      editorType: 'number',
      width: 140,
      align: 'right',
      format: { type: 'currency', currency: 'USD', options: { maximumFractionDigits: 0 } },
    },
    { field: 'startDate', header: 'Start date', editorType: 'date', width: 150, format: { type: 'date', pattern: 'y-m-d' } },
    { field: 'active', header: 'Active', editorType: 'checkbox', width: 90, align: 'center' },
  ]
</script>

<section class="flex flex-col flex-1 min-h-0 gap-3">
  <p class="text-sm shrink-0" style="color: var(--sg-fg);">
    <strong>Double-click any row</strong> - every editable cell turns into an
    inline editor at once (text, select, number, date, checkbox).
    Press <kbd>Enter</kbd> or click away to commit the whole row in one update;
    press <kbd>Esc</kbd> to cancel. This is the <code>fullRowEditing</code> prop.
  </p>

  <div class="flex-1 min-h-0">
    <SvGrid responsive={true}
      columnResize
      data={rows}
      columns={columns}
      features={features}
      showRowNumbers={true}
      enableInlineEditing={true}
      fullRowEditing={true}
      rowHeight={40}
      containerHeight="100%"
      fitColumns={true}
    />
  </div>
</section>

View this example on GitHub

More Editing 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.
List + chips editors - Two built-in editors with single & multi-select: dropdown (list) and removable tokens (chips), with options or free-form.
Async editor options - editorOptions can return a Promise - for the whole column, or per row for a cascade. The dropdown shows Loading… while the request is in flight, results are cached (per column, or per column+row) so reopening never refetches, and api.refreshEditorOptions() invalidates when the server list changes.
Custom cell editors - Three hand-rolled editors: native colour picker bound to a tag swatch, 5-star rating, emoji feedback mood. All write back through api.setCellValue.