Lattice Grid Buy a licence

demo D107

Cell comments

Threaded discussion on a cell, with an unresolved count

grid.comments

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    // Required, not advisory. Comments outlive the values they annotate, so index
    // identity would reattach every thread on the next sort, and the grid disables
    // the feature outright rather than fall back to it.
    rowKey: 'id',
    selection: 'multiple',
    columns: [
      { field: 'circuit', title: 'Circuit', layout: { width: 200, pin: 'start' } },
      { field: 'region', title: 'Region' },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' } },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, filter: { type: 'number' } },
    ],
    comments: {
      // Your comment store, which the grid does not own. Each method is async
      // because a real one is a fetch: wire these to your own back end. The grid
      // passes a cell key (row key joined with the field) to identify the thread.
      provider: {
        async loadIndex(rowIds, fields) {
          // Return a descriptor per commented cell in the requested rows:
          // { rowId, field, count, unresolved, updated }.
          return [];
        },
        async loadThread(cellKey) {
          // Return the comments on this cell, oldest first.
          return [];
        },
        async addComment(cellKey, body, parentId, context) {
          // Persist and return the new comment.
        },
        async editComment(commentId, body) {
          // Persist and return the edited comment.
        },
        async deleteComment(commentId) {
          // Remove the comment.
        },
        async resolveThread(cellKey) {
          // Mark the thread resolved.
        },
        async unresolveThread(cellKey) {
          // Reopen the thread.
        },
      },
      // Emphasis, code and links only, built as elements rather than parsed as markup.
      markdown: true,
      rowLabel: (row) => row?.data?.circuit ?? 'this row',
    },
    rows,  // an array of objects, one per circuit
  });
</script>

Threaded comments anchored to a cell, with an unresolved count

Cell comments attach a threaded discussion to a single cell rather than to a row or the grid as a whole, so a question about one value stays with that value as the sheet is sorted, filtered or scrolled. Reach for this in any JavaScript data grid that supports review workflows: a finance team querying a variance, an editor flagging a figure for a source, or a reviewer leaving a note for the next person to look at the sheet. Lattice Grid exposes the feature through grid.comments, which reads and writes threads keyed by cell address, so a host application can seed existing discussion on load, append a reply, or mark a thread resolved without the grid dictating how comments are stored or synced elsewhere.

Each commented cell carries an unresolved count rather than a single flag, so a cell with three open replies reads differently from one where the last word has been said. The indicator renders from the same virtualised cell layer as ordinary content, so marking thousands of cells across a large sheet costs no more per cell than any other cell state. Comment indicators carry an accessible label announcing the open count, so a screen reader user navigating by cell hears that a value has outstanding discussion without opening the thread.

How do you add comments to a cell in a data grid?

Use grid.comments to attach a thread to a cell address, then add replies or mark the thread resolved through the same interface. Lattice Grid tracks an unresolved count per cell and renders an indicator from the cell layer, so commented cells stay marked correctly through sorting, filtering and scrolling.

Related demos