Handsontable example

by aszymanski

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> 

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

CSS

.handsontable .summaryRow {
   background-color: #F0F0F0 !important;
}

JavaScript

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  licenseKey: 'non-commercial-and-evaluation',
  data: [
    [1, 2, 3, 4, 5],
    [6, 7, 8, 9, 10],
    [11, 12, 13, 14, 15],
    [null]
  ],
  colHeaders: true,
  rowHeaders: true,
  cells: function(row, col, prop) {
    let cellProperties = {};

    if (row === 3) {
      cellProperties.readOnly = true;
      cellProperties.className = 'summaryRow'
    }

    return cellProperties;
  },
  afterGetRowHeader: function(row, TH) {
    if (row === 3) {
      TH.innerHTML = ''
    }
  },
  // enable and configure the `ColumnSummary` plugin
  columnSummary: [{
      sourceColumn: 0,
      type: 'sum',
      destinationRow: 3,
      destinationColumn: 0
    },
    {
      sourceColumn: 1,
      type: 'min',
      destinationRow: 3,
      destinationColumn: 1
    },
    {
      sourceColumn: 2,
      type: 'max',
      destinationRow: 3,
      destinationColumn: 2
    },
    {
      sourceColumn: 3,
      type: 'count',
      destinationRow: 3,
      destinationColumn: 3
    },
    {
      sourceColumn: 4,
      type: 'average',
      destinationRow: 3,
      destinationColumn: 4
    }
  ]
});