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.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example1',
7
  template: `
8
    <hot-table [settings]="gridSettings" [data]="hotData"></hot-table>
9
  `,
10
  standalone: true,
11
  imports: [HotTableModule],
12
})
13
export class AppComponent {
14
  readonly hotData = [
15
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
16
    ['2017', 10, 11, 12, 13],
17
    ['2018', 20, 11, 14, 13],
18
    ['2019', 30, 15, 12, 13],
19
  ];
20

21
  readonly gridSettings: GridSettings = {
22
    minSpareRows: 1,
23
    height: 'auto',
24
    autoWrapRow: true,
25
    autoWrapCol: true,
26
  };
27
}
28
/* end-file */
29

30
/* file: app.config.ts */
31
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
32
import { registerAllModules } from 'handsontable/registry';
33
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
34

35
registerAllModules();
36

37
export const appConfig: ApplicationConfig = {
38
  providers: [
39
    provideZoneChangeDetection({ eventCoalescing: true }),
40
    {
41
      provide: HOT_GLOBAL_CONFIG,
42
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
43
    },
44
  ],
45
};
46
/* end-file */

1
<div>
2
    <app-example1></app-example1>
3
</div>

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.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4
import Handsontable from 'handsontable/base';
5
import { textRenderer } from 'handsontable/renderers/textRenderer';
6

7
const templateValues = ['one', 'two', 'three'];
8

9
function isEmptyRow(instance: Handsontable, row: number) {
10
  const rowData = instance.getDataAtRow(row);
11

12
  for (let i = 0, ilen = rowData.length; i < ilen; i++) {
13
    if (rowData[i] !== null) {
14
      return false;
15
    }
16
  }
17

18
  return true;
19
}
20

21
const defaultValueRenderer = (
22
  instance: Handsontable,
23
  td: HTMLTableCellElement,
24
  row: number,
25
  col: number,
26
  prop: string | number,
27
  value: Handsontable.CellValue,
28
  cellProperties: Handsontable.CellProperties
29
) => {
30
  if (value === null && isEmptyRow(instance, row)) {
31
    value = templateValues[col];
32
    td.style.color = '#999';
33
  } else {
34
    td.style.color = '';
35
  }
36

37
  textRenderer(instance, td, row, col, prop, value, cellProperties);
38
};
39

40
@Component({
41
  selector: 'app-example2',
42
  template: `
43
    <hot-table [settings]="gridSettings" [data]="hotData"></hot-table>
44
  `,
45
  standalone: true,
46
  imports: [HotTableModule],
47
})
48
export class AppComponent {
49
  readonly hotData = [
50
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
51
    ['2017', 10, 11, 12, 13],
52
    ['2018', 20, 11, 14, 13],
53
    ['2019', 30, 15, 12, 13],
54
  ];
55

56
  readonly gridSettings: GridSettings = {
57
    minSpareRows: 1,
58
    height: 'auto',
59
    autoWrapRow: true,
60
    autoWrapCol: true,
61
    cells() {
62
      return { renderer: defaultValueRenderer };
63
    },
64
  };
65
}
66
/* end-file */
67

68
/* file: app.config.ts */
69
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
70
import { registerAllModules } from 'handsontable/registry';
71
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
72

73
registerAllModules();
74

75
export const appConfig: ApplicationConfig = {
76
  providers: [
77
    provideZoneChangeDetection({ eventCoalescing: true }),
78
    {
79
      provide: HOT_GLOBAL_CONFIG,
80
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
81
    },
82
  ],
83
};
84
/* end-file */

1
<div>
2
    <app-example2></app-example2>
3
</div>

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.

