Create a Handsontable spreadsheet with data, filters, and context menu options.

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1.1/dist/handsontable.full.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1.1/dist/handsontable.full.min.js"></script>
  
<button onclick="hot.render(); hot.refreshDimensions();">
  <span>Refresh</span>
</button>

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

JavaScript

const container = document.getElementById('hot');
const data = [['John', 25, '2024-01-01'],['Anna', 32, '2024-02-15']];
const hot = new Handsontable(container, {
      data: data,
      colHeaders: ['Name', 'Age', 'Date'],
      rowHeaders: true,
      columns: [{ type: 'text' },{ type: 'numeric' },],
      dropdownMenu: true,
      dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
      filters: true,
      contextMenu: ['copy', '---------','remove_col', 'remove_row', '---------','undo', 'redo'],  
      licenseKey: 'non-commercial-and-evaluation'
    });