Inline Editing

Library setup

Enable editable columns, provide a stable rowKey, and respond to edits with onCellSave.

<link rel="stylesheet" href="../src/data-table.css" />

<script type="module">
  import { DogTable } from "../src/data-table.js";

  const table = new DogTable("#app", {
    data,
    rowKey: "id",
    columns: [
      { label: "ID", accessor: "id" },
      { label: "Name", accessor: "name", editable: true },
      { label: "Age", accessor: "age", editable: true },
      { label: "Status", accessor: "status" },
    ],
    onCellSave: async (id, field, value) => {
      console.log("saved", id, field, value);
    },
  });

  table.init();
</script>