Editing

<script lang="ts">
  import { DataGrid, type ColumnDef } from '@sv5ui/datagrid';

  // editable marks a column; the editor defaults to 'text'
  const columns: ColumnDef<Person>[] = [
    { id: 'name', header: 'Name', editable: true, flex: 1 },
    { id: 'salary', header: 'Salary', editable: true, editor: 'number',
      align: 'right', width: 150, type: 'currency' },
    { id: 'team', header: 'Team (read only)', width: 130 }
  ];
</script>

<!-- The shorthand registers the feature; editing={{ ... }} configures it -->
<DataGrid data={people} {columns} {getRowId} editing />

// Enter commits and moves down. On the last row of a page it commits and
// stays: turning the page would take the row just edited off the screen.
const grid = createDataGrid<Person>({
  data: people,
  columns,
  getRowId,
  features: [editing(), pagination({ pageSize: 3 })]
});

// Arrow keys are unaffected, being a request to go somewhere rather than
// the tail of one to write something: ArrowDown from the last row of a
// page turns it, and the focused cell is what the page follows.

// Under rowModel: 'server' the grid holds one page and the rows behind the
// boundary are not there at all, so nothing is clamped: the same commit
// simply has nowhere to move to.

<script lang="ts">
  import { createDataGrid, DataGrid, editing, getEditing } from '@sv5ui/datagrid';

  // 'cell' is the default: one cell at a time. 'row' opens every editable
  // cell of a row together and commits them as one transaction, and it is
  // what a double-click, Enter and F2 open under that mode.
  const grid = createDataGrid<Person>({
    data: people,
    columns,
    getRowId,
    features: [editing({ mode: 'row' })]
  });

  // Which row is open, or null
  let rowEditId = $derived(getEditing(grid)?.rowEditId ?? null);
</script>

<Button label="Edit first row" onclick={() => getEditing(grid)?.startRowEdit('1')} />
<Button label="Commit" onclick={() => getEditing(grid)?.commitRow()} />
<Button label="Cancel" onclick={() => getEditing(grid)?.cancelRow()} />

<DataGrid {grid} />

// A string names the editor; an object adds its options.
const columns: ColumnDef<Row>[] = [
  { id: 'name', editable: true },                          // 'text' by default
  { id: 'salary', editable: true, editor: 'number' },
  { id: 'active', editable: true, editor: 'checkbox' },
  { id: 'joinedAt', editable: true, editor: 'date' },
  { id: 'shift', editable: true, editor: 'time' },
  { id: 'rating', editable: true, editor: 'rating' },
  { id: 'skills', editable: true, editor: 'tags' },        // writes a string[]
  { id: 'notes', editable: true, editor: 'textarea' },

  // select and selectMenu take their list from the definition
  {
    id: 'team',
    editable: true,
    editor: {
      type: 'select',
      options: [
        { label: 'Core', value: 'Core' },
        { label: 'Platform', value: 'Platform' }
      ]
    }
  },
  { id: 'country', editable: true, editor: { type: 'selectMenu', options: countries } }
];

import * as v from 'valibot';
import { z } from 'zod';

const columns: ColumnDef<Person>[] = [
  // schema takes any standard-schema library: zod, valibot, yup, joi
  {
    id: 'name',
    editable: true,
    schema: z.string().min(3, 'At least 3 characters')
  },
  {
    id: 'email',
    editable: true,
    schema: v.pipe(v.string(), v.email('Not an email address'))
  },

  // validate is the hand-written alternative: a message, or null when valid
  {
    id: 'salary',
    editable: true,
    editor: 'number',
    validate: (value) =>
      typeof value === 'number' && value >= 40000 ? null : 'Must be at least 40,000'
  },

  // parse runs first and settles the shape the row will store
  {
    id: 'team',
    editable: true,
    parse: (input) => String(input ?? '').trim().toUpperCase(),
    validate: (value) => (String(value).length > 0 ? null : 'Required')
  }
];

