Pinpoint specific cell to render a React component

Tags: #<Tag:0x00007fce71da7298> #<Tag:0x00007fce71da6ed8>

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?

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:

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?

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;