deleteRows() confusion

by stitot

HTML

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

<div id="container"></div>

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,7],
    name: [
        'Phone',
        'Bread',
        'Shirt',
        'Laptop',
        'Milk',
        'Jeans',
        'Tablet'
    ],
    sku: [
        'ELE-001',
        'FOO-123',
        'CLO-456',
        'ELE-002',
        'FOO-456',
        'CLO-789',
        'ELE-003'
    ],
    category: [
        'Electronics',
        'Food',
        'Clothing',
        'Electronics',
        'Food',
        'Clothing',
        'Electronics'
    ],
    price: [699.99, 10.5, 29.99, 1199.99, 12, 49.99, 500],
    discount: [20, 5, 40, 25, 10, 15, 30]
};


const myGrid = Grid.grid("container", {
  dataTable: {
    columns: data,
  },
  columns: [
    {
      id: "id",
      cells: {
        format: '<button>Delete</button>',
        editMode: {
          enabled: false
        },
        events:{
          afterRender: function() {
            const cell = this;
            const dataTable = cell.row.viewport.grid.dataTable;
            cell.htmlElement.querySelector('button')?.addEventListener("click", function(){
              dataTable.deleteRows(cell.row.id);
              cell.row.viewport.updateRows();
            });;
          }
        }
      }
    },
  ]
});