Custom renderer in React

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/11.1/img/examples/professional-javascript-developers-nicholas-zakas.jpg'], ['A2', 'https://handsontable.com/docs/11.1/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@11.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.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@11.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/11.1/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/11.1/scripts/helpers.js"></script> <div id="example1" class="hot "></div>

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/11.1/img/examples/professional-javascript-developers-nicholas-zakas.jpg'],
      ['A2', 'https://handsontable.com/docs/11.1/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'));