React Data Grid Conditional formatting

Overview
Example of conditional formatting
Related articles
- Related guides
- Related API reference

Overview

Conditional formatting can be used to set the font, color, typeface, etc., for cell content and can also be used to format the style of a cell, all based on a predefined set of criteria.

Example of conditional formatting

This demo shows how to use the cell type renderer feature to make some conditional formatting:

The first row is read-only and formatted as bold green text.
All cells in the Nissan column are formatted as italic text.
Empty cells are formatted with a silver background.
Negative numbers are formatted as red text.

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 data = [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
    ['2017', -5, '', 12, 13],
    ['2018', '', -11, 14, 13],
    ['2019', '', 15, -12, 'readOnly']
  ];

  function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.fontWeight = 'bold';
    td.style.color = 'green';
    td.style.background = '#CEC';
  }

  function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    // if row contains negative number
    if (parseInt(value, 10) < 0) {
      // add class "negative"
      td.className = 'make-me-red';
    }

    if (!value || value === '') {
      td.style.background = '#EEE';

    } else {
      if (value === 'Nissan') {
        td.style.fontStyle = 'italic';
      }

      td.style.background = '';
    }
  }
  //  maps function to a lookup string
  Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

  return (
    <HotTable
      data={data}
      licenseKey="non-commercial-and-evaluation"
      height="auto"
      afterSelection={function(row, col, row2, col2) {
        const meta = this.getCellMeta(row2, col2);

        if (meta.readOnly) {
        this.updateSettings({ fillHandle: false });

        } else {
          this.updateSettings({ fillHandle: true });
        }
      }}
      cells={function(row, col) {
        const cellProperties = {};
        const data = this.instance.getData();

        if (row === 0 || data[row] && data[row][col] === 'readOnly') {
        cellProperties.readOnly = true; // make cell read-only if it is first row or the text reads 'readOnly'
        }

        if (row === 0) {
          cellProperties.renderer = firstRowRenderer; // uses function directly

        } else {
          cellProperties.renderer = 'negativeValueRenderer'; // uses lookup map
        }

        return cellProperties;
      }}
    />
  );
};

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 data = [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
    ['2017', -5, '', 12, 13],
    ['2018', '', -11, 14, 13],
    ['2019', '', 15, -12, 'readOnly']
  ];

  function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.fontWeight = 'bold';
    td.style.color = 'green';
    td.style.background = '#CEC';
  }

  function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    // if row contains negative number
    if (parseInt(value, 10) < 0) {
      // add class "negative"
      td.className = 'make-me-red';
    }

    if (!value || value === '') {
      td.style.background = '#EEE';

    } else {
      if (value === 'Nissan') {
        td.style.fontStyle = 'italic';
      }

      td.style.background = '';
    }
  }
  //  maps function to a lookup string
  Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

  return (
    <HotTable
      data={data}
      licenseKey="non-commercial-and-evaluation"
      height="auto"
      afterSelection={function(row, col, row2, col2) {
        const meta = this.getCellMeta(row2, col2);

        if (meta.readOnly) {
        this.updateSettings({ fillHandle: false });

        } else {
          this.updateSettings({ fillHandle: true });
        }
      }}
      cells={function(row, col) {
        const cellProperties = {};
        const data = this.instance.getData();

        if (row === 0 || data[row] && data[row][col] === 'readOnly') {
        cellProperties.readOnly = true; // make cell read-only if it is first row or the text reads 'readOnly'
        }

        if (row === 0) {
          cellProperties.renderer = firstRowRenderer; // uses function directly

        } else {
          cellProperties.renderer = 'negativeValueRenderer'; // uses lookup map
        }

        return cellProperties;
      }}
    />
  );
};

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

Formatting cells

Configuration options:
Plugins:
- CustomBorders

← Merge cells Text alignment →