Add a column to an object-based dataset

In this tutorial, you will add a column to an object-based dataset through a custom context menu item. You will learn why the built-in column-insert items are unavailable for object data and how to extend the columns setting at runtime.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
registerAllModules();
5

6
/* start:skip-in-preview */
7
const data = [
8
  { sku: 'SKU-4821', supplier: 'Harbor Goods', stock: 142, category: 'Electronics' },
9
  { sku: 'SKU-0093', supplier: 'Alpine Supply Co.', stock: 0, category: 'Apparel' },
10
  { sku: 'SKU-7311', supplier: 'Meadow Foods', stock: 67, category: 'Grocery' },
11
  { sku: 'SKU-2250', supplier: 'Harbor Goods', stock: 318, category: 'Electronics' },
12
  { sku: 'SKU-9047', supplier: 'Northwind Traders', stock: 12, category: 'Hardware' },
13
  { sku: 'SKU-6638', supplier: 'Alpine Supply Co.', stock: 205, category: 'Apparel' },
14
];
15
/* end:skip-in-preview */
16

17
// `columns` and `colHeaders` are kept in mutable variables so the custom menu
18
// item can extend them and push the change back through `updateSettings`.
19
const columns = [
20
  { data: 'sku', width: 120 },
21
  { data: 'supplier', width: 170 },
22
  { data: 'stock', width: 90 },
23
  { data: 'category', width: 130 },
24
];
25
const colHeaders = ['SKU', 'Supplier', 'Stock', 'Category'];
26

27
let newColumnCount = 0;
28

29
const container = document.querySelector('#example1');
30

31
const hot = new Handsontable(container, {
32
  data,
33
  rowHeaders: true,
34
  colHeaders,
35
  columns,
36
  height: 'auto',
37
  width: '100%',
38
  contextMenu: {
39
    items: {
40
      // Object data blocks the built-in `col_left` / `col_right` items, so a
41
      // custom action does the work instead.
42
      add_column: {
43
        name: 'Add column',
44
        callback(key, selection) {
45
          const insertAt = selection[0].start.col + 1;
46

47
          newColumnCount += 1;
48
          const newKey = `custom_${newColumnCount}`;
49

50
          // 1. Add the new property to every source row object.
51
          hot.getSourceData().forEach((row) => {
52
            row[newKey] = '';
53
          });
54

55
          // 2. Extend the `columns` and `colHeaders` arrays at the clicked position.
56
          columns.splice(insertAt, 0, { data: newKey, width: 130, className: 'ht-new-column' });
57
          colHeaders.splice(insertAt, 0, `Custom ${newColumnCount}`);
58

59
          // 3. Apply the new structure.
60
          hot.updateSettings({ columns, colHeaders });
61
        },
62
      },
63
      sep1: '---------',
64
      row_above: { name: 'Insert row above' },
65
      row_below: { name: 'Insert row below' },
66
      remove_row: { name: 'Remove row' },
67
    },
68
  },
69
  licenseKey: 'non-commercial-and-evaluation',
70
});

1
td.ht-new-column {
2
  background-color: #e3f2fd;
3
}

Overview

Difficulty: Intermediate Time: ~15 minutes

When your data is an array of objects, each column maps to an object property through the columns setting. The built-in Insert column left and Insert column right menu items rely on alter('insert_col_start'), which Handsontable rejects for object data:

Cannot create new column. When data source in an object, you can only have as much columns as defined in first data row, data schema or in the ‘columns’ setting.

To add a column over object data, you extend the columns setting yourself, add the matching property to every row, and re-apply the configuration with updateSettings. This recipe wires that into a custom Add column menu item.

Before you begin

You need a working Handsontable instance with an object-based dataset. If you are starting fresh, install it first:

1
npm install handsontable

Then import and register all modules:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
registerAllModules();

