React components for efficiently rendering large lists and tabular data
React Virtualized helps to efficiently render large lists and tabular data by only rendering items that are visible.
Useful links:
Questions tagged [react-virtualized]
525 questions
3
votes
0 answers
Implementing filters on React Virtualized Table
Implementing filters on React Virtualized Infinite Loader.Every Time the filter is applied, the filtered data appends to the already rendered row instead of rendering the filtered data in the table.
Also Used Context API's to have a common source of…
NotSoTechie
- 31
- 1
- 2
3
votes
0 answers
React Virtualized Editable Rows
I am creating language flashcard software that relies on large lists of data. Some lists are editable (user created) and some are not (stock).
I need to have TextField Components in each TableCell. I am looking at the source code and it doesn't…
Michael Paccione
- 2,467
- 6
- 39
- 74
3
votes
1 answer
Unable to select item when using TextField (or Select) with react-window
When using TextField component as a Select field with a large data set (1000 items), there is noticeable delay when mounting / unmounting the list.
import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from…
Robert Hung
- 165
- 13
3
votes
0 answers
React Virtualized Grid + Infinite Loader + Cell Measurer
I'm trying to create quite a big grid (around 40 col, 1k+ rows - dynamic width) With a sticky header and infinite loader to append more rows. I've used it like in the examples, but when getting more rows performance falls drastically - probably…
mjanisz1
- 1,478
- 3
- 17
- 43
3
votes
2 answers
react virtualized auto sizer does not work
I have been trying this code and it just does not work.
With AutoSizer, Row does not gets rendered.
It only starts working when I remove AutoSizer from the code.
I don't know what is wrong with the code and the docs is not helping either.
Full…
JKhan
- 1,157
- 4
- 14
- 23
3
votes
0 answers
How Do I Correctly use CellMeasurer to set Table Column Width Based on the Content Length?
I'm trying to dynamically set the column width using CellMeasurer in a dynamic created Columns.
// hoping that CellMeasurer is what I needed to adjust
// width of my table columns, but not working.
const cellRenderer = ({ columnIndex, key, parent,…
Justin
- 91
- 6
3
votes
1 answer
react-virtualized , where to call forceUpdateGrid to update table data?
On sorting table data, I can't seem to call forceUpdateGrid to update table data as mentioned in the original docs
I am getting this error
'forceUpdateGrid' is not defined
I need to update table data when user clicks table header, currently it…
Engineer
- 1,243
- 11
- 18
3
votes
0 answers
React-Virtualized list with sticky headers
I'm trying to use react virtualized to render a list, but some of the elements in the list act as headers like
[Category 1,
item1,
item2
item3,
Category2,
item1,
item2,
item3]
I'd like to keep the current category stickied at the top of the…
user3586431
- 31
- 1
3
votes
1 answer
react-virtualized combined with WindowScroller and AutoSizer on large list does not render all items
I have a large list of more than 300 items. For better preformance I want to use react-virtualized and only render the currently visible items on the screen. For design reasons, I have to use the WindowScroller and depending on the screen size, the…
Radhad
- 125
- 1
- 6
3
votes
1 answer
defaultRowRenderer breaks jest unit test. ...Object. ... import createMultiSort
When I use defaultRowRenderer (method of react-virtualized for Table), jest unit-tests are failed with error:…
Artem
- 31
- 1
3
votes
0 answers
react-virtualized table changes cell color on update
I use react-virtualized Table to render data in real time.
render() {
...
return(
{({width}) => (
