LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Cell Editing

Cell Editing

Configure LyteNyte Grid to modify and update data directly with single-cell editing.

To enable cell editing, set the editMode property on the grid. editMode accepts one of the following values:

  • "cell": Edit one cell at a time.
  • "row": Edit a row and commit changes per row.
  • "readonly": Disable cell editing (default).

Info

This guide focuses on single-cell editing. For row editing, see the Full Row Cell Editing guide.

Basic Cell Editing

Set editMode to "cell" to enable single-cell editing. To make a column editable, set these column definition properties:

  • editable: Boolean or predicate function that returns whether the cell is editable. Use a predicate to control editability per row.
  • editRenderer: Component to render in the cell while editing. The grid passes EditParams to this component to handle edits.

LyteNyte Grid treats row data as immutable. When a user edits a cell, the grid triggers the onRowDataChange callback. Use this prop to update your data source. This guide demonstrates cell editing using the client row source.

In the demo below, the Price and Customer columns are editable. To edit a value, double-click any cell in either column.

Basic Cell Editing

Fork code on stack blitzFork code on code sandbox

Note

The demo omits validation to focus on basic editing. For example, it allows negative prices. See the Cell Edit Validation guide for best practices.

The demo defines basic edit renderers for the Price and Customer columns. For custom renderers, see the Cell Edit Renderers guide.

The grid passes EditParams props to each edit renderer. This demo uses:

  • editValue: Current value being edited. It is initialized from the cell’s value and applied only when you commit the edit.
  • changeValue: Method that updates editValue during editing.

The Customer column edit renderer assigns editValue to the <input /> value, and the input’s onChange handler calls changeValue to update the edit value. The renderer also converts editValue to a string because the input element expects a string value, and editValue may not initially be a string.

function TextCellEditor({ changeValue, editValue }: Grid.T.EditParams<GridSpec>) {
  return (
    <input
      className="focus:outline-ln-primary-50 h-full w-full px-2"
      value={`${editValue}`}
      onChange={(e) => changeValue(e.target.value)}
    />
  );
}

Edit Click Activator

Use the editClickActivator property on the grid to change the click interaction that starts cell editing. The property accepts one of three values:

  • "single-click": Begins cell editing when the user clicks an editable cell.
  • "double-click": Begins cell editing when the user double-clicks an editable cell. This is the default.
  • "none": Clicking an editable cell does not start editing.

The demo below enables single-click editing on the Price and Customer columns. Click any cell in these columns to begin editing.

Single Click Edit

Fork code on stack blitzFork code on code sandbox

Edit Parameters

LyteNyte Grid provides each cell edit renderer with props conforming to the EditParams type. EditParams contains the state and methods required to manage cell updates. The following sections detail the most important properties of EditParams.

Edit Value and Data

To manage cell editing, distinguish between the editValue and editData properties on EditParams.

When a cell edit begins, LyteNyte Grid creates a copy of the edited row’s data and stores it in editData. The grid then uses the column’s field property to derive the editValue for the active cell. The pseudo-code below illustrates this process:

// Start with the column definition and row data for a given row
const column = { id: "customer", field: "customer" };
const row = { customer: "alice", ...otherProperties };


// When the grid begins editing, it creates a copy of the row data
const editData = structuredClone(row);


// The grid uses the column field to derive the editValue
const editValue = editData[column.field ?? column.id];

This pseudo-code does not reflect the exact implementation, but it illustrates the core relationship between editData and editValue.

Use the changeValue method to update editValue. This method is a convenience wrapper around changeData that applies updates to a single cell. In contrast, changeData updates the edit data for the entire row. The following two calls are equivalent:

editParams.changeValue("Alice Smith");
editParams.changeData({ ...editParams.editData, customer: "Alice Smith" });

Edit Setter

Use the editSetter property on a column to control how the grid updates editValue when changeValue is called.

By default, LyteNyte Grid uses the column’s field property to update the edit value for a cell. This behavior works only when field refers to a string or numeric property. When field is a function or a path, you must define an editSetter so the grid can apply updates correctly.

For example, the following column definition always title-cases the edited value:

const column = {
  id: "customer",
  editSetter: ({ editValue, editData }) => ({
    ...editData,
    customer: typeof editValue !== "string" ? "-" : titleCase(editValue),
  }),
};

The editSetter must always return the full editData object, not just the modified value. Use editSetter to enforce update constraints and to create linked cell updates. For more information, see the Linked Cell Edits guide.

Edit Mutate Commit

Use the editMutateCommit property on the column to write changes to the editData object before the grid completes the edit operation. The editMutateCommit property provides one final opportunity to adjust the row data before the grid fires edit events.

For example, the following definition parses the column’s value to ensure it is a number. The code mutates the editData object directly to change the final value of the edit.

The grid calls editMutateCommit once for each column whenever any column value is edited.

{
  id: "price",
  type: "number",
  editMutateCommit: (p) => {
    // You will want to validate with Zod.
    const data = p.editData as any;
    const value = String(data[p.column.id]);


    // Parse the commit value to a string.
    const numberValue = Number.parseFloat(value);
    if (Number.isNaN(numberValue)) data[p.column.id] = null;
    else data[p.column.id] = numberValue;
  },
}

Committing and Cancelling Edits

LyteNyte Grid does not mutate the original row data during an edit. To end an edit programmatically, EditParams provides two methods:

  • commit: Applies the new value via row update callbacks and ends the edit.
  • cancel: Discards the edited value and ends the edit.

Edit Events

LyteNyte Grid fires these events during the cell editing lifecycle. For the full list, see the grid props API reference.

  • onEditBegin: Fires when a cell edit begins. Call preventDefault on the event params to prevent the edit.
  • onEditEnd: Fires when editing ends and the grid is about to commit the edited value. Call preventDefault on the event params to prevent the commit.
  • onEditCancel: Fires when editing ends without applying the edited value.
  • onEditFail: Fires when validation fails during editing.

Programmatic Editing

LyteNyte Grid’s API exposes methods for programmatically editing cells. For complete details, see the grid API reference.

  • editBegin: Begins editing a specific cell.
  • editEnd: Ends the edit and commits the value. Pass cancel to cancel instead of commit.
  • editIsCellActive: Returns true if the specified cell is currently being edited.
  • editUpdate: Updates rows in bulk. See the Bulk Cell Editing guide for details.

Note

Use programmatic editing APIs only for advanced scenarios. For basic cell editing, use LyteNyte Grid’s built-in editing behavior.

Next Steps