How to set a custom cell renderer with Handsontable React?

Getting help Questions
1

Hi there,

I am trying to use a custom cell renderer with Handsontable React but it must be a specific cell and column which has that cell renderer. Cell renderers like date or autocomplete exist within Handsontable but I cannot find them when using with react.

Without react I am usually doing
function firstRowRenderer(instance, td, row, col, prop2, value, cellProperties) {
HandsonTable.renderers.AutocompleteRenderer.apply(this, arguments);
…}

How to do with React?

Thanks, Philip

2

Hi @philip368320

Below is an example including custom renderer made from NumericRenderer

export function percentRenderer(instance, td, row, col, prop, value, cellProperties) {
  td.style.fontWeight = 'bold';
  td.style.background = '#c0c0c0';
  cellProperties.type = 'numeric';
  cellProperties.format = '0.[00]%';

  Handsontable.renderers.NumericRenderer.apply(this, arguments);
}

class App extends Component {
  render() {
    return (

      <div>
              <HotTable
                data={[[0.55,0.23,0.598], [1.44,5.78,6.96]]}
                contextMenu={true}
                colHeaders={true}
                dropdownMenu={true}
                allowEmpty={false}
                renderer={percentRenderer}
              />
      </div>

    );
  }
}
3

One more question, where i can get the Handsontable class to apply renderers if i using react wrapper?

4

Hi @tmmgn1337

Sorry for a delay.

Have you already moved the project further? If not I’ll ask our React developer for help.