Cell Editing

Enable and configure editable cells in LyteNyte Grid with custom editors, value parsing, and seamless integration with your data source.

LyteNyte Grid lets you edit cell values directly in the grid. Editing is configured per cell.

To enable editing:

Set editCellMode to "cell" in grid state. (Default is "readonly".)
Mark editable columns with editable: true.

Control how editing starts with editClickActivator. Supported values:

"single-click"
"double-click"
"none"

The example below shows a basic setup where columnBase: { editable: true } makes all columns editable.

Cell Edit Predicate

"use client";

import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";

type BankData = (typeof bankDataSmall)[number];
const columns: Column<BankData>[] = [
  { id: "age", width: 100, type: "number" },
  { id: "job", width: 160 },
  { id: "balance", width: 160, type: "number" },
  { id: "education", width: 160 },
  { id: "marital" },
];

export default function CellEditing() {
  const ds = useClientRowDataSource({
    data: bankDataSmall,
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,

    columnBase: {
      editable: true,
      widthFlex: 1,
    },

    editCellMode: "cell",
    editClickActivator: "single",
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport>
          <Grid.Header>
            {view.header.layout.map((row, i) => {
              return (
                <Grid.HeaderRow key={i} headerRowIndex={i}>
                  {row.map((c) => {
                    if (c.kind === "group") return null;

                    return (
                      <Grid.HeaderCell
                        key={c.id}
                        cell={c}
                        className="flex h-full w-full items-center px-2 capitalize"
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer>
            <Grid.RowsCenter>
              {view.rows.center.map((row) => {
                if (row.kind === "full-width") return null;

                return (
                  <Grid.Row row={row} key={row.id}>
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center px-2 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

Edit Renderer

Set the editRenderer property on a column to define its cell editor. This can be:

A React component.
A string key referencing a registered edit provider.

Cell Edit Renderers

"use client";

import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";

type BankData = (typeof bankDataSmall)[number];
const columns: Column<BankData>[] = [
  { id: "age", width: 100, type: "number" },
  { id: "job", width: 160 },
  { id: "balance", width: 160, type: "number" },
  { id: "education", width: 160 },
  {
    id: "marital",
    editable: true,
    editRenderer: (p) => {
      return (
        <select
          style={{ width: "100%", height: "100%", boxSizing: "border-box" }}
          value={p.value as string}
          onChange={(e) => p.onChange(e.target.value)}
        >
          <option>married</option>
          <option>divorced</option>
          <option>single</option>
        </select>
      );
    },
  },
];

export default function CellEditingProvider() {
  const ds = useClientRowDataSource({
    data: bankDataSmall,
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,

    columnBase: {
      widthFlex: 1,
      editable: true,

      editRenderer: ({ column, onChange, value }) => {
        const type =
          column.type === "datetime" || column.type === "date"
            ? "date"
            : column.type === "number"
              ? "number"
              : undefined;

        return (
          <input
            className="h-full w-full bg-black px-2 text-sm text-white dark:text-black"
            type={type}
            value={`${value}`}
            onChange={(ev) => {
              if (type === "number") onChange(Number.parseFloat(ev.target.value));
              else onChange(ev.target.value);
            }}
          />
        );
      },
    },

    editCellMode: "cell",
    editClickActivator: "single",
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport>
          <Grid.Header>
            {view.header.layout.map((row, i) => {
              return (
                <Grid.HeaderRow key={i} headerRowIndex={i}>
                  {row.map((c) => {
                    if (c.kind === "group") return null;

                    return (
                      <Grid.HeaderCell
                        key={c.id}
                        cell={c}
                        className="flex h-full w-full items-center px-2 capitalize"
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer>
            <Grid.RowsCenter>
              {view.rows.center.map((row) => {
                if (row.kind === "full-width") return null;

                return (
                  <Grid.Row row={row} key={row.id}>
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center px-2 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

When using a custom editor, LyteNyte Grid passes:

value - The current cell value.
onChange - A function to update the value.

Editing is controlled: Enter accepts changes, Escape cancels.

Selectively Enable Editing

editable can be:

Boolean - Enables editing for all cells in the column.
Function - Enables editing only for specific cells.

Example: In the Job column, only "management" values are editable.

Cell Editing Selectively

"use client";

import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";

type BankData = (typeof bankDataSmall)[number];
const columns: Column<BankData>[] = [
  { id: "age", width: 100, type: "number" },
  { id: "job", width: 160, editable: (p) => p.row.data?.job === "management" },
  { id: "balance", width: 160, type: "number" },
  { id: "education", width: 160 },
  { id: "marital" },
];

export default function CellEditingSelectively() {
  const ds = useClientRowDataSource({
    data: bankDataSmall,
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,

    columnBase: {
      editable: true,
      widthFlex: 1,
    },

    editCellMode: "cell",
    editClickActivator: "single",
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport>
          <Grid.Header>
            {view.header.layout.map((row, i) => {
              return (
                <Grid.HeaderRow key={i} headerRowIndex={i}>
                  {row.map((c) => {
                    if (c.kind === "group") return null;

                    return (
                      <Grid.HeaderCell
                        key={c.id}
                        cell={c}
                        className="flex h-full w-full items-center px-2 capitalize"
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer>
            <Grid.RowsCenter>
              {view.rows.center.map((row) => {
                if (row.kind === "full-width") return null;

                return (
                  <Grid.Row row={row} key={row.id}>
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center px-2 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

Edit Setter

Use editSetter to control how updated values are written to row data. This is useful when a cell's value comes from a derived or nested field. The field property determines the displayed value.

When editing:

The grid reads the initial value.
A copy of the row's data is created.
The updated value is applied via editSetter (or via field for string/number fields).

Cell Editing Edit Setter

"use client";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { stockData } from "@1771technologies/sample-data/stock-data-smaller";
import { useId } from "react";

type Stock = (typeof stockData)[number];

const columns: Column<Stock>[] = [
  { field: 0, width: 150, id: "ticker" },
  { field: 1, width: 150, id: "full", widthFlex: 1 },
  { field: 2, width: 150, id: "analyst-rating" },
  {
    width: 150,
    field: ({ data }) => {
      if (data.kind === "branch" || !data.data) return null;

      const value = data.data[3] as number;
      return value;
    },
    cellRenderer: (p) => {
      const field = p.grid.api.columnField(p.column, p.row);

      return (
        <div className="flex h-full w-full items-center justify-end px-2 tabular-nums">
          {`${field}`} USD
        </div>
      );
    },
    id: "price",
  },
  {
    width: 150,
    field: ({ data }) => {
      if (data.kind === "branch" || !data.data) return null;

      const value = data.data[3] as number;
      return Math.round(value * 1.28);
    },
    cellRenderer: (p) => {
      const field = p.grid.api.columnField(p.column, p.row) as number;

      return (
        <div className="flex h-full w-full items-center justify-end px-2 tabular-nums">
          {`${field.toFixed(2)}`} GBP
        </div>
      );
    },
    editSetter: ({ data, value }) => {
      const usdValue = Math.round(value / 1.28);

      data[3] = usdValue;
      return data;
    },

    id: "Price (GBP @ 1.28)",
  },
];

export default function CellEditingEditSetter() {
  const ds = useClientRowDataSource({ data: stockData });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    editCellMode: "cell",

    columnBase: {
      editable: true,
      widthFlex: 1,
    },
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport>
          <Grid.Header>
            {view.header.layout.map((row, i) => {
              return (
                <Grid.HeaderRow key={i} headerRowIndex={i}>
                  {row.map((c) => {
                    if (c.kind === "group") return null;

                    return (
                      <Grid.HeaderCell
                        key={c.id}
                        cell={c}
                        className="flex h-full w-full items-center px-2 capitalize"
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer>
            <Grid.RowsCenter>
              {view.rows.center.map((row) => {
                if (row.kind === "full-width") return null;

                return (
                  <Grid.Row row={row} key={row.id}>
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center overflow-hidden text-ellipsis text-nowrap px-2 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

Row Edit Validation

Edits are applied at the row level-updating one cell updates the row's entire data object.

If defined, editRowValidatorFn runs before updates are applied. It can:

Return true - Validation passes.
Return false - Validation fails.
Return an object - Validation fails; object contains error details.

If validation fails, the editError event is fired. Use this event to inform the user.

Example: Prevent negative values in the Age column.

Cell Editing Validation

"use client";

import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId, useState } from "react";

type BankData = (typeof bankDataSmall)[number];
const columns: Column<BankData>[] = [
  { id: "age", width: 100, type: "number" },
  { id: "job", width: 160 },
  { id: "balance", width: 160, type: "number" },
  { id: "education", width: 160 },
  { id: "marital" },
];

export default function CellEditingValidation() {
  const ds = useClientRowDataSource({
    data: bankDataSmall,
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,

    columnBase: {
      editable: true,
      widthFlex: 1,
    },

    editRowValidatorFn: (p) => {
      const data = p.data;
      if (data.age < 0) return { reason: "Age cannot be less than 0." };

      return true;
    },

    editCellMode: "cell",
    editClickActivator: "single",
  });

  const view = grid.view.useValue();

  const [error, setError] = useState<string>();

  return (
    <div>
      {error && <div className="px-2 py-1 text-red-500">Error: {error}</div>}
      <div className="lng-grid" style={{ height: 500 }}>
        <Grid.Root
          grid={grid}
          onEditError={(e) => {
            if (typeof e.validation === "object") setError(e.validation.reason);
          }}
          onEditEnd={() => {
            setError("");
          }}
        >
          <Grid.Viewport>
            <Grid.Header>
              {view.header.layout.map((row, i) => {
                return (
                  <Grid.HeaderRow key={i} headerRowIndex={i}>
                    {row.map((c) => {
                      if (c.kind === "group") return null;

                      return (
                        <Grid.HeaderCell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center px-2 capitalize"
                        />
                      );
                    })}
                  </Grid.HeaderRow>
                );
              })}
            </Grid.Header>
            <Grid.RowsContainer>
              <Grid.RowsCenter>
                {view.rows.center.map((row) => {
                  if (row.kind === "full-width") return null;

                  return (
                    <Grid.Row row={row} key={row.id}>
                      {row.cells.map((c) => {
                        return (
                          <Grid.Cell
                            key={c.id}
                            cell={c}
                            className="flex h-full w-full items-center px-2 text-sm"
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );
}

Programmatic Edit Update

Use grid.api.editUpdate to update a cell without user interaction. This method:

Applies the column's editSetter.
Runs row validation.
Updates the data if validation passes.

Cell Edit Events

LyteNyte Grid emits these events during editing:

editBegin - Fired before editing starts; call preventDefault() to block it.
editEnd - Fired after updates are applied.
editError - Fired when validation fails or an error occurs.
editCancel - Fired when editing is cancelled (e.g., pressing Escape).

Cell EditingCopy Page