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
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
// register Handsontable's modules
4
registerAllModules();
5
const ExampleComponent = () => {
6
    return (<HotTable data={[
7
            { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },
8
            { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },
9
            { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },
10
            { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },
11
            { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },
12
        ]} colHeaders={['SKU', 'Category code', 'Quantity', 'Unit price ($)']} height="auto" autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation" columns={[
13
            { data: 'sku', type: 'text' },
14
            { data: 'category', type: 'text' },
15
            { data: 'quantity', type: 'numeric' },
16
            { data: 'unitPrice', type: 'numeric' },
17
        ]}/>);
18
};
19
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },
12
        { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },
13
        { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },
14
        { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },
15
        { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },
16
      ]}
17
      colHeaders={['SKU', 'Category code', 'Quantity', 'Unit price ($)']}
18
      height="auto"
19
      autoWrapRow={true}
20
      autoWrapCol={true}
21
      licenseKey="non-commercial-and-evaluation"
22
      columns={[
23
        { data: 'sku', type: 'text' },
24
        { data: 'category', type: 'text' },
25
        { data: 'quantity', type: 'numeric' },
26
        { data: 'unitPrice', type: 'numeric' },
27
      ]}
28
    />
29
  );
30
};
31

32
export default ExampleComponent;

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
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
// register Handsontable's modules
4
registerAllModules();
5
const skuValidator = (value, callback) => {
6
    callback(/^\d{6}$/.test(value));
7
};
8
const ExampleComponent = () => {
9
    return (<HotTable data={[
10
            { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },
11
            { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },
12
            { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },
13
            { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },
14
            { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },
15
        ]} colHeaders={['SKU', 'Supplier', 'Quantity']} height="auto" autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation" columns={[
16
            { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },
17
            { data: 'supplier', type: 'text' },
18
            { data: 'quantity', type: 'numeric' },
19
        ]}/>);
20
};
21
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

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

11
const ExampleComponent = () => {
12
  return (
13
    <HotTable
14
      data={[
15
        { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },
16
        { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },
17
        { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },
18
        { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },
19
        { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },
20
      ]}
21
      colHeaders={['SKU', 'Supplier', 'Quantity']}
22
      height="auto"
23
      autoWrapRow={true}
24
      autoWrapCol={true}
25
      licenseKey="non-commercial-and-evaluation"
26
      columns={[
27
        { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },
28
        { data: 'supplier', type: 'text' },
29
        { data: 'quantity', type: 'numeric' },
30
      ]}
31
    />
32
  );
33
};
34

35
export default ExampleComponent;

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.