Custom Row Header but using regular cell

[hugh]

Hi,

I have already managed to implement custom row header using the rowHeaders then passing a function inside that. By the way, I’m still using React.

But we have decided to not use the pre-built row headers, but use a custom row header through a cell. Cause on my part, I will be putting a checkbox and name initials side by side inside a same cell (in this case, was put in the row header).

Actually, we have real assets (prototype designs) but I cannot show them to you for some reasons. So I just draw a sample out of it

I tried implementing that in the pre-built row header but I cannot select the checkbox separately, coz both checkbox and initial container are in the same row header box. So my plan is to separate them in their own column but visually, let them look like that they are just one, you know by hiding the line border or any strategy to do that would be awesome as well.

So to recap, just want to explain it more clearer:

1. First goal is to create 2 columns that will act as a row header, so meaning we will set the rowHeaders={false}.
2. The 1st column (all rows below it) will contain checkbox and the 2nd column (all rows below it) will have the user’s name initials.
3. The second goal is to merge those two columns and make them look as if they are inside one container.
4. This one is like of a question, how to implement single click on a cell, and select checkbox directly, cause right now i think we need to double click a cell in order to manipulate the elements inside it. And checkboxes should recognize single clicks.

I think those are main goals for this. By the way, if you have a more clever way of implementing these, please let me know. I’m open to ideas.

Thanks again for your help guys!

[aleksandra_budnik]

Hi @hugh

you are able to have two rowHeaders if you wish http://jsfiddle.net/nw5Leomb/
If you’d use cells and headers they do not have all the abilities, ex. row move. However, there is no official API to remove the border between them. However, you can try to do the same via CSS. I’ve made some progress here http://jsfiddle.net/gqwyn6a8/ but this is a matter of trying to cover all the elements.

This one is like of a question, how to implement single click on a cell, and select checkbox directly, cause right now i think we need to double click a cell in order to manipulate the elements inside it. And checkboxes should recognize single clicks.

you can use an afterGetColHeader hook https://handsontable.com/docs/7.4.2/Hooks.html#event:afterGetColHeader to track clicks on those headers and change their values (eg. check the checkbox)

[hugh]

Hi @aleksandra_budnik ,

Thank you for that wonderful solution. I will test and improve it based on our needs then I will update you.

By the way, side question, is it possible to add a checkbox inside the corner column header?

[hugh]

Hi again @aleksandra_budnik,

Everything seems to be working. However, every time I update the state or scroll the selected checkbox reverts to uncheck. How can we set the checkbox checked (if it has been checked) even if after updating state (data, etc) or even after scroll?

Thank you!

[aleksandra_budnik]

By the way, side question, is it possible to add a checkbox inside the corner column header?

There is no official API and by CSS you can only attach text, here’s an example http://jsfiddle.net/t7w4b5ao/

However, every time I update the state or scroll the selected checkbox reverts to uncheck.

Scroll and edition causes the table to rerender, and to call the afterGetColHeader hook again. The hook gets the values out of the settings. It means that each time some changes the checkbox in the header you need to update that header via updateSettings() method.

[hugh]

Hi @aleksandra_budnik,

Thank you for your reply.