Handsontable example

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>

CSS

.handsontable .blue {
  background: #00a9ff
}
</style><!-- Ugly Hack due to jsFiddle issue -->

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

JavaScript

let holder;

  function getData() {
    return [
      ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
      ['2017', 10, 11, 12, 13, 15, 16],
      ['2018', 10, 11, 12, 13, 15, 16],
      ['2019', 10, 11, 12, 13, 15, 16],
      ['2020', 10, 11, 12, 13, 15, 16],
      ['2021', 10, 11, 12, 13, 15, 16]
    ];
  }
  var container = document.getElementById('example1'),
    hot = new Handsontable(container, {
      data: getData(),
      rowHeaders: true,
      colHeaders: true,
      contextMenu: true,
      comments: true,
      afterCopy: function(data, coords) {
        let row = coords[0].startRow;
        let col = coords[0].startCol;
        let className = this.getCellMeta(row, col).className;
        if (className) {
          holder = className;
        }
      },
      afterPaste: function(data, coords) {
        let row = coords[0].startRow;
        let col = coords[0].startCol;
        if (holder) {
          this.setCellMeta(row, col, 'className', holder);
          this.render()
        }
      }
    });

  hot.setCellMeta(0, 1, 'className', 'blue');
  hot.render()