[data grid] Implement Search (equivalent Ctrl + F)

[oliviertassinari]

Summary 💡

Better search UX.

Motivation

Search is not to be confused with Quick filter: https://mui.com/x/react-data-grid/filtering/quick-filter/.
The problem with this feature is that you might want to search in context, seeing the rows next to the match might be important for the end-user use case.

Benchmark 🌈

• https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-dataeditor-demos--built-in-search

• https://airtable.com/

• Google spreadsheet

• Chrome

Context 🔦

Because of virtualization Ctrl+F is not working inside the data grid.

Having whatwg/html#2858 (comment) right in the browser would be amazing.

Thoughts

I would assume that the products that need this feature can already implement the feature on their own, so not something we need to prioritize building anytime soon (we are not blocking them).

One aspect that I'm curious about is how to do the server-side integration? I assume that this feature mostly makes sense when you have > 100 rows, where you are likely to query the server to fetch. The same is true for https://mui.com/x/react-data-grid/filtering/#quick-filter.

[flaviendelangle]

I think it's worth to link this issue in the doc

[flaviendelangle]

I would assume that the products that need this feature can already implement the feature on their own, so not something we need to prioritize building anytime soon (we are not blocking them).

We could probably help them a lot for client-side search just by exposing some internals of the quick filter
Something like getCellsMatchingFilterQuery: (query: string) => { id: GridRowId, field: string }[]