Sparklines

by stitot

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>

<div id="container"></div>
<button id="addRow">Add row</button>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");

JavaScript

const data = {
  ID: [1, 2, 3],
  Name: ["Alice", "Bob", "Charlie"],
  Trend: ["1,2,3", "3,2,1", "2,2,2"]
}


const myGrid = Grid.grid("container", {
  dataTable: {
    columns: data,
  },
  columnDefaults: {
    cells: {
      editMode: {
        enabled: true
      }
    },
  },
  columns: [
    {
      id: "Trend",
      cells: {
        renderer: {
          type: "sparkline"
        },
        events: {
          /* 
          Steps to reproduce:
          1. Click "Add row"
          2. Edit Trend in new row (insert e.g. 1,2,3)
          3. Observe that sparkline is not rendered

          The event below is needed for sparklines in new rows to render, and
          it shouldn't need to be there
          */
          // afterEdit: () => myGrid.update()
        }
      }
    }
  ]
});

function getNextId() {
  const ids = myGrid.dataTable.getColumn("ID");
  const nextId = Math.max(...ids) + 1;
  return nextId;
}

function addRow() {
  const nextId = getNextId();
  myGrid.dataTable.setRow({ID: nextId});
  myGrid.viewport.updateRows();
}

document
  .getElementById("addRow")
  ?.addEventListener("click", addRow);