[react] How could we add a component react to col header?

Tags: #<Tag:0x00007efc62062218>
#1

We are trying to insert a filter component ( react component ) to a column header like image below
image

But handsontable just support colHeaders option, it return a string, not a jsx component.

Thank for any help.

#2

Welcome @duongtranfu

Here’s Aleksandra from the Support Team.

Have you already read our tutorial on the HotColumn component https://handsontable.com/docs/8.0.0/frameworks-wrapper-for-react-hot-column.html? If will help you to create the filter in a column.

#3

Yeap, I read HotColumn component documents, But I wanna add filter component to header , HotColumn just support for cells

#4

Sorry for the ambiguity of my last comment. I should have mention that you can use HotColumn to create a component fake-header, as colHeaders are not compatible with that logic. However, if you need to use moving or sorting it won’t work.

using colHeaders and creating a custom component for a column is possible but requires additional logic.

1 Like
#5

It just work-around this issue, thank you anyway,

#6

I’m glad to hear that. Thank you for the update.

#7