AG Grid JavaScript: review an editable table without losing missing values

A reviewer needs to correct the hours in a planning table, but a blank cell must not become a confident zero. Give the hours column a numeric editor and keep missing values explicit. AG Grid's editing API can support a local review table; persistence is a separate part of your application.

The example has three fictional work packages. Survey has 4 hours, Draft has 6, and Review is unestimated. The visible result is “10 known hours; 1 estimate missing,” not a complete ten-hour plan. Editing Draft to 8 changes the known subtotal to 12 while the missing count stays at one.

Open the working example · Download the complete HTML

Create a grid with an editable field

The browser distribution exposes agGrid.createGrid. Supply row data, column definitions, and a container with a usable height. This small configuration identifies the editable column:

const options = {
  rowData: [
    {work: "Survey", hours: 4},
    {work: "Draft", hours: 6},
    {work: "Review", hours: null}
  ],
  columnDefs: [
    {field: "work", headerName: "Work package", flex: 2},
    {field: "hours", headerName: "Hours", flex: 1,
     editable: true, cellDataType: "number"}
  ]
};
const api = agGrid.createGrid(document.querySelector("#plan"), options);

For this review, the permitted input is an empty value or a finite, nonnegative number. Keep the previous value when the proposed input is negative or not numeric. Preserve empty input as null; converting it with Number("") would make it zero and change the meaning of the estimate.

Update the result after editing

Listen to cellValueChanged and recompute the known subtotal and missing count from the grid's row data. Sorting the table should not change those results. Keep the summary outside the scrollable grid so a reader can still see what the edits mean.

AG Grid's cell editing documentation describes editable columns and change events. Its Community and Enterprise comparison separates the available feature sets. The example uses the Community distribution and basic editing; it does not present Enterprise grouping or charting as an included feature.

Make local changes visibly local

Place “Edits stay in this preview” above the grid. This example has no server write or persistent storage. Reloading the file restores the three prepared rows. A changing subtotal is evidence that the browser accepted an edit, not that a project system saved it.

When the reader needs to propose a correction, ask them to name the work package and revised estimate through your normal review channel. If the real application needs saved edits, implement and test that storage path before adding a Save button.

For a read-only table with a status filter, plain HTML sort and filter is a smaller starting point. Choose AG Grid when you need its grid editing behavior rather than adding a framework just to display three rows.

Finish the estimate before calling it a plan

Try 8, an empty input, and a negative value in the Draft row. The intended outcomes are 12 known hours with one missing estimate; 4 known hours with two missing estimates; and a rejected invalid edit. Use the actual source record to resolve Review's missing estimate.

The HTML table can become a review reading copy in NOS. Keep the approved planning record in its original system, and carry confirmed corrections back there after the discussion.