setRow() failure

by stitot

HTML

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

<div id="container"></div>
<button id="addRowToTop">Add row to top</button>
<button id="addRowToBottom">Add row to bottom</button>

CSS

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

JavaScript

const data = {
  ID: [1, 2, 3, 4, 5, 6],
  Name: ["Alice", "Bob", "Charlie", "David", "Eve", "John"],
  Age: [28, 51, 40, 60, 53, 39],
  Department: ["HR", "Engineering", "Sales", "Marketing", "Finance", "Finance"],
  Salary: [50000, 75000, 55000, 85000, 65000, 83000],
  PerformanceScore: [85, 49, 95, 40, 88, 73],
}


const myGrid = Grid.grid("container", {
  dataTable: {
    columns: data,
  },
  columnDefaults: {
    cells: {
      editMode: {
        enabled: true
      }
    },
    
  }
});

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


function addRowToTop() {
  /*
  According to https://api.highcharts.com/dashboards/#classes/Data_DataTable.DataTable#setrow
  this should insert a new row at the top, but it just overwrite the current one
  */
  const nextId = getNextId();
  myGrid.dataTable.setRow({ID: nextId, Name: "Miss Failure"}, 0, true);
  myGrid.viewport.updateRows();
}

function addRowToBottom() {
  const nextId = getNextId();
  myGrid.dataTable.setRow({ID: nextId, Name: "Mr. Success"});
  myGrid.viewport.updateRows();
}

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

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