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
0
votes
1 answer
React virtualized-select custom options styles
I am using the virtualized-select React component. I would like to style the text and background color of the option while it is in the dropdown. For the simple code I have below, the search bar background is red, and the search bar background turns…
samuelli97
- 61
- 1
- 8
0
votes
1 answer
Prevent react-virtualised table with infinite scroll mouse wheel event scrolling whole page
Using react-virtualised table with infinite scroll within a large page of content, if the user scrolls to the bottom of the table and the next set of data has not finished loading, the mouse wheel event bubbles up to the window, and the window…
J-R
- 117
- 2
- 9
0
votes
1 answer
CellMeasurer with function child ({ measure }) => ) renders excessive number of times
REF: demo at https://codesandbox.io/s/1vy7ljo877
The demo uses 2 approaches to render some images.
The first row renders an element inside CellMeasurer
while the second row renders a function with signature: ({ measure }) => )
I find that for the…
kewlking
- 412
- 1
- 4
- 11
0
votes
0 answers
Unable to use react-virtualized
I'm trying to get started using react-virtualized, and I have been having a lot of trouble getting started. The documentation is very sparse.
I am trying to use the following example:
import { Grid, List, ScrollSync } from 'react-virtualized'
import…
anesthetic
- 295
- 1
- 12
0
votes
1 answer
I have a
with row items of unknown DOM height
Given a react-virtualized List with variable content in each row the DOM height needs to be calculated by a rowHeight function - however since that gets called before the row is rendered I am unsure how to actually get the row height.
The examples…
Simon
- 1,849
- 3
- 22
- 29
0
votes
1 answer
Are there any "sub packages" for importing parts of react-virtualized?
Are there any packages/libraries/etc where I can import only the parts of react-virtualized that I need? Kind of like https://www.npmjs.com/package/lodash.debounce for lodash?
Mark Lodato
- 386
- 3
- 14
0
votes
1 answer
Why doesn't Masonry refresh indexes of cells (cellCount) on componentWillReceiveProps method?
Every next search query starts with previous page height and index count.
What can I do to update the index count in cellRenderer and the height of the page on a new search query?
Next code help to avoid errors, but doesn't solve the…
Max Mabius
- 3
- 4
0
votes
1 answer
React Virtualized Table drop down filter in header cut off by overflow: none
We have a React Virtualized Table with a header row.
One (or more) of the header cells will contain a drop down Componentallowing you to select values to filter the column by.
We have created the Component, and the ValuePanel has position:…
user310988
0
votes
1 answer
Which parts of react-virtualized package I need?
I want to make infinite scroll page with image grid. Which parts of react-virtualized package I need? InfiniteLoader and WindowScroller and Masonry ? And how define limit of records in query when I scroll window.
wini666
- 1
- 3
0
votes
2 answers
react-virtualized - opt in or out of virtualization
I'm using the most bodacious react-virtualized component in a calendar-like application that I'm working on.
I'm using three grids with ScrollSync like in this example but also using cellRangeRenderer to render "pills" on top of the grid.
The…
oldo.nicho
- 2,149
- 2
- 25
- 39
0
votes
0 answers
react-virtualized Table with CellMeasurer can only measure the height of the first column
I have a table with multiple columns and I want each row to be adjusted to the tallest cell. However, when I use CellMeasurer on each column only the height of the first column is considered
Nico Tejera
- 1,309
- 1
- 8
- 3
0
votes
1 answer
Missing props on RowRendererParams
We're currently working on a table powered by React Virtualized and using TypeScript.
At the moment we're looking at making a custom row render.
We started off by looking at the implementation of the defaultRowRenderer.
We took that code and started…
user310988
0
votes
1 answer
Autosizer stretches width fully on browser resize on Internet Explorer
I am using autosizer with
Jason Marsh
- 380
- 4
- 11
0
votes
0 answers
How to know heights of elements before they get rendered in react?
I have a long list of elements in UI it leads to performance issue. I am facing issues after integrating 'react-virtualization'. The screen is blinking while scrolling up/down. Can suggest, how do make it work with elements of different…
karthik
- 11
- 2
0
votes
1 answer
How can I get a column header to wrap in react-virtualized?
I have a react-virtualized Table with some lengthy column headers, and want the column headers to wrap rather than trail off with an ellipsis. Anyone know how to make this happen?
For reference, here's some example code:
makeTable =
…
R. Senterfeit
- 33
- 5