Handsontable example

HTML

<h3>
This table has filters and struggles to delete values across 5000 rows
</h3>
<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders" style="height: 320px; overflow: hidden; width: 584px;" data-originalstyle="height: 320px; overflow: hidden; width: 584px;"></div>


<h3>
This table does not have filters and easily deletes values across 5000 rows
</h3>
<div id="example2" class="hot handsontable htRowHeaders htColumnHeaders" style="height: 320px; overflow: hidden; width: 584px;" data-originalstyle="height: 320px; overflow: hidden; width: 584px;"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://cdn.jsdelivr.net/npm/handsontable@8.3.0/dist/handsontable.full.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@8.3.0/dist/handsontable.full.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    example1 = document.getElementById('example1'),
    hot1,
    example2 = document.getElementById('example2'),
    hot2;

  hot1 = new Handsontable(example1, {
    data: Handsontable.helper.createSpreadsheetData(5000, 10),
    width: 584,
    height: 320,
    colWidths: 100,
    rowHeights: 23,
    rowHeaders: true,
    colHeaders: true,
    columnSorting: true,
    sortIndicator: true,
    manualColumnResize: true,
    dropdownMenu: true,
    contextMenu: true,
    filters: true
  });
  
  hot2 = new Handsontable(example2, {
    data: Handsontable.helper.createSpreadsheetData(5000, 10),
    width: 584,
    height: 320,
    colWidths: 100,
    rowHeights: 23,
    rowHeaders: true,
    colHeaders: true,
    columnSorting: true,
    sortIndicator: true,
    manualColumnResize: true,
    dropdownMenu: true,
    contextMenu: true,
    filters: false
  });

});