handsontable / handsontable

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
https://handsontable.com
Other
19.15k stars 2.94k forks source link

Improve UX for column filtering #10917

Closed budnix closed 3 weeks ago

budnix commented 1 month ago

Context

The PR improves the user experience for the column filtering feature. The PR adds the ability to filter the column values by typing the phrase in the "Search" input (accepting the filter will trim the filtered rows). The previous behavior allows only filtering items in the list box, so the user still had to check/uncheck the wanted or unwanted values.

Example of filtering all values except "E10"

Before

"Search" input is useless in this case. I need to uncheck unwanted values manually Kapture 2024-04-12 at 14 36 24

After

Just type the value that you want to keep in the "Search" input Kapture 2024-04-12 at 14 39 06

How has this been tested?

I tested the changes locally and I cover the feature with new tests.

Types of changes

Related issue(s):

  1. fixes https://github.com/handsontable/handsontable/issues/10454

Affected project(s):

Checklist:

github-actions[bot] commented 1 month ago

Launch the local version of documentation by running:

npm run docs:review cd104c0bea7524c3bcba0fe1d8ac0ee2fbef273e
magierg commented 3 weeks ago

fix verified with 0.0.0-next-0512c8e-20240419 : https://stackblitz.com/edit/vitejs-vite-rthayg?file=package.json