Comments (7)
Don't want to reopen this issue, but just wanted to point out that if RV supported "search" through some hooks like it does for sorting, it would make this a lot easier. Just adding an external search library is a lot harder than it sounds...
When you think through what the majority of users would expect from a search box, they expect it to work like pressing ctrl-f
in a browser; it searches the rendered text. In a table component, this means that the filtering should be done on the text returned from the cellRenderer
functions for each column. For example my raw dataset might contain unix timestamps as a number (seconds since epoc) but the cellRenderer formats it to "December 12th" (actually a properly i18n localized date). As an end user I should be able to search for "december".
So as a programmer to implement this correctly, you actually need to loop over all your data records and all your columns, get the cell renderer for each column, render the element, and extract the text.
This in itself isn't that bad I suppose, but a large part of RV is that it can handle very large data sets by not rendering them all. Now we are back to having to render them all... If RV had a hook for this, then RV could take care of only looping through records until it finds enough to fill the visible rendered rows. So if it's currently rendering 50 rows, it would only need to find the first 50 filtering results.
This would help a lot in keeping performance acceptable and making the end user experience as expected.
Just to clarify, I'm not saying RV should perform any filtering/searching, just saying it would be nice to have something like a callback function on the Column (like search
) where someone could specify whether or not this row should be included or filtered out.
If you look at the code for the venerable old datatables.net, it has a render( data, type, row, meta ) function and one of the parameters is type
, and that type will be one of ['filter', 'display', 'type', 'sort']
so when it needs to get the text value for rendering in the table, it calls render(..., 'display', ...)
and when it needs to get the value to filter on it calls render(..., 'filter', ...)
. This is convenient, but I don't really like the overloading of the same function...
RV could do something simpler and just have a cellFilterer
prop on Column
that defaults to () => true
but if specified, call it and if it returns a truthy value, add the row to to the result set.
Thinking through this more, another detriment to the proposed external search library is that now if I have 1000 records in an array, I have to filter them myself, perhaps into another 950 record array, to hand off to RV. There is no way to filter the data in place without duplicating the data.
from react-virtualized.
No. This isn't a search library.
Look at my response above though. I linked several such libraries.
from react-virtualized.
Hey @vgoklani,
No search functionality is built into react-virtualized but I have a few other libraries that do what you're looking for and can be used alongside react-virtualized.
- If you're using Redux, I suggest you check out redux-search
- If you're not using Redux and just want a plain JavaScript util then check out either js-worker-search (it's what redux-search uses under the hood) or js-search if you'd like something a little more configurable and full-featured.
from react-virtualized.
I'm going to close this issue so it doesn't clutter up the issues list but I'll keep monitoring it in case you have questions. :)
from react-virtualized.
great - thank you so much! This looks particularly nice: https://github.com/bvaughn/js-worker-search
from react-virtualized.
Thank you :D Happy to hear. Hope it works for you!
from react-virtualized.
has this changed at all? Is there any search utility in React-Virtualized?
from react-virtualized.
Related Issues (20)
- [Question] What are the criteria for determining the number of rows in a list?
- Your official website is blocked HOT 1
- Main link is broken HOT 1
- Access to Multigrid public method recomputeGridSize() returns undefined
- Version 9.22.5 is a ghost not visible in this repository?
- Height Issue after rendering
- Virtualisation fail ? Why invisible content is added to my list ?
- react18.2.0 HOT 1
- Tips for displaying a dropdown to overflow the React Virtualized container without being hidden?
- Failed to fetch dynamically
- The styles.css isn't part of the 9.23.0 version
- How to load JSON-formatted data virtually?
- TypeError : RegisterChild in WindowScroller
- Props ScrollElement of WindowScroller load every items if parent is InfiniteLoader HOT 2
- Autosizer component does not accept any refs or spread props.
- Change scrolling approach for Table component
- Table's data columns are not resized until scrolling the content [regression]
- `scrollToRow()` on `List` with `WindowScroller` not working HOT 2
- How to use search functionality similar to ctrl+f using react-virtualized HOT 1
- Rows with dynamic height overlap when using CellMeasurer HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-virtualized.