const hotElement = document.getElementById('example-table');
const hot = new Handsontable(hotElement, {
  data: df.objects().slice(0,20),
  colHeaders: columns,
  rowHeaders: true,
  licenseKey: 'non-commercial-and-evaluation',
  height: '85vh',
  afterOnCellMouseDown: function (event, coords, TD) {
    if (coords.col !== null) {
      const selectedHeader = hot.getColHeader(coords.col);
      selectedColumnName = selectedHeader;
      console.log('column selected: ' + selectedColumnName);
    }
  },
  dropdownMenu: {
    items: {
      'rename': {
        name: 'Rename'
      },
        'select': {
          name: 'Select (Remove) Columns'
        },
        'reorder': {
          name: 'Reorder Columns',
          submenu: {
            items: [
              {
                key: 'reorder:asc',
                name: 'Ascending Order',
                callback: function (key, options) {
                  console.log('Ascending Order')
                }
              },
              {
                key: 'reorder:desc',
                name: 'Descending Order',
                callback: function (key, options) {
                  console.log('Descending Order')
                }
              },
              {
                key: 'reorder:maual',
                name: 'Manual Order',
                callback: function (key, options) {
                  console.log('Manual Order')
                }
              },
            ]
          }
        },
        'h1': {
          name: '---------'
        },
        'filter': {
          name: 'Filter',
          submenu: {
            items: [
              {
                key: 'filter:isequalto',
                name: 'Is Equal To',
                callback: function (key, options) {
                  console.log('Is Equal To')
                }
              },
              {
                key: 'reorder:isnotequalto',
                name: 'Is Not Equal To',
                callback: function (key, options) {
                  console.log('Is Not Equal To')
                }
              },
              {
                key: 'reorder:isin',
                name: 'Is In (Multiple Values)',
                callback: function (key, options) {
                  console.log('Is In (Multiple Values)')
                }
              },
              {
                key: 'reorder:isnotin',
                name: 'Is In Not (Multiple Values)',
                callback: function (key, options) {
                  console.log('Is In Not (Multiple Values)')
                }
              },
              {
                key: 'reorder:contains',
                name: 'Contains',
                callback: function (key, options) {
                  console.log('Contains')
                }
              },
              {
                key: 'reorder:notcontains',
                name: 'Does Not Contain',
                callback: function (key, options) {
                  console.log('Does Not Contain')
                }
              },
              {
                key: 'reorder:notcontains',
                name: 'Does Not Contain',
                callback: function (key, options) {
                  console.log('Does Not Contain')
                }
              },
            ]
          }
        },
        'groupby': {
          name: 'Group By'
        },
        'summarize': {
          name: 'Summarize (Aggregate)'
        },
        'calc': {
          name: 'Create Calculation'
        },
        'windowcalc': {
          name: 'Create Window Calculation'
        },
        'arrange': {
          name: 'Arrange (Sort)'
        },
        'h2': {
          name: '---------'
        },
        'join': {
          name: 'Join with DF'
        },
        'append': {
          name: 'Append (Add Rows / Union)'
        },
        'pivotlonger': {
          name: 'Pivot Longer (Wide to Long)'
        },
        'pivotwider': {
          name: 'Pivot Wider (Long to Wide)'
        },
        'separate': {
          name: 'Separate (Text to Columns)'
        },
        'cross': {
          name: 'Crossing (Cartesian Product)'
        },
        'h3': {
          name: '---------'
        },
        'change': {
          name: 'Change Data Type'
        },
        'replace': {
          name: 'Replace Values'
        },
        'text': {
          name: 'Text Data'
        },
        'missing': {
          name: 'Missing Data'
        },
      }
  },
  });
}).catch(error => {
  console.error('Error loading data:', error);
});