Array of Objects results in losing add and remove columns capability - handsontable

Question

I'm reading an object to populate my grid. Previously, the grid was populated by an array of arrays. When switching to an object, I've lost the add and remove column funcitonality, even though it is there in my handontable initialiser.

Is this expected behaviour?

Added "allowInsertColumn" to the setup too, that didn't work.

I get this functionality from the contextmenu setup as per below;

        contextMenu: {
            items: {
                row_above: {name: 'add step above'},
                row_below: {name: 'add step below'},
                col_right: {name: 'add datagroup right'},
                col_left: {name: 'add datagroup left'},
                remove_row: {name: 'remove step '},
                remove_col: {name: 'remove datagroup'}

            }
        },

Answer 1

Handsontable's 'add column on left/right' option works by executing the alter() method. In the documentation it is said that

The alter() method works only when your data is an array of arrays.

So if you want to allow users to add column you'd need to run updateSettings() on the columns.

Here's a simplest form of it (surely you'd want something more than an empty object to be added)

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

Answer 2

Yes. If you want to allow users to add a new column in this case you'd need to create an object based menu as so

hot.updateSettings({
      contextMenu: {
    items: {
        //custom option
     "cell_validation": {
        name: 'Add new column at the end',
        callback(key, selection, clickEvent) {
            //runs custom code, I add a new object with data being random value as `columns` requires to pass something there
          // using the same value for `data` will duplicate data between columns so it has to be something new each time
          // you add a column
          columnHeaders.push({ data: `col${Math.random().toString().slice(2)}`, title: 'New column' },)
          hot.updateSettings({
            columns: columnHeaders
          })
          console.log(hot.getData())
        }
      },
        //predefined items https://handsontable.com/docs/javascript-data-grid/context-menu/
      "clear_column": {},
      /// ...etc.
    }
  },
})