search

adazzle / react-data-grid

Feature-rich and customizable data grid React component
https://adazzle.github.io/react-data-grid/
Other
6.93k stars 2.18k forks source link

Columns are sorted when clicking header filters #3521

Open mordonez-me opened 4 months ago

mordonez-me commented 4 months ago

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

Additional context

The problem comes from this line https://github.com/adazzle/react-data-grid/blob/b667cec545666308ec59d74580b695e344380379/src/HeaderCell.tsx#L279

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:

https://github.com/adazzle/react-data-grid/assets/2242042/22030774-547d-4a86-8d5c-0079ae635c22

balaji-sivasakthi commented 1 month ago

Share Codepen link, I would be more helpful