Handsontable example

HTML

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

CSS

.cell-gray,
.columnSummaryResult {
  background: #f0f0f0 !important;
}
.columnSummaryResult {
  font-weight: bold;
}
</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/handsontable-pro@5.0.0/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/numbro@2.0.6/dist/languages.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/5.0.0/components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

var columnsArr = [
  { data: '2018', title: '2018' },
  { data: '2019', title: '2019' },
  { data: '2020', title: '2020' },
  { data: '2021', title: '2021' },
  { data: '2022', title: '2022' },
  { data: '2023', title: '2023' },
  { data: (rowData) => sumObj(rowData), title: ' ', readOnly: true, className: 'cell-gray' },
];
var example = document.getElementById('example1');
var hot1 = new Handsontable(example, {
  data: [
    { '2018': 0, '2019': 0, '2020': 0, '2021': 0, '2022': 0, '2023': 0 },
    { '2018': 0, '2019': 0, '2020': 0, '2021': 0, '2022': 0, '2023': 0 },
    { '2018': 0, '2019': 0, '2020': 0, '2021': 0, '2022': 0, '2023': 0 },
    { '2018': 0, '2019': 0, '2020': 0, '2021': 0, '2022': 0, '2023': 0 },
    { '2018': 0, '2019': 0, '2020': 0, '2021': 0, '2022': 0, '2023': 0 },
    { '2018': 0, '2019': 0, '2020': 0, '2021': 0, '2022': 0, '2023': 0 },
    {}
  ],
  type: 'numeric',
  numericFormat: { pattern: '0,0.0', culture: 'de-DE' },
  colWidths: 75,
  columns: columnsArr,
  colHeaders: true,
  columnSummary: generateColumnSummary(),
});

function sumObj(obj) {
  var sum = 0;

  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      sum += parseFloat(obj[key]) || 0;
    }
  }

  return sum;
}

function generateColumnSummary() {
  var result = [];

  for (var i = 0; i < columnsArr.length; i++) {
    result.push({
      destinationRow: 0,
      destinationColumn: i,
      reversedRowCoords: true,
      type: 'sum',
      forceNumeric: true
    });
  }

  return result;
}