React Data GridAutocomplete cell type

Collect user input with a list of choices, by using the autocomplete cell type.

Overview
Autocomplete flexible mode
Autocomplete strict mode
Autocomplete strict mode (Ajax)
The source option
- Array of values
- Array of objects
Related articles
- Related guides
- Related API reference

Overview

You can edit the autocomplete-typed cells in three different ways:

Flexible mode
Strict mode
Strict mode using Ajax

In all three modes, the source option can be provided in two formats:

An array of values
An array of objects with key and value properties

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.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^3.0.0",
    "handsontable": "16.1",
    "@handsontable/react-wrapper": "16.1"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root" class=""></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.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
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      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,
        },
      ]}
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.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
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      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,
        },
      ]}
    />
  );
};



const container = document.getElementById("example1");
const root = ReactDOM.createRoot(container);
container._reactRoot = root;
root.render(<ExampleComponent />);

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/ht-theme-main.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@16.1/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/fixer.js"></script>

<div id="example1" class="hot docs-height-small"></div>

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

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^3.0.0",
    "handsontable": "16.1",
    "@handsontable/react-wrapper": "16.1"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root" class=""></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.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
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      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
        },
      ]}
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.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
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      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
        },
      ]}
    />
  );
};



const container = document.getElementById("example2");
const root = ReactDOM.createRoot(container);
container._reactRoot = root;
root.render(<ExampleComponent />);

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/ht-theme-main.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@16.1/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/fixer.js"></script>

<div id="example2" class="hot docs-height-large"></div>

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.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^3.0.0",
    "handsontable": "16.1",
    "@handsontable/react-wrapper": "16.1"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root" class=""></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      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(_query, process) {
            fetch('https://handsontable.com/docs/16.1/scripts/json/autocomplete.json')
              .then((response) => response.json())
              .then((response) => process(response.data));
          },
          strict: true,
        },
        {},
        {},
        {}, // Bumper color is a default text column
      ]}
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      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(_query, process) {
            fetch('https://handsontable.com/docs/16.1/scripts/json/autocomplete.json')
              .then((response) => response.json())
              .then((response) => process(response.data));
          },
          strict: true,
        },
        {},
        {},
        {}, // Bumper color is a default text column
      ]}
    />
  );
};



const container = document.getElementById("example3");
const root = ReactDOM.createRoot(container);
container._reactRoot = root;
root.render(<ExampleComponent />);

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/ht-theme-main.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@16.1/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/fixer.js"></script>

<div id="example3" class="hot docs-height-small"></div>

The `source` option

The source option can be provided in two formats:

Array of values

