React Data Grid Checkbox cell type

Table of contents

• 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 can be easily changed by checking/unchecking the checkbox.

Checking the box can be performed using a mouse, or by pressing Space or Enter.

Unchecking the box can be performed using a mouse, or by pressing 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.

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 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' } ]} licenseKey="non-commercial-and-evaluation" /> ); }; 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 = () => {
  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'
        }
      ]}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

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

Checkbox template

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.

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 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' } ]} licenseKey="non-commercial-and-evaluation" /> ); }; 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 = () => {
  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'
        }
      ]}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

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

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.

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 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' // Read value from row object }, }, { data: 'comesInBlack', type: 'checkbox', checkedTemplate: 'yes', uncheckedTemplate: 'no', label: { position: 'before', value: 'In black? ' }, }, ]} licenseKey="non-commercial-and-evaluation" /> ); }; 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
      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' // Read value from row object
          },
        },
        {
          data: 'comesInBlack',
          type: 'checkbox',
          checkedTemplate: 'yes',
          uncheckedTemplate: 'no',
          label: {
            position: 'before',
            value: 'In black? '
          },
        },
      ]}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

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

Related keyboard shortcuts

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	✗	✓

Related articles

Related guides

• Cell type

Related API reference

• Configuration options:
  • checkedTemplate
  • label
  • type
  • uncheckedTemplate
• Core methods:
  • getCellMeta()
  • getCellMetaAtRow()
  • getCellsMeta()
  • getDataType()
  • setCellMeta()
  • setCellMetaObject()
  • removeCellMeta()
• Hooks:
  • afterGetCellMeta
  • afterSetCellMeta
  • beforeGetCellMeta
  • beforeSetCellMeta