Handsontable example

HTML

<script src="https://docs.handsontable.com/pro/2.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/2.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<div id="example3" class="hot handsontable"></div>

CSS

body {
	font: 0.8em sans-serif;
}
.btyellow,
.btblue, .btpink, .btwhite {
  padding: 10px;
  width: 150px;
  border: 2px solid #ccc;
  margin-bottom: 2px;
  background: #fff;
  border-radius: 2px;
}
.handsontable .white {
  background: #fff;
}
.handsontable .yellow {
  background: #f7ecb7;
}
.handsontable .blue {
  background: #b7ebf4;
}
.handsontable .pink {
	background: #fcc9e9;
}
.yellow-dot, .blue-dot, .pink-dot, .white-dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	float: right;
	border: 1px solid #777;
}
.white-dot {
	background: #fff;
}
.yellow-dot {
	background: #f7ecb7;
}
.blue-dot {
	background: #b7ebf4;
}
.pink-dot {
	background: #fcc9e9;
}

JavaScript

var
  data3 = [
    ['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]
  ],
  container3 = document.getElementById('example3'),
  hot = new Handsontable(container3, {
    data: data3,
    colHeaders: true,
    outsideClickDeselects: false
  });

hot.selectCell(0, 0);

hot.updateSettings({
  dropdownMenu: {
    items: {
		"tab-white": {
        name: 'Color <b>table</b> white<div class="white-dot"></div>',
        callback: function(key, options) {
          hot.updateSettings({
            className: 'white'
          })
        }
      },
      "tab-yellow": {
        name: 'Color <b>table</b> yellow<div class="yellow-dot"></div>',
        callback: function(key, options) {
          hot.updateSettings({
            className: 'yellow'
          })
        }
      },
      "tab-blue": {
        name: 'Color <b>table</b> blue<div class="blue-dot"></div>',
        callback: function(key, options) {
          hot.updateSettings({
            className: 'blue'
          })
        }
      },
			"tab-pink": {
        name: 'Color <b>table</b> pink<div class="pink-dot"></div>',
        callback: function(key, options) {
          hot.updateSettings({
            className: 'pink'
          })
        }
      },
      "hsep1": "---------",
			"col-white": {
        name: 'Color <b>column</b> white <div class="white-dot"></div>',
        callback: function(key, options) {
          for(var i = 0; i < hot.countRows(); i++){
						hot.setCellMeta(i, hot.getSelectedLast()[1], 'className', 'white');
						hot.render();
					}
        }
      },
			"col-yellow": {
        name: 'Color <b>column</b> yellow <div class="yellow-dot"></div>',
        callback: function(key, options) {
          for(var i = 0; i < hot.countRows(); i++){
						hot.setCellMeta(i, hot.getSelectedLast()[1], 'className', 'yellow');
						hot.render();
					}
        }
  ...