React Component in Col Header

Tags: #<Tag:0x00007f8b1df97388>
#1

What I am aiming for is to render a react component into the last columns TH, with an onclick event.

I’ve seen this asked before in Custom header React topic.

The answer was to use HotColumns to render a React component in the tables header. However I looked over the documention linked to https://handsontable.com/docs/7.3.0/frameworks-wrapper-for-react-hot-column.html and can’t figure how to actually pass the component to the header rather than the cells.

So far i’ve managed a button but incorrect styling and no event, seemed like when I pass in the component directly into the headers or afterGetColHeader it takes the basic HTML element and ignores my react.

Using the HotColumn, the button renders correctly and with the click event working however I can’t pass it into title or see which prop would be an alternative. Currently I have it rendered inside the HotColumn so its displaying in the cells of the column, not what I need but proves the component does render correctly.

Let me know if you need more clarification on what I mean, any help would be great.

#2

Hi @farrah,
HotColumn component allows only to pass configurations for cells which are related to this column (only title are related to the header). It’s a declarative version of defining columns option: https://handsontable.com/docs/8.2.0/Options.html#columns

As you noticed, using afterGetColHeader allows to manipulate HTML inside TH element but it’s detached from React lifecycle (adding support for the configurable headers’ renderers is in our plans).

To link elements added by afterGetColHeader with React app, it’s necessary to use beforeOnCellMouseDown hook. There you can call component’s methods with a proper context before Handsontable would process click event.
Here is a URL to the demo with the simplest implementation of these two hooks: https://codesandbox.io/s/declaring-a-custom-renderer-as-a-component-forked-yzm7q

Let us know if the above demo helped you to solve the issue.

#3

Thanks, going to give this a try now, let you know how I get along.

#4

I guess that I can close this issue as there’s no reply for 2 months.

@farrah f you still need some help please contact me at support@handsontable.com

#5