React Data Grid Formatting cells

Table of contents

• Overview
• Apply custom CSS class styles
• Apply inline styles
• Custom cell borders
• Related articles
  • Related guides
  • Related API reference

Overview

Handsontable utilizes the HTML table structure so customization is based either on referencing to the already existing elements, such as TR/TD, or by applying your own CSS classes to HTML elements.

A cell can be formatted either using a CSS class or with a style applied directly to the DOM element.

Apply custom CSS class styles

In this example, we add a custom class custom-cell to the cell in the top left corner and add a custom-table CSS class that highlights the table headers.

import Handsontable from 'handsontable'; 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={Handsontable.helper.createSpreadsheetData(5, 5)} rowHeaders={true} colHeaders={true} stretchH="all" className="custom-table" cell={[{ row: 0, col: 0, className: 'custom-cell', }, ]} height="auto" 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> td.custom-cell { color: #fff; background-color: #37bc6c; } .custom-table thead th:nth-child(even), .custom-table tbody tr:nth-child(odd) th { background-color: #d7f1e1; }

import Handsontable from 'handsontable';
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={Handsontable.helper.createSpreadsheetData(5, 5)}
      rowHeaders={true}
      colHeaders={true}
      stretchH="all"
      className="custom-table"
      cell={[{
        row: 0,
        col: 0,
        className: 'custom-cell',
      }, ]}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

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

td.custom-cell {
  color: #fff;
  background-color: #37bc6c;
}
.custom-table thead th:nth-child(even),
.custom-table tbody tr:nth-child(odd) th {
  background-color: #d7f1e1;
}

Apply inline styles

You can apply inline styles directly to the DOM element using its style property. You can use the renderer option to do that.

import Handsontable from 'handsontable'; 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 = () => { Handsontable .renderers .registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => { Handsontable.renderers.getRenderer('text')(hotInstance, TD, ...rest); TD.style.fontWeight = 'bold'; TD.style.color = 'green'; TD.style.background = '#d7f1e1'; }); return ( <HotTable data={Handsontable.helper.createSpreadsheetData(5, 5)} rowHeaders={true} colHeaders={true} stretchH="all" cell={[{ row: 0, col: 0, renderer: 'customStylesRenderer', }]} height="auto" 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 Handsontable from 'handsontable';
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 = () => {
  Handsontable
    .renderers
    .registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {
      Handsontable.renderers.getRenderer('text')(hotInstance, TD, ...rest);

      TD.style.fontWeight = 'bold';
      TD.style.color = 'green';
      TD.style.background = '#d7f1e1';
    });

  return (
    <HotTable
      data={Handsontable.helper.createSpreadsheetData(5, 5)}
      rowHeaders={true}
      colHeaders={true}
      stretchH="all"
      cell={[{
        row: 0,
        col: 0,
        renderer: 'customStylesRenderer',
      }]}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

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

Custom cell borders

To enable the custom borders feature, set the customBorders option. This can either be set as true or initialized as an array with a pre-defined setup. For the list of available settings and methods, visit the API reference.

In the names of the API properties, the words start and end refer to the starting and ending edges of the layout direction.

WARNING

The start and end properties used to be called left and right before Handsontable 12.0.0. The old names left and right work in the LTR layout direction but throw an error when the layout direction is set to RTL.

import Handsontable from 'handsontable'; 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={Handsontable.helper.createSpreadsheetData(5, 6)} rowHeaders={true} colHeaders={true} stretchH="all" height="auto" licenseKey="non-commercial-and-evaluation" customBorders={[{ range: { from: { row: 1, col: 1 }, to: { row: 3, col: 4 } }, top: { width: 2, color: '#5292F7' }, bottom: { width: 2, color: 'red' }, start: { width: 2, color: 'orange' }, end: { width: 2, color: 'magenta' } }, { row: 2, col: 2, start: { width: 2, color: 'red' }, end: { width: 1, color: 'green' } } ]} /> ); }; 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 Handsontable from 'handsontable';
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={Handsontable.helper.createSpreadsheetData(5, 6)}
      rowHeaders={true}
      colHeaders={true}
      stretchH="all"
      height="auto"
      licenseKey="non-commercial-and-evaluation"
      customBorders={[{
        range: {
          from: {
            row: 1,
            col: 1
          },
          to: {
            row: 3,
            col: 4
          }
        },
        top: {
          width: 2,
          color: '#5292F7'
        },
        bottom: {
          width: 2,
          color: 'red'
        },
        start: {
          width: 2,
          color: 'orange'
        },
        end: {
          width: 2,
          color: 'magenta'
        }
      },
        {
          row: 2,
          col: 2,
          start: {
            width: 2,
            color: 'red'
          },
          end: {
            width: 1,
            color: 'green'
          }
        }
      ]}
    />
  );
};

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

Related articles

Related guides

• Conditional formatting

Related API reference

• Configuration options:
  • activeHeaderClassName
  • className
  • commentedCellClassName
  • currentColClassName
  • currentHeaderClassName
  • currentRowClassName
  • customBorders
  • invalidCellClassName
  • noWordWrapClassName
  • placeholder
  • placeholderCellClassName
  • readOnlyCellClassName
  • tableClassName
• Plugins:
  • CustomBorders