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.
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.