API REFERENCE · DATA GRID PLUGINS

@dojo-ng/data-grid-edit

Inline cell editing for <dj-data-grid>.

Try it in the playground

@dojo-ng/data-grid-edit · v0.1.1 · A plugin for <dj-data-grid>, not a custom element

npm install @dojo-ng/data-grid-edit

F2/Enter on the active row or double-click starts editing; Enter/blur commits, Escape cancels. The grid never mutates your data — apply the commit yourself.

<dj-data-grid id="g"></dj-data-grid>
<script type="module">
  import "@dojo-ng/data-grid";
  import { editPlugin } from "@dojo-ng/data-grid-edit";
  const g = document.getElementById("g");
  g.columns = [
    { id: "name", header: "Name", editable: true },
    { id: "qty", header: "Qty", editable: { control: "number" } },
    { id: "status", header: "Status", editable: { control: "select", options: [
      { value: "active", label: "Active" }, { value: "retired", label: "Retired" },
    ] } },
  ];
  let rows = [{ name: "Widget", qty: 2, status: "active" }];
  g.data = rows;
  g.plugins = [editPlugin()];
  g.addEventListener("dj-cell-commit", (e) => {
    const { row, columnId, value } = e.detail;
    rows = rows.map((r) => (r === row ? { ...r, [columnId]: value } : r));
    g.data = rows; // controlled: you own the data
  });
</script>

{
  row: Row;
  columnId: string;
  value: unknown;
  oldValue: unknown;
}

function editPlugin(): DataGridPlugin;

type ColumnEditable = true | {
  control: "text" | "number" | "select";
  options?: {
    value: string;
    label: string;
  }[];
};