React Data GridCheckbox cell type

Create interactive elements that can be checked or unchecked, by using the checkbox cell type.

Overview
Checkbox true/false values
Checkbox template
Checkbox labels
Related keyboard shortcuts
Related articles
- Related guides
- Related API reference

Overview

Data in these cells will be rendered as a checkbox and you can easily change it by checking/unchecking the checkbox.

To check the box, use the mouse or press Space or Enter.

To uncheck the box, use the mouse or press Space, Enter, Delete or Backspace.

You can change the state of multiple cells at once by selecting the cells you want to change and pressing Space.

Checkbox true/false values

This is the default usage scenario where column data has a true or false value, and we only want to display checkboxes.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "14.6",
    "@handsontable/react": "14.6"
  },
  
  "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"></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';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        {
          car: 'Mercedes A 160',
          year: 2017,
          available: true,
          comesInBlack: 'yes',
        },
        {
          car: 'Citroen C4 Coupe',
          year: 2018,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'Audi A4 Avant',
          year: 2019,
          available: true,
          comesInBlack: 'no',
        },
        {
          car: 'Opel Astra',
          year: 2020,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'BMW 320i Coupe',
          year: 2021,
          available: false,
          comesInBlack: 'no',
        },
      ]}
      colHeaders={['Car model', 'Year of manufacture', 'Available']}
      height="auto"
      columns={[
        {
          data: 'car',
        },
        {
          data: 'year',
          type: 'numeric',
        },
        {
          data: 'available',
          type: 'checkbox',
        },
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

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
      data={[
        {
          car: 'Mercedes A 160',
          year: 2017,
          available: true,
          comesInBlack: 'yes',
        },
        {
          car: 'Citroen C4 Coupe',
          year: 2018,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'Audi A4 Avant',
          year: 2019,
          available: true,
          comesInBlack: 'no',
        },
        {
          car: 'Opel Astra',
          year: 2020,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'BMW 320i Coupe',
          year: 2021,
          available: false,
          comesInBlack: 'no',
        },
      ]}
      colHeaders={['Car model', 'Year of manufacture', 'Available']}
      height="auto"
      columns={[
        {
          data: 'car',
        },
        {
          data: 'year',
          type: 'numeric',
        },
        {
          data: 'available',
          type: 'checkbox',
        },
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};



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

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.6/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@14.6/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

If you want to use values other than true and false, you have to provide this information using checkedTemplate and uncheckedTemplate. Handsontable will then update your data using the appropriate template.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "14.6",
    "@handsontable/react": "14.6"
  },
  
  "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"></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';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        {
          car: 'Mercedes A 160',
          year: 2017,
          available: true,
          comesInBlack: 'yes',
        },
        {
          car: 'Citroen C4 Coupe',
          year: 2018,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'Audi A4 Avant',
          year: 2019,
          available: true,
          comesInBlack: 'no',
        },
        {
          car: 'Opel Astra',
          year: 2020,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'BMW 320i Coupe',
          year: 2021,
          available: false,
          comesInBlack: 'no',
        },
      ]}
      colHeaders={['Car model', 'Year of manufacture', 'Comes in black']}
      height="auto"
      columns={[
        {
          data: 'car',
        },
        {
          data: 'year',
          type: 'numeric',
        },
        {
          data: 'comesInBlack',
          type: 'checkbox',
          checkedTemplate: 'yes',
          uncheckedTemplate: 'no',
        },
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

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
      data={[
        {
          car: 'Mercedes A 160',
          year: 2017,
          available: true,
          comesInBlack: 'yes',
        },
        {
          car: 'Citroen C4 Coupe',
          year: 2018,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'Audi A4 Avant',
          year: 2019,
          available: true,
          comesInBlack: 'no',
        },
        {
          car: 'Opel Astra',
          year: 2020,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'BMW 320i Coupe',
          year: 2021,
          available: false,
          comesInBlack: 'no',
        },
      ]}
      colHeaders={['Car model', 'Year of manufacture', 'Comes in black']}
      height="auto"
      columns={[
        {
          data: 'car',
        },
        {
          data: 'year',
          type: 'numeric',
        },
        {
          data: 'comesInBlack',
          type: 'checkbox',
          checkedTemplate: 'yes',
          uncheckedTemplate: 'no',
        },
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};



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

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.6/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@14.6/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example2" class="hot "></div>

Checkbox labels

To add a label to the checkbox, use the label option. You can declare where the label will be injected with this option - either before or after the checkbox element. You can also declare from which data source the label text will be updated.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "14.6",
    "@handsontable/react": "14.6"
  },
  
  "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"></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';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        {
          car: 'Mercedes A 160',
          year: 2017,
          available: true,
          comesInBlack: 'yes',
        },
        {
          car: 'Citroen C4 Coupe',
          year: 2018,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'Audi A4 Avant',
          year: 2019,
          available: true,
          comesInBlack: 'no',
        },
        {
          car: 'Opel Astra',
          year: 2020,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'BMW 320i Coupe',
          year: 2021,
          available: false,
          comesInBlack: 'no',
        },
      ]}
      colHeaders={['Car model', 'Accepted', 'Comes in black']}
      height="auto"
      columns={[
        {
          data: 'car',
        },
        {
          data: 'available',
          type: 'checkbox',
          label: {
            position: 'after',
            property: 'car',
          },
        },
        {
          data: 'comesInBlack',
          type: 'checkbox',
          checkedTemplate: 'yes',
          uncheckedTemplate: 'no',
          label: {
            position: 'before',
            value: 'In black? ',
          },
        },
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

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
      data={[
        {
          car: 'Mercedes A 160',
          year: 2017,
          available: true,
          comesInBlack: 'yes',
        },
        {
          car: 'Citroen C4 Coupe',
          year: 2018,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'Audi A4 Avant',
          year: 2019,
          available: true,
          comesInBlack: 'no',
        },
        {
          car: 'Opel Astra',
          year: 2020,
          available: false,
          comesInBlack: 'yes',
        },
        {
          car: 'BMW 320i Coupe',
          year: 2021,
          available: false,
          comesInBlack: 'no',
        },
      ]}
      colHeaders={['Car model', 'Accepted', 'Comes in black']}
      height="auto"
      columns={[
        {
          data: 'car',
        },
        {
          data: 'available',
          type: 'checkbox',
          label: {
            position: 'after',
            property: 'car',
          },
        },
        {
          data: 'comesInBlack',
          type: 'checkbox',
          checkedTemplate: 'yes',
          uncheckedTemplate: 'no',
          label: {
            position: 'before',
            value: 'In black? ',
          },
        },
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};



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

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.6/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@14.6/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example3" class="hot "></div>

Windows	macOS	Action	Excel	Sheets
`Space`	`Space`	Check or uncheck the checkbox	✗	✓
`Enter`	`Enter`	Check or uncheck the checkbox	✗	✓
`Delete`	`Delete`	Uncheck the checkbox	✗	✓
`Backspace`	`Backspace`	Uncheck the checkbox	✗	✓

Cell type