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 Edit Renderers

To enable cell editing, provide an edit renderer for each editable column. This guide covers edit renderers for basic data types.

Text Editors

A text edit renderer uses a <input /> element. In the demo below, double-click a cell in the Customer column to begin text editing.

Text Edit Renderer

Fork code on stack blitzFork code on code sandbox

The text editor in the demo uses the controlled pattern to manage the input value. Since the editor edits text, it does not require custom parsing. The code below updates the value directly:

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)}
    />
  );
}

Number Editors

Number edit renderers can use an input with type number, but text inputs with custom number parsing offers better control over the input experience. The demo below uses Ark UI’s number input, which enforces numeric-only values, with improved number input editing.

Number Edit Renderer

Fork code on stack blitzFork code on code sandbox

Date Editors

Editing requirements for dates vary from simple selections to complex ranges and timezone adjustments. For simple edits, the native browser’s date input is an efficient choice. Double-click a cell in the Purchase Date column to start editing.

Date Edit Renderer

Fork code on stack blitzFork code on code sandbox

The date edit renderer uses a native date input as an uncontrolled component instead of a controlled one.

Controlling browser date inputs with React state can cause invalid states during manual keyboard entry. To avoid this, keep the date input uncontrolled and track changes. The browser enforces date validity, and the edit state reflects the latest value.

function DateCellEditor({ changeValue, editValue }: Grid.T.EditParams<GridSpec>) {
  const formatted = typeof editValue === "string" && editValue ? format(editValue, "yyyy-MM-dd") : "";
  return (
    <input
      className="focus:outline-ln-primary-50 h-full w-full px-2"
      defaultValue={formatted}
      type="date"
      onChange={(e) => {
        const next = new Date(e.target.value);
        try {
          changeValue(format(next, "yyyy-MM-dd"));
        } catch {
          return;
        }
      }}
    />
  );
}

Popover Editors

For columns with a fixed set of values, a dropdown list is a common editing pattern. While the native select element is the simplest option, it has several limitations:

  • Programmatic Control: You can’t force the select menu to open when editing begins; users must press Space or Enter.
  • Limited Styling: option elements support minimal CSS customization, which makes consistent styling harder.
  • Poor Scalability: select element works best with a small set of options and becomes impractical for large lists of values.

To see the native select element in action, double-click any cell in the Product column below to begin editing.

Native Select Popover

Fork code on stack blitzFork code on code sandbox

Given the drawbacks of the select element, a better alternative is to use a combobox or custom select component.

The demo below demonstrates this using LyteNyte Grid’s Smart Select component. Double-click any cell in the Product column below to begin editing.

Smart Select Popover

Fork code on stack blitzFork code on code sandbox

Note

LyteNyte Grid’s Smart Select component is only available to Tag indicating the feature is only available for LyteNyte PRO users. However, you can use another open-source combobox component. Below are some good options:

Popover Editor Considerations

When you create a custom popover, consider these points:

  • Enter: LyteNyte Grid commits edits on Enter. Many comboboxes use Enter to open the completion menu. Decide which action Enter triggers while editing.
  • ArrowDown: LyteNyte Grid moves focus to the next cell on ArrowDown. Many select components use ArrowDown to open options. Decide which action ArrowDown triggers while editing.
  • Clipping: Grid cells clip content that exceeds their bounds. To prevent your popover from being clipped, use a React Portal to render it into the body element.
  • Input Triggers: By default, editing starts when a user presses a printable character. If this isn’t ideal for your selection component, set editOnPrintable to false on the column.

Next Steps