You can provide the source option as an array of values that will be used as the autocomplete suggestions.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^3.0.0",
    "handsontable": "16.1",
    "@handsontable/react-wrapper": "16.1"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root" class=""></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const shipmentKVData = [
    ['Electronics and Gadgets', 'Los Angeles International Airport'],
    ['Medical Supplies', 'John F. Kennedy International Airport'],
    ['Auto Parts', "Chicago O'Hare International Airport"],
    ['Fresh Produce', 'London Heathrow Airport'],
    ['Textiles', 'Charles de Gaulle Airport'],
    ['Industrial Equipment', 'Dubai International Airport'],
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
    ['Consumer Goods', 'Beijing Capital International Airport'],
    ['Machine Parts', 'Singapore Changi Airport'],
    ['Food Products', 'Amsterdam Airport Schiphol'],
  ];

  const airportKVData = [
    'Los Angeles International Airport',
    'John F. Kennedy International Airport',
    "Chicago O'Hare International Airport",
    'London Heathrow Airport',
    'Charles de Gaulle Airport',
    'Dubai International Airport',
    'Tokyo Haneda Airport',
    'Beijing Capital International Airport',
    'Singapore Changi Airport',
    'Amsterdam Airport Schiphol',
    'Frankfurt Airport',
    'Seoul Incheon International Airport',
    'Toronto Pearson International Airport',
    'Madrid-Barajas Airport',
    'Bangkok Suvarnabhumi Airport',
    'Munich International Airport',
    'Sydney Kingsford Smith Airport',
    'Barcelona-El Prat Airport',
    'Kuala Lumpur International Airport',
    'Zurich Airport',
  ];

  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={shipmentKVData}
      columns={[
        {
          title: 'Shipment',
        },
        {
          type: 'autocomplete',
          source: airportKVData,
          title: 'Airport',
        },
      ]}
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const shipmentKVData = [
    ['Electronics and Gadgets', 'Los Angeles International Airport'],
    ['Medical Supplies', 'John F. Kennedy International Airport'],
    ['Auto Parts', "Chicago O'Hare International Airport"],
    ['Fresh Produce', 'London Heathrow Airport'],
    ['Textiles', 'Charles de Gaulle Airport'],
    ['Industrial Equipment', 'Dubai International Airport'],
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
    ['Consumer Goods', 'Beijing Capital International Airport'],
    ['Machine Parts', 'Singapore Changi Airport'],
    ['Food Products', 'Amsterdam Airport Schiphol'],
  ];

  const airportKVData = [
    'Los Angeles International Airport',
    'John F. Kennedy International Airport',
    "Chicago O'Hare International Airport",
    'London Heathrow Airport',
    'Charles de Gaulle Airport',
    'Dubai International Airport',
    'Tokyo Haneda Airport',
    'Beijing Capital International Airport',
    'Singapore Changi Airport',
    'Amsterdam Airport Schiphol',
    'Frankfurt Airport',
    'Seoul Incheon International Airport',
    'Toronto Pearson International Airport',
    'Madrid-Barajas Airport',
    'Bangkok Suvarnabhumi Airport',
    'Munich International Airport',
    'Sydney Kingsford Smith Airport',
    'Barcelona-El Prat Airport',
    'Kuala Lumpur International Airport',
    'Zurich Airport',
  ];

  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={shipmentKVData}
      columns={[
        {
          title: 'Shipment',
        },
        {
          type: 'autocomplete',
          source: airportKVData,
          title: 'Airport',
        },
      ]}
    />
  );
};



const container = document.getElementById("example4");
const root = ReactDOM.createRoot(container);
container._reactRoot = root;
root.render(<ExampleComponent />);

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/ht-theme-main.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@16.1/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/fixer.js"></script>

<div id="example4" class="hot docs-height-small"></div>

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const shipmentKVData = [
    ['Electronics and Gadgets', 'Los Angeles International Airport'],
    ['Medical Supplies', 'John F. Kennedy International Airport'],
    ['Auto Parts', "Chicago O'Hare International Airport"],
    ['Fresh Produce', 'London Heathrow Airport'],
    ['Textiles', 'Charles de Gaulle Airport'],
    ['Industrial Equipment', 'Dubai International Airport'],
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
    ['Consumer Goods', 'Beijing Capital International Airport'],
    ['Machine Parts', 'Singapore Changi Airport'],
    ['Food Products', 'Amsterdam Airport Schiphol'],
  ];

  const airportKVData = [
    'Los Angeles International Airport',
    'John F. Kennedy International Airport',
    "Chicago O'Hare International Airport",
    'London Heathrow Airport',
    'Charles de Gaulle Airport',
    'Dubai International Airport',
    'Tokyo Haneda Airport',
    'Beijing Capital International Airport',
    'Singapore Changi Airport',
    'Amsterdam Airport Schiphol',
    'Frankfurt Airport',
    'Seoul Incheon International Airport',
    'Toronto Pearson International Airport',
    'Madrid-Barajas Airport',
    'Bangkok Suvarnabhumi Airport',
    'Munich International Airport',
    'Sydney Kingsford Smith Airport',
    'Barcelona-El Prat Airport',
    'Kuala Lumpur International Airport',
    'Zurich Airport',
  ];

  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={shipmentKVData}
      columns={[
        {
          title: 'Shipment',
        },
        {
          type: 'autocomplete',
          source: airportKVData,
          title: 'Airport',
        },
      ]}
    />
  );
};

export default ExampleComponent;

Array of objects

