React - Custom Menu Dropdown In header

Tags: #<Tag:0x00007f8b23f55c98> #<Tag:0x00007f8b23f559c8>
#1

I am trying to implement a custom Menu dropdown in column header, its not like header context menu. I want both context menu as well as this menu dropdown. The issue is that none of the menu dropdown implemented are working or rendering the items, especially the ones using portal. I have tried various libraries this is using react-select. I cannot use basic select since I need custom styling for the items.

I tried using both afterGetColHeaders as well as

colHeaders={() => {
                        const str = renderToString(
                            <Dropdown/>
                        )
                        return str;
                  }}

export const colourOptions = [
    { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
    { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
    { value: 'purple', label: 'Purple', color: '#5243AA' },
];

export const Dropdown= () => (
    <Select
        className="basic-single"
        classNamePrefix="select"
        defaultValue={colourOptions[0]}
        name="color"
        options={colourOptions}
    />
);
#2

Hi @arnav.chauhan

Thank you for contacting us. Such modification should be done on a deeper level, most likely as a custom plugin in addition to the standard dropdown menu if you want to use both.

More straightforward styling modifications can be done with afterGetColHeader hook, but it wouldn’t handle the logic needed to build functional dropdown menu.

#3

Hi @adrian.szymanski

Thanks for the reply, is there a guide on how to implement this or an already implemented similar plugin which manipulates the UI of handsontable?

Another workaround I can think of is to use freezed rows and custom cell to freeze the first row and implement dropdown using custom cell render, cannot use the prebuilt dropdown since it selects the cell and only triggers on arrow click.

#4

Hi @arnav.chauhan

We don’t have guides for custom implementations or custom plugins building.

The workaround you described might work in this situation as with custom renderer you can create any element you want and attach the custom logic.

1 Like
#5