This page covers a non-latest version of Handsontable.

# Custom renderer in React

Overview
Example
Related articles
- Related guides
- Related API reference

# Overview

You can declare a custom renderer for the HotTable component by declaring it as a function in the Handsontable options or creating a rendering component.

# Example

The following example implements @handsontable/react with a custom renderer added. It takes an image URL as the input and renders the image in the edited cell.

import React from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { textRenderer } from 'handsontable/renderers/textRenderer';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const hotSettings = {
  data:
    [
      ['A1', 'https://handsontable.com/docs/12.0/img/examples/professional-javascript-developers-nicholas-zakas.jpg'],
      ['A2', 'https://handsontable.com/docs/12.0/img/examples/javascript-the-good-parts.jpg']
    ],
  columns: [
    {},
    {
      renderer(instance, td, row, col, prop, value, cellProperties) {
        const escaped = `${value}`;

        if (escaped.indexOf('http') === 0) {
          const img = document.createElement('IMG');
          img.src = value;

          img.addEventListener('mousedown', event => {
            event.preventDefault();
          });

          td.innerText = '';
          td.appendChild(img);

        } else {
          textRenderer.apply(this, arguments);
        }

        return td;
      }
    }
  ],
  colHeaders: true,
  rowHeights: 55,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
};

const App = () => {
  return (
    <div>
      <HotTable
        id="hot"
        settings={hotSettings}
      />
    </div>
  );
}

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

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

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

Cell renderer

← Custom editor in React Language change in React →