You can provide the source option as an array of objects with key and value properties. The value property will be used as the autocomplete suggestion, while the entire object will be used as the value of the cell.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^3.0.0",
    "handsontable": "16.1",
    "@handsontable/react-wrapper": "16.1"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root" class=""></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const shipmentKVData = [
    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],
    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],
    ['Auto Parts', { key: 'ORD', value: "Chicago O'Hare International Airport" }],
    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],
    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],
    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],
    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],
    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],
    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],
    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],
  ];

  const airportKVData = [
    { key: 'LAX', value: 'Los Angeles International Airport' },
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
    { key: 'ORD', value: "Chicago O'Hare International Airport" },
    { key: 'LHR', value: 'London Heathrow Airport' },
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
    { key: 'DXB', value: 'Dubai International Airport' },
    { key: 'HND', value: 'Tokyo Haneda Airport' },
    { key: 'PEK', value: 'Beijing Capital International Airport' },
    { key: 'SIN', value: 'Singapore Changi Airport' },
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
    { key: 'FRA', value: 'Frankfurt Airport' },
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
    { key: 'MUC', value: 'Munich International Airport' },
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
    { key: 'ZRH', value: 'Zurich Airport' },
  ];

  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={shipmentKVData}
      columns={[
        {
          title: 'Shipment',
        },
        {
          type: 'autocomplete',
          source: airportKVData,
          title: 'Airport',
        },
      ]}
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const shipmentKVData = [
    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],
    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],
    ['Auto Parts', { key: 'ORD', value: "Chicago O'Hare International Airport" }],
    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],
    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],
    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],
    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],
    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],
    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],
    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],
  ];

  const airportKVData = [
    { key: 'LAX', value: 'Los Angeles International Airport' },
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
    { key: 'ORD', value: "Chicago O'Hare International Airport" },
    { key: 'LHR', value: 'London Heathrow Airport' },
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
    { key: 'DXB', value: 'Dubai International Airport' },
    { key: 'HND', value: 'Tokyo Haneda Airport' },
    { key: 'PEK', value: 'Beijing Capital International Airport' },
    { key: 'SIN', value: 'Singapore Changi Airport' },
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
    { key: 'FRA', value: 'Frankfurt Airport' },
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
    { key: 'MUC', value: 'Munich International Airport' },
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
    { key: 'ZRH', value: 'Zurich Airport' },
  ];

  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={shipmentKVData}
      columns={[
        {
          title: 'Shipment',
        },
        {
          type: 'autocomplete',
          source: airportKVData,
          title: 'Airport',
        },
      ]}
    />
  );
};



const container = document.getElementById("example5");
const root = ReactDOM.createRoot(container);
container._reactRoot = root;
root.render(<ExampleComponent />);

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/ht-theme-main.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@16.1/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/fixer.js"></script>

<div id="example5" class="hot docs-height-small"></div>

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const shipmentKVData = [
    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],
    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],
    ['Auto Parts', { key: 'ORD', value: "Chicago O'Hare International Airport" }],
    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],
    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],
    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],
    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],
    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],
    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],
    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],
  ];

  const airportKVData = [
    { key: 'LAX', value: 'Los Angeles International Airport' },
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
    { key: 'ORD', value: "Chicago O'Hare International Airport" },
    { key: 'LHR', value: 'London Heathrow Airport' },
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
    { key: 'DXB', value: 'Dubai International Airport' },
    { key: 'HND', value: 'Tokyo Haneda Airport' },
    { key: 'PEK', value: 'Beijing Capital International Airport' },
    { key: 'SIN', value: 'Singapore Changi Airport' },
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
    { key: 'FRA', value: 'Frankfurt Airport' },
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
    { key: 'MUC', value: 'Munich International Airport' },
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
    { key: 'ZRH', value: 'Zurich Airport' },
  ];

  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      data={shipmentKVData}
      columns={[
        {
          title: 'Shipment',
        },
        {
          type: 'autocomplete',
          source: airportKVData,
          title: 'Airport',
        },
      ]}
    />
  );
};

export default ExampleComponent;

API methods

When working with object-based autocomplete data, you can use methods like getSourceData(), getSourceDataAtCell(), getSourceDataAtRow() etc., to get the data in its original object format with both key and value properties. The getData() method will return only the value property's value.

TIP

Note: When the source option is declared as an array of key + value objects, the data in the edited cell should also be an object with key + value properties.