rowHeaders custom renderer

Tags: #<Tag:0x00007efc64600a88> #<Tag:0x00007efc646008f8>
#1

Hi,
I’m trying to render custom component as row Header. I’m using afterGetRowHeader property, but I’m not able to produce the button in the headers. I want the following component as the row Header.

export function Component(props: ComponentProps) {
if (!(props.date && props.func)) {
return null;
}
return (
<Button onClick={() => props.func(props.date)}
type=“link”
disabled={props.disabled}>
{props.date}

);
}

const myFunc = (val: string) => console.log(val);

afterGetRowHeader = {(row, TH) => {
TH = (<Component date={TH.textContent} func={myFunc})
}}
I’m using typescript with React. The Button in the Component is imported from ant design. Thanks

#2

Hi @rohithnaircn225

For the action elements within the cells and headers, you’d need to use our official event API. I recommend using the afterOnCellMouseDown hook (Reference in the documentation https://handsontable.com/docs/javascript-data-grid/api/hooks/#afteroncellmousedown). Here’s the demo for this use case https://stackblitz.com/edit/flaaou-fppz2i?file=index.js

There’s also an option to use native events if that suits you better https://stackblitz.com/edit/flaaou?file=index.js.

#3

Hi @aleksandra_budnik
I can now add the button as you shown in the example. How can I pass the onclick function to the button that can take the textcontent as its value when it is trggered.
For example, In the following code I’m rendering a button
<button class=${styles['adjustments-handsontable-button']} type="button" onclick='handleClick' value='${rec}'>${rec}</button>

const handleClick = (val: string) => console.log(val);
The handleClick is a function defined in my component which takes a param which is the rec in this case that is shown in above example. How can I do that? Thanks for assisting me.

#4

It is not straightforward. Handsontable might be stealing onclick eb=vents. Did you try to use afterOnCellMouseDown as in https://stackblitz.com/edit/flaaou-fppz2i?file=index.js using the event.target element to read from the value prop?

#5

I tried and it’s working fine, but in one scenario I want to track CheckboxChangeEvent but what I’m getting with the native event listener is mouseEvent. How can I change the logic in the following,
https://stackblitz.com/edit/flaaou?file=index.js so that I can get the CheckboxChangeEvent rather than mouseEvent. I’m using typescript so it’s should be CheckboxChangeEvent.

#6

Did you try to use the mousedown and condition check for event.target.checked;. You may need to save the previous state of the checkbox (true/false).

#7

I tried “change” event and able to get the value from there using event.target.checked. Thanks for your help. FYI the checkboxes are in the nested headers. when I select another checkbox the previous selected checkbox is unselected. If I want to save the previous states of all the checkboxes how can I
do it?

#8

The state of the checkbox is not automatically saved, but once the user checks a checkbox, it triggers the Handsontable rendering process. During that process Handsontable reads from the settings.

It means that each time the user selects a checkbox, you’d need to alter the array of headers within the updateSettings() call.

1 Like
#9