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

HTML

<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]/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/ht-theme-main.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.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,
      themeName: 'ht-theme-main',
      colHeaders: ['Enter your full name including first and last name', 'full address including zip code'],
      rowHeaders: true,
      columns: [{ type: 'text' },{ type: 'numeric' },],
      dropdownMenu: true,
      dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
      filters: true,
       columnSorting: true,
      autoColumnSize: true,
      //colWidths: '150',

      contextMenu: ['copy', '---------','remove_col', 'remove_row', '---------','undo', 'redo'],  
      licenseKey: 'non-commercial-and-evaluation'
    });