How to implement custom CellType in React HotTable

Tags: #<Tag:0x00007efc6b46b310> #<Tag:0x00007efc6b46b018>
#1

Hi There,
Am unable to create custom CellType in React HotTable. Please let me know the proper syntax.

Thank you,
Sateesh

#2

Hi @sateesh

Here we have the documentation entry about creating the custom cell types: https://handsontable.com/docs/react-data-grid/cell-type/#register-custom-cell-type

Are you familiar with this instruction? Can you show us the exact problem you have?

#3

Hi @adrian.szymanski,

Thank you for the response. I have gone through doc earlier, unable to add the Handsontable reference “Handsontable.cellTypes.registerCellType”, in React, as I know we can use component, we can assign ref to it, form there we can update settings etc… but don’t know how to get Handsontable reference. Please let me know.

Thanks,
Sateesh

#4

Hi @sateesh

My colleague is out of the office so I wanted to speed things up here.

We will check this case and come back to you shortly.

#5

I just got an update from our developer.

If you use

import Handsontable from 'handsontable/base';

in you project then you should replace Handsontable.cellTypes.registerCellType with registerCellType and then provide an additional import

import { registerCellType } from 'handsontable/cellTypes'

we will be altering the Custom cell type tutorial to make it clear as now it lacks this information.

#6

Hi @aleksandra_budnik,

Thank you for the update,
I have tried this for create custom CellType in my react application.

registerCellType(‘email’,{
renderer: textRenderer,
className: ‘my-cell’,
readOnly: false
})
“registerCellType” imported from “import { registerCellType } from ‘handsontable/cellTypes’”
“textRenderer” imported from “import {textRenderer } from ‘handsontable/renderers’”
I can see the className to the cell, but when I type something, not reflecting, Please let me know If I miss something.
Thanks,
Sateesh

#7

Sorry for the delay in response, @sateesh I was out of the office and the forum did not send a notification to my colleague.

Is this issue still valid?