// An invalid commit is blocked: the editor stays open, the message hangs
// under the cell, and the live region announces it. validate wins over
// schema when a column declares both.

// editable takes a predicate as well as a flag. It is asked per cell, with
// the row, the pipeline node and the resolved value.
{
  id: 'salary',
  header: 'Salary (active rows only)',
  editable: ({ row }) => row.status === 'active',
  editor: 'number'
}

// The full context:
//   { row: TRow, node: RowNode<TRow>, value: unknown }
//
// A cell it refuses does not open on double-click, Enter or F2, and a row
// edit skips it: startRowEdit only drafts the cells the predicate allows.

<script lang="ts">
  import { createDataGrid, DataGrid, editing, getEditing } from '@sv5ui/datagrid';

  const grid = createDataGrid<Person>({
    data: people,
    columns,
    getRowId,
    features: [editing()]
  });

  let history = $derived(getEditing(grid));

  // Every write reports itself, undo and redo included, so a consumer
  // syncing to a server sees a reverted change as an edit of its own.
  grid.events.on('cellEdited', ({ rowId, columnId, oldValue, newValue }) => {
    log(`row ${rowId} . ${columnId}: ${oldValue} -> ${newValue}`);
  });

  // Many rows in one transaction: one undo takes all of them back. Every
  // cell goes through the column's parse and validation, and one invalid
  // cell rejects the whole batch rather than writing part of it.
  function raiseLowSalaries() {
    const edits = grid.data
      .filter((person) => person.salary < 100000)
      .map((person) => ({
        rowId: getRowId(person),
        changes: { salary: Math.round(person.salary * 1.1) }
      }));
    getEditing(grid)?.applyEdits(edits);
  }
</script>

<Button label="Undo" disabled={!history?.canUndo} onclick={() => history?.undo()} />
<Button label="Redo" disabled={!history?.canRedo} onclick={() => history?.redo()} />
<Button label="Raise every salary under 100k by 10%" onclick={raiseLowSalaries} />

<DataGrid {grid} />

<!-- Ctrl+Z undoes and Ctrl+Shift+Z or Ctrl+Y redoes, from anywhere in the
     grid, without a button of your own. -->

// Tab-separated rows, the shape a spreadsheet puts on the clipboard.
const tsv = 'Ada Lovelace\tEngineer\tEngland\nAlan Turing\tAnalyst\tEngland';

// Spreads from the focused cell, right and down. Cells landing on a
// non-editable column or past the last row are dropped rather than
// shifting the rest.
getEditing(grid)?.pasteText(tsv);

// Ctrl+V on a focused cell does the same with the real clipboard.
// It goes through applyEdits, so the whole paste is one transaction,
// one undo, and every cell is parsed and validated on the way in.

<script lang="ts">
  import { DataGrid, type EditorContext } from '@sv5ui/datagrid';
</script>

<!-- The snippet owns the control; the context owns the flow. -->
{#snippet teamEditor({ value, setValue, commit, cancel }: EditorContext<Person>)}
  {#each ['Core', 'Platform', 'Design'] as team (team)}
    <Button
      label={team}
      variant={value === team ? 'solid' : 'outline'}
      onclick={() => { setValue(team); commit(); }}
    />
  {/each}
  <Button icon="lucide:x" label="Cancel" onclick={cancel} />
{/snippet}

<DataGrid
  data={people}
  {getRowId}
  editing
  columns={[
    { id: 'name', header: 'Name', flex: 1 },
    {
      id: 'team',
      header: 'Team',
      editable: true,
      // type still names the family the grid falls back to; editor
      // replaces what is rendered.
      editor: { type: 'text', editor: teamEditor }
    }
  ]}
/>

<!-- The context: value, row, node, setValue, commit, cancel, error.
     setValue updates the draft, commit validates and writes it, cancel
     discards. Escape still closes the editor, since that binding lives on
     the grid rather than inside the editor. -->