Text cell type

Use the text cell type, the default cell type in Handsontable, to display and edit plain text values.

Overview

The text cell type is the default cell type in Handsontable. It renders a cell’s value as plain text and lets you edit it with a standard text input. It has no built-in validator.

Because text is the default, you don’t need to set type: 'text' for it to apply. Set it explicitly when you want to override a different type inherited from a higher configuration level, or when you want the configuration to state the type directly, for example to guard alphanumeric codes or values with leading zeros against being reformatted by another type.

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

5
@Component({
6
  selector: 'example1-text-cell-type',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14

15
  readonly data = [
16
    { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },
17
    { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },
18
    { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },
19
    { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },
20
    { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },
21
  ];
22

23
  readonly gridSettings: GridSettings = {
24
    colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],
25
    height: 'auto',
26
    autoWrapRow: true,
27
    autoWrapCol: true,
28
    columns: [
29
      { data: 'sku', type: 'text' },
30
      { data: 'category', type: 'text' },
31
      { data: 'quantity', type: 'numeric' },
32
      { data: 'unitPrice', type: 'numeric' },
33
    ]
34
  };
35
}
36
/* end-file */
37

38

39

40
/* file: app.config.ts */
41
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
42
import { registerAllModules } from 'handsontable/registry';
43
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
44

45
// register Handsontable's modules
46
registerAllModules();
47

48
export const appConfig: ApplicationConfig = {
49
  providers: [
50
    provideZoneChangeDetection({ eventCoalescing: true }),
51
    {
52
      provide: HOT_GLOBAL_CONFIG,
53
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
54
    },
55
  ],
56
};
57
/* end-file */

1
<div>
2
  <example1-text-cell-type></example1-text-cell-type>
3
</div>

In the example above, the sku and category columns use type: 'text' explicitly, even though it’s the default. This makes the configuration self-documenting: values such as '004821' are alphanumeric codes with leading zeros, not numbers, and the explicit type states that intent even if a later change sets a different type at the grid or column level.

Adding a validator

The text cell type ships without a built-in validator. To validate text values, combine type: 'text' with your own validator function, and set allowInvalid to false to reject invalid entries.

With allowInvalid: false, the cell editor doesn’t close on an invalid value. It stays open until you either enter a value that passes validation or press Esc to cancel the edit and restore the previous value. See invalid cell commit semantics for the full behavior, including how it differs from allowInvalid: true.

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

5
const skuValidator = (value: unknown, callback: (isValid: boolean) => void) => {
6
  callback(/^\d{6}$/.test(String(value)));
7
};
8

9
@Component({
10
  selector: 'example2-text-cell-type',
11
  standalone: true,
12
  imports: [HotTableModule],
13
  template: ` <div>
14
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
15
  </div>`,
16
})
17
export class AppComponent {
18

19
  readonly data = [
20
    { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },
21
    { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },
22
    { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },
23
    { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },
24
    { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },
25
  ];
26

27
  readonly gridSettings: GridSettings = {
28
    colHeaders: ['SKU', 'Supplier', 'Quantity'],
29
    height: 'auto',
30
    autoWrapRow: true,
31
    autoWrapCol: true,
32
    columns: [
33
      { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },
34
      { data: 'supplier', type: 'text' },
35
      { data: 'quantity', type: 'numeric' },
36
    ]
37
  };
38
}
39
/* end-file */
40

41

42

43
/* file: app.config.ts */
44
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
45
import { registerAllModules } from 'handsontable/registry';
46
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
47

48
// register Handsontable's modules
49
registerAllModules();
50

51
export const appConfig: ApplicationConfig = {
52
  providers: [
53
    provideZoneChangeDetection({ eventCoalescing: true }),
54
    {
55
      provide: HOT_GLOBAL_CONFIG,
56
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
57
    },
58
  ],
59
};
60
/* end-file */

1
<div>
2
  <example2-text-cell-type></example2-text-cell-type>
3
</div>

Result

After configuring the text cell type, cells display and edit their value as plain text, with no formatting or masking applied. Combine it with a custom validator to restrict which values a text cell accepts.