disabled option in handsontable Angular

Question

I'm using an example to create table using HandsOnTable this's my core

Code image and this's html tag

  <hot-table
  [data]="dataset"
  [settings]="hotSettings"
  [hotId]="'my-hot-table'"
></hot-table>

Result but the result is not what I expect as all context menu options related to columns are disabled as attached , so what's missing?

I want all options in context menu to be enabled

Answer 1

You did not share what type of dataset you use, but it seems that you are defining an objects-data. That makes the column alteration options to be disabled. The same happens if you define 'columns' option in your settings.

If you would like to have object data and allow users to alter number of columns you'll need to create a custom context menu option that executes updateSettings() method with the new columns set. It would be something like this

var cols = [{
  data: 'id'
}, {
  data: 'name'
}, {
  data: 'surname'
}];

var myData = [{
    id: 1,
    name: 'Adam',
    surname: 'Smith'
  }, {
    id: 2,
    name: 'Eve',
    surname: 'Smith'
  }],
  example = document.getElementById('example1'),
  hot = new Handsontable(example, {
    data: myData,
    rowHeaders: true,
    colHeaders: true,
    columns: cols
  });

document.querySelector('.add').addEventListener('click', function() {
  cols.push({});
  hot.updateSettings({
    columns: cols
  })
})