Set up the object dataset and column configuration
```
1
const data = [
2
  { sku: 'SKU-4821', supplier: 'Harbor Goods', stock: 142, category: 'Electronics' },
3
  // ...more rows
4
];
5

6
const columns = [
7
  { data: 'sku', width: 120 },
8
  { data: 'supplier', width: 170 },
9
  { data: 'stock', width: 90 },
10
  { data: 'category', width: 130 },
11
];
12
const colHeaders = ['SKU', 'Supplier', 'Stock', 'Category'];
```
What’s happening:
- data is an array of row objects. Each object key (sku, supplier, …) maps to one column.
- columns binds each column to a property through its data key. The column order follows this array, not the order of keys inside the row objects.
- Keep columns and colHeaders in variables you can mutate. The custom menu item edits these arrays and feeds them back through updateSettings.
Configure the context menu without the built-in column items
```
1
contextMenu: {
2
  items: {
3
    add_column: { /* defined in Step 3 */ },
4
    sep1: '---------',
5
    row_above: { name: 'Insert row above' },
6
    row_below: { name: 'Insert row below' },
7
    remove_row: { name: 'Remove row' },
8
  },
9
},
```
What’s happening:
- Passing an object to contextMenu.items lists the exact items that appear. The built-in col_left and col_right keys are omitted because they throw on object data.
- add_column is a custom key that replaces them with logic that works for object data.
- '---------' is the predefined separator token. It renders a visual divider between the custom action and the built-in row operations.
Implement “Add column”
```
1
let newColumnCount = 0;
2

3
// inside contextMenu.items
4
add_column: {
5
  name: 'Add column',
6
  callback(key, selection) {
7
    const insertAt = selection[0].start.col + 1;
8

9
    newColumnCount += 1;
10
    const newKey = `custom_${newColumnCount}`;
11

12
    // 1. Add the new property to every source row object.
13
    hot.getSourceData().forEach((row) => {
14
      row[newKey] = '';
15
    });
16

17
    // 2. Extend the `columns` and `colHeaders` arrays at the clicked position.
18
    columns.splice(insertAt, 0, { data: newKey, width: 130, className: 'ht-new-column' });
19
    colHeaders.splice(insertAt, 0, `Custom ${newColumnCount}`);
20

21
    // 3. Apply the new structure.
22
    hot.updateSettings({ columns, colHeaders });
23
  },
24
},
```
What’s happening:
1. selection[0].start.col is the visual index of the right-clicked column. Adding 1 inserts the new column directly to its right; use the value as-is to insert to its left.
2. newColumnCount produces a unique property key (custom_1, custom_2, …) so each new column binds to a fresh object property. Use a counter rather than a random value to keep keys predictable.
3. hot.getSourceData() returns the array of row objects. Adding row[newKey] = '' gives every row an empty value for the new column, so the cells start blank and editable.
4. columns.splice(insertAt, 0, ...) inserts the new column descriptor, and colHeaders.splice(...) inserts its header. The className marks the new column for styling.
5. hot.updateSettings({ columns, colHeaders }) re-applies the configuration. Because each row object now has the new property, the column renders with the data already in place.

How it works - complete flow

The user right-clicks a cell. Handsontable opens the context menu with the custom Add column item and the selected built-in row items.
Add column computes the insert position from the clicked column, generates a unique property key, and adds that property to every row object.
The columns and colHeaders arrays gain a matching entry at the same position.
updateSettings re-maps the columns. The new column appears with a highlighted header background and accepts edits like any other column.

What you learned

Object data cannot use the built-in col_left / col_right items, because alter('insert_col_*') is rejected when the data source is an object.
Omit those keys from contextMenu.items and add a custom item instead.
To add a column over object data: add the property to each row object, extend columns and colHeaders, then call updateSettings.
Column order follows the columns array, so splice controls where the new column appears.
selection[0].start.col gives you the right-clicked column for positioning.

Next steps

Set dataSchema so rows added later also include the new property.
Add a disabled() function to the menu item to limit how many columns users can add.
Explore the Context menu guide for the full list of built-in item keys and advanced configuration.