Custom dropdown menus

[scrapeable]

In the below screenshot I've included a handsontable outside of R just using the handsontable js library and some html. Does this functionality exist in rhandsontable? Creating custom dropdown menus that apply to all columns, are accessed at the top, and ideally I can use the user inputs (clicks on menu options) to pass to an R Shiny app.

Here's some js code for the above too.

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);
});

This isn't much of an issue more of a discussion post...