1
/* file: app.component.ts */
2
import { AfterViewInit, Component, ViewChild } from '@angular/core';
3
import {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';
4
import Handsontable from 'handsontable/base';
5
import { textRenderer } from 'handsontable/renderers/textRenderer';
6

7
@Component({
8
  selector: 'app-example3',
9
  template: `
10
    <hot-table
11
      [settings]="hotSettings!" [data]="hotData">
12
    </hot-table>
13
  `,
14
  standalone: true,
15
  imports: [HotTableModule],
16
})
17
export class AppComponent implements AfterViewInit {
18
  @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;
19

20
  hotData = [
21
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
22
    ['2017', 10, 11, 12, 13],
23
    ['2018', 20, 11, 14, 13],
24
    ['2019', 30, 15, 12, 13],
25
  ];
26

27
  hotSettings: GridSettings = {};
28

29
  ngAfterViewInit() {
30
    const templateValues = ['one', 'two', 'three'];
31

32
    function isEmptyRow(instance: Handsontable, row: number) {
33
      const rowData = instance.getDataAtRow(row);
34

35
      for (let i = 0, ilen = rowData.length; i < ilen; i++) {
36
        if (rowData[i] !== null) {
37
          return false;
38
        }
39
      }
40

41
      return true;
42
    }
43

44
    const defaultValueRenderer = (
45
      instance: Handsontable,
46
      td: HTMLTableCellElement,
47
      row: number,
48
      col: number,
49
      prop: string | number,
50
      value: Handsontable.CellValue,
51
      cellProperties: Handsontable.CellProperties
52
    ) => {
53
      if (value === null && isEmptyRow(instance, row)) {
54
        value = templateValues[col];
55
        td.style.color = '#999';
56
      } else {
57
        td.style.color = '';
58
      }
59

60
      textRenderer(
61
        instance,
62
        td,
63
        row,
64
        col,
65
        prop,
66
        value,
67
        cellProperties
68
      );
69
    };
70

71
    this.hotSettings = {
72
      startRows: 8,
73
      startCols: 5,
74
      minSpareRows: 1,
75
      contextMenu: true,
76
      height: 'auto',
77
      licenseKey: 'non-commercial-and-evaluation',
78
      cells() {
79
        return { renderer: defaultValueRenderer };
80
      },
81
      beforeChange: (changes) => {
82
        const instance = this.hotTable.hotInstance!;
83
        const columns = instance.countCols();
84
        const rowColumnSeen: Record<string, boolean> = {};
85
        const rowsToFill: Record<string, boolean> = {};
86
        const ch = changes === null ? [] : changes!;
87

88
        for (let i = 0; i < ch.length; i++) {
89
          // if oldVal is empty
90
          if (ch[i]![2] === null && ch[i]![3] !== null) {
91
            if (isEmptyRow(instance, ch[i]![0])) {
92
              // add this row/col combination to the cache so it will not be overwritten by the template
93
              rowColumnSeen[`${ch[i]![0]}/${ch[i]![1]}`] = true;
94
              rowsToFill[String(ch[i]![0])] = true;
95
            }
96
          }
97
        }
98

99
        for (const r in rowsToFill) {
100
          if (rowsToFill.hasOwnProperty(r)) {
101
            for (let c = 0; c < columns; c++) {
102
              // if it is not provided by user in this change set, take the value from the template
103
              if (!rowColumnSeen[`${r}/${c}`]) {
104
                ch.push([Number(r), c, null, templateValues[c]]);
105
              }
106
            }
107
          }
108
        }
109
      },
110
      autoWrapRow: true,
111
      autoWrapCol: true,
112
    }
113

114
  }
115

116
}
117
/* end-file */
118

119

120

121
/* file: app.config.ts */
122
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
123
import { registerAllModules } from 'handsontable/registry';
124
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
125

126
// register Handsontable's modules
127
registerAllModules();
128

129
export const appConfig: ApplicationConfig = {
130
  providers: [
131
    provideZoneChangeDetection({ eventCoalescing: true }),
132
    {
133
      provide: HOT_GLOBAL_CONFIG,
134
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
135
    },
136
  ],
137
};
138
/* end-file */

1
<div>
2
    <app-example3></app-example3>
3
</div>

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.

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

11
      sourceRow.forEach((value, col) => {
12
        hot.setDataAtCell(index, col, value);
13
      });
14
    }
15
  },
16
  licenseKey: 'non-commercial-and-evaluation',
17
});

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.

1
const hot = new Handsontable(container, {
2
  data: [],
3
  colHeaders: ['Name', 'Quantity', 'Status'],
4
  afterCreateRow(index) {
5
    fetch('/api/row-defaults')
6
      .then((response) => response.json())
7
      .then((defaults) => {
8
        hot.setDataAtRow(index, [defaults.name, defaults.quantity, defaults.status]);
9
      });
10
  },
11
  licenseKey: 'non-commercial-and-evaluation',
12
});

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