Skip to content
Handsontable dev

Row pre-populating

Pre-populate new rows with default values when users add rows to the grid.

Basic spare rows

To keep one empty row at the bottom of the grid, set minSpareRows to 1.

Spare rows with placeholder styling

To hint what to enter in the spare row, add a custom cell renderer that displays greyed-out placeholder text in empty cells. The renderer checks whether the whole row is empty, then shows a template value in a lighter color.

Auto-populating with template values

For full pre-population, use the beforeChange hook to fill all cells in a spare row with template values the moment the user starts editing. The isEmptyRow() helper detects whether the row is untouched, and the hook pushes changes for every column except the one the user is editing.

Pre-populate from an adjacent row

You can copy values from the row above when the user inserts a new row. Use the afterCreateRow hook to read the source row’s data and write it to the newly created row.

const hot = new Handsontable(container, {
  data: [
    ['Product A', 10, 'active'],
    ['Product B', 20, 'inactive'],
  ],
  colHeaders: ['Name', 'Quantity', 'Status'],
  afterCreateRow(index) {
    if (index > 0) {
      const sourceRow = hot.getSourceDataAtRow(index - 1);


      sourceRow.forEach((value, col) => {
        hot.setDataAtCell(index, col, value);
      });
    }
  },
  licenseKey: 'non-commercial-and-evaluation',
});

Pre-populate from a server-fetched default

You can fetch default row values from a server and apply them when the user adds a new row. Use the afterCreateRow hook to trigger the request and populate the row once the response arrives.

const hot = new Handsontable(container, {
  data: [],
  colHeaders: ['Name', 'Quantity', 'Status'],
  afterCreateRow(index) {
    fetch('/api/row-defaults')
      .then((response) => response.json())
      .then((defaults) => {
        hot.setDataAtRow(index, [defaults.name, defaults.quantity, defaults.status]);
      });
  },
  licenseKey: 'non-commercial-and-evaluation',
});

Result

Your grid keeps one or more empty rows at the bottom. Depending on the approach, spare rows show greyed-out placeholder text or auto-fill all cells with template values when the user starts editing.

Hooks

afterCreateRow
beforeChange