Pinpoint specific cell to render a React component

Tags: #<Tag:0x00007efc647ecae0> #<Tag:0x00007efc647ec8d8>
#1

Hi everyone, I am looking for a way to tell Handsontable to render a React component in a specific cell. As an example, I want a cell to render a switch from antd and use its props to handle events and change the app state. Is there an easy way to do this, or am I forced to use HotColumn?

#2

Hi @marlon_evangelista

Thank you for contacting us. In this case it would be the best to use our custom renderer. With React, you can also declare it as a component. Here’s more information on it: https://handsontable.com/docs/react-data-grid/cell-renderer/#declare-a-custom-renderer-as-a-component

#3

Thanks for the reply. The example shows how to set up React components for columns, but I only want to do it for a single cell. Is this possible?

#4

Yes, it’s possible. You can do this inside cells option, and restrict the renderer to chosen cell. Here’s sample code:

  cells: (row, col) => {
	const cellProp = {}
  
    if (col === 1 && row === 0) {
    cellProp.renderer = function(instance, td, row, col, prop, value, cellProperties) {          
      // custom renderer logic
    }
  }
  
  return cellProp;
},
#5