Columns are sorted when clicking header filters

[mordonez-me]

Describe the bug

To Reproduce

1. Create a header with a filter like the the [Header filters](example https://adazzle.github.io/react-data-grid/#/header-filters)
2. Enable sorting like in the [Columns reordering[(example https://adazzle.github.io/react-data-grid/#/columns-reordering)

Expected behavior

Not sort the column

Environment

• react-data-grid version: ^7.0.0-beta.44
• react/react-dom version: ^18.2.0

Additional context

The problem comes from this line

react-data-grid/src/HeaderCell.tsx

Line 279 in b667cec

onClick={onClick}

onClick is on top of everything so anything you put inside the header div will be activated as soon as you click the cell, even the filter which is inside the header renderer

Video:

Monosnap.screencast.2024-06-06.08-43-19.mp4

[balaji-sivasakthi]

Share Codepen link, It would be more helpful

[amanmahajan7]

Can you create a reproducible example?

[leeoniya]

@amanmahajan7 @nstepien we're having a similar issue/need.

we don't want the entire header cell to be clickable for sorting purposes, since there are additional buttons/controls in there for other things, such as pulling up a filter popup. it would be very useful to delegate what should trigger sorting to the user-supplied children of HeaderCell via a render prop or callback arg like doSort, or smth.

currently i think the only way to do this is by hackily binding listeners in the children with stopPropagation to prevent the built-in sort behavior (both click and keypress).

some flexibility here would be much appreciated.

i see there are some related issues with filters in header cells, so feels like it's not such an edge case:

• Columns are sorted when space key is down during typing in filters #3535
• fix: disable sorting of rows from header if interacting with input elements #3574

if this is already possible, please add a demo that shows how you recommend adding interactive elements to the header while also avoiding sorting.

thank you(s)!

example: