Handsontable example

HTML

<div id="example1"></div>

CSS

</style><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var example = document.getElementById('example1');
  var hot = new Handsontable(example, {
      data: [
        [0],
        [1],
        [2],
        [3],
        [4],
        [6]
     ],
    colHeaders: true,
    columnSorting: true,
    afterCreateRow: (index, amount) => {
      hot.setDataAtRowProp(index, '0', '5');
    },
  });

  hot.getPlugin('columnSorting').sort({
     column: 0,
     sortOrder: 'desc'
  });
   
  //inserts at visual=1 physical=1, looks correct when initially inserted, incorrect when sort is removed
  //hot.alter('insert_row', 1);
  
  //inserts at visual=4 physical=4, is incorrect when iniially inserted or sort is removed
  //hot.alter('insert_row', hot.toPhysicalRow(1));
  
  //inserts at visual=5 physical=5, is incorrect when initially inserted but is correct when sort is removed
  hot.alter('insert_row', 5);