Handsontable example

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders" style="height: 320px; overflow: hidden; width: 100%;" data-originalstyle="height: 320px; overflow: hidden; width: 100%;"></div>

CSS

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

JavaScript

var autocompleteArray = [0,1,2];
  var receivers = ['John', 'James', 'Ann', 'Tommy', 'Eveline', 'Diana', 'Mike'];
  var status = ['pending', 'done', 'on hold'];
  
  var example = document.getElementById('example1');
  var hot = new Handsontable(example, {
    data: [
    	{importance: 1, no: 432, receiver: 'John', status: 'pending'},
      {importance: 0, no: 433, receiver: 'James', status: 'done'},
      {importance: 2, no: 434, receiver: 'Ann', status: 'pending'}
    ],
    colWidths: 100,
    rowHeaders: true,
    colHeaders: true,
    columns: [{
    		data: 'importance',
        type: 'autocomplete',
        source: autocompleteArray,
        strict: false
      },
      {
      	data: 'no',
        type: 'numeric'
      },
      {
      	data: 'receiver',
        type: 'autocomplete',
        source: receivers,
        strict: false,
        visibleRows: 4
      },
      {
      	data: 'status',
        type: 'autocomplete',
        source: status,
        strict: false,
        trimDropdown: false
      }
    ],
    filters: true,
    dropdownMenu: {
      items: {
        "insert_left_object": {
          name: 'Add column on left',
          callback: function(key, options) {
          let columnIndex = options[0].start.col;
          let newColumnForm = [{}];
          this.updateSettings({
          	columns: newColumnForm
          })
          }
        },
        "make_read_only": {},
        "clear_column": {},
        "clear_column": {},
        "filter_by_condition": {},
        "filter_operators": {},
        "filter_by_condition2": {},
        "filter_by_value": {},
        "filter_action_bar": {}
      }
    }
  });