React Data Grid Autocomplete cell type

Table of contents

• Overview
• Autocomplete flexible mode
• Autocomplete strict mode
• Autocomplete strict mode (Ajax)
• Related articles
  • Related guides
  • Related API reference

Overview

The autocomplete cell type enables the user to choose a suggested option while typing. Autocomplete can be configured in three different ways, flexible mode, strict mode, and strict mode using Ajax.

Autocomplete flexible mode

This example uses the autocomplete feature in the default flexible mode. In this mode, the user can choose one of the suggested options while typing or enter a custom value that is not included in the suggestions.

import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); const ExampleComponent = () => { const colors = ['yellow', 'red', 'orange and another color', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan' ]; return ( <HotTable licenseKey="non-commercial-and-evaluation" data={[ ['BMW', 2017, 'black', 'black'], ['Nissan', 2018, 'blue', 'blue'], ['Chrysler', 2019, 'yellow', 'black'], ['Volvo', 2020, 'white', 'gray'] ]} colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']} columns={[{ type: 'autocomplete', source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'], strict: false }, { type: 'numeric' }, { type: 'autocomplete', source: colors, strict: false, visibleRows: 4 }, { type: 'autocomplete', source: colors, strict: false, trimDropdown: false } ]} /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script> <div id="example1" class="hot "></div>

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const colors = ['yellow', 'red', 'orange and another color', 'green',
    'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'
  ];

  return (
    <HotTable
      licenseKey="non-commercial-and-evaluation"
      data={[
        ['BMW', 2017, 'black', 'black'],
        ['Nissan', 2018, 'blue', 'blue'],
        ['Chrysler', 2019, 'yellow', 'black'],
        ['Volvo', 2020, 'white', 'gray']
      ]}
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
      columns={[{
          type: 'autocomplete',
          source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
          strict: false
        },
        { type: 'numeric' },
        {
          type: 'autocomplete',
          source: colors,
          strict: false,
          visibleRows: 4
        },
        {
          type: 'autocomplete',
          source: colors,
          strict: false,
          trimDropdown: false
        }
      ]}
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));

Autocomplete strict mode

This is the same example as above, the difference being that autocomplete now runs in strict mode. In this mode, the autocomplete cells will only accept values that are defined in the source array. The mouse and keyboard bindings are identical to the Handsontable cell type but with the differences below:

• If there is at least one option visible, there always is a selection in HOT-in-HOT
• When the first row is selected, pressing Arrow Up does not deselect HOT-in-HOT. Instead, it behaves as the Enter key but moves the selection in the main HOT upwards

In strict mode, the allowInvalid option determines the behaviour in the case of manual user input:

• allowInvalid: true optional - allows manual input of a value that does not exist in the source, the field background is highlighted in red, and the selection advances to the next cell
• allowInvalid: false - does not allow manual input of a value that does not exist in the source, the Enter key is ignored, and the editor field remains open

import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); const ExampleComponent = () => { const colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan' ]; const cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo']; return ( <HotTable licenseKey="non-commercial-and-evaluation" data={[ ['BMW', 2017, 'black', 'black'], ['Nissan', 2018, 'blue', 'blue'], ['Chrysler', 2019, 'yellow', 'black'], ['Volvo', 2020, 'white', 'gray'] ]} colHeaders={['Car<br>(allowInvalid true)', 'Year', 'Chassis color<br>(allowInvalid false)', 'Bumper color<br>(allowInvalid true)']} columns={[{ type: 'autocomplete', source: cars, strict: true // allowInvalid: true // true is default }, {}, { type: 'autocomplete', source: colors, strict: true, allowInvalid: false }, { type: 'autocomplete', source: colors, strict: true, allowInvalid: true //true is default } ]} /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example2')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script> <div id="example2" class="hot "></div>

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const colors = ['yellow', 'red', 'orange', 'green', 'blue',
    'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'
  ];
  const cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];

  return (
    <HotTable
      licenseKey="non-commercial-and-evaluation"
      data={[
        ['BMW', 2017, 'black', 'black'],
        ['Nissan', 2018, 'blue', 'blue'],
        ['Chrysler', 2019, 'yellow', 'black'],
        ['Volvo', 2020, 'white', 'gray']
      ]}
      colHeaders={['Car<br>(allowInvalid true)', 'Year', 'Chassis color<br>(allowInvalid false)',
        'Bumper color<br>(allowInvalid true)']}
      columns={[{
          type: 'autocomplete',
          source: cars,
          strict: true
          // allowInvalid: true // true is default
        },
        {},
        {
          type: 'autocomplete',
          source: colors,
          strict: true,
          allowInvalid: false
        },
        {
          type: 'autocomplete',
          source: colors,
          strict: true,
          allowInvalid: true //true is default
        }
      ]}
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));

Autocomplete strict mode (Ajax)

Autocomplete can also be used with Ajax data sources. In the example below, suggestions for the "Car" column are loaded from the server. To load data from a remote asynchronous source, assign a function to the 'source' property. The function should perform the server-side request and call the callback function when the result is available.

import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); const ExampleComponent = () => { return ( <HotTable licenseKey="non-commercial-and-evaluation" data={[ ['BMW', 2017, 'black', 'black'], ['Nissan', 2018, 'blue', 'blue'], ['Chrysler', 2019, 'yellow', 'black'], ['Volvo', 2020, 'white', 'gray'] ]} colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']} licenseKey="non-commercial-and-evaluation" columns={[{ type: 'autocomplete', source(query, process) { fetch('https://handsontable.com/docs/12.1/scripts/json/autocomplete.json') .then(response => response.json()) .then(response => process(response.data)); }, strict: true }, {}, // Year is a default text column {}, // Chassis color is a default text column {} // Bumper color is a default text column ]} /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example3')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script> <div id="example3" class="hot "></div>

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      licenseKey="non-commercial-and-evaluation"
      data={[
        ['BMW', 2017, 'black', 'black'],
        ['Nissan', 2018, 'blue', 'blue'],
        ['Chrysler', 2019, 'yellow', 'black'],
        ['Volvo', 2020, 'white', 'gray']
      ]}
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
      licenseKey="non-commercial-and-evaluation"
      columns={[{
          type: 'autocomplete',
          source(query, process) {
            fetch('https://handsontable.com/docs/12.1/scripts/json/autocomplete.json')
                    .then(response => response.json())
                    .then(response => process(response.data));
          },
          strict: true
        },
        {}, // Year is a default text column
        {}, // Chassis color is a default text column
        {} // Bumper color is a default text column
      ]}
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));

Related articles

Related guides

• Cell type
• Dropdown cell type
• Select cell type

Related API reference

• Configuration options:
  • allowHtml
  • filteringCaseSensitive
  • sortByRelevance
  • source
  • strict
  • trimDropdown
  • type
  • visibleRows
• Core methods:
  • getCellMeta()
  • getCellMetaAtRow()
  • getCellsMeta()
  • getDataType()
  • setCellMeta()
  • setCellMetaObject()
  • removeCellMeta()
• Hooks:
  • afterGetCellMeta
  • afterSetCellMeta
  • beforeGetCellMeta
  • beforeSetCellMeta