Handsontable example

HTML

<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">


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

JavaScript

var container = document.getElementById('container');
var hot;

hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(10, 10),
  rowHeaders: true,
  colHeaders: true,
  dropdownMenu: true,
  filters: true,
  columnSorting: true,
  afterFilter() {
    this.batch(() => {
      this.getPlugin('filters').filtersRowsMap.setValueAtIndex(0, false);
      this.getPlugin('filters').filtersRowsMap.setValueAtIndex(1, false);
      this.updateData([[3, 5], [7,8]])
    });
  },
  afterColumnSort() {
    this.rowIndexMapper.moveIndexes([this.toVisualRow(0), this.toVisualRow(1)], 0);
  },
  cells(row) {
    if ([0, 1].includes(row)) {
      return {
        readOnly: true
      }
    }
        
    return {};
  },
  customBorders: [{
    range: {
      from: {
        row: 0,
        col: 0
      },
      to: {
        row: 1,
        col: 9
      },
      width: 2,
        color: '#5292F7'
    },
      top: {
        width: 1,
        color: 'grey'
      },
      left: {
        width: 1,
        color: 'grey'
      },
      bottom: {
        width: 1,
        color: 'grey'
      },
      right: {
        width: 1,
        color: 'grey'
      }
  }]
});