Stack Overflow
Stack Overflow

Questions tagged [react-virtualized]

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:

525 questions
3
votes
0 answers

react-virtualized Changing column width with MultiGrid and CellMeasurer

I am using a MultiGrid with variable row heights, and I have some code that allows the user to change the width of a column. I understand that doing this does not change any props on the MultiGrid, so I need to call some of the methods on MultiGrid…
Pete Moss
  • 83
  • 7
3
votes
1 answer

Autosizer making a div of height and width 0

My configuration goes as follows: // Calling it
// MyComponent.js {({ onRowsRendered }) => ( {({ width, height }) => ( …
Christopher Francisco
  • 15,672
  • 28
  • 94
  • 206
3
votes
1 answer

React Virtualized - Render Table with full height to show all rows

According to the react-virtualized docs, "The AutoSizer component decorates a React element and automatically manages width and height properties so that decorated element fills the available space". The suggestion is usually to add height: 100%; or…
James
  • 157
  • 2
  • 12
3
votes
2 answers

How to draw borders between cells in react-virtualized Table

I am using Table component from react-virtualized to render a dataset of 1,000 rows and 20 columns. Even after reading documentation for Table and Column and after a few experiments, I am not able to draw borders between cells in my Table. Examples…
ivosh
  • 153
  • 4
  • 10
3
votes
1 answer

React Virtualized: Table rows get cut off when autoHeight is on

I am currently trying to implement React Virtualized to replace an laggy table but am running into an issue. I am using WindowScroller, AutoSizer, Table, and Column from React Virtualized, In my 400 row table, about 30 rows appear before they stop…
Nicholas Haley
  • 3,558
  • 3
  • 29
  • 50
3
votes
1 answer

Using Semantic UI React with React Virtualized

I have been having difficulties getting React Virtualized working correctly with Semantic UI. As per my example below, I am able to get correct styling applied to the items in a list by setting the className prop to 'item'. However the issue I have…
Steven
  • 721
  • 6
  • 23
3
votes
1 answer

creatable props not working in react-virtualized-select component

I am using 'Creatable' props of react-virtualized-select. When I write a custom option(e.g. Test code 4), It shows the text 'create option "Test code 4". But, When I click on that option, dropdown becomes blank and that option also not added in…
Alpesh Prajapati
  • 1,593
  • 2
  • 18
  • 38
3
votes
0 answers

How to make react-virtualized Grid responsive?

I am using the Grid component of react-virtualized, which expects column count and column width as required props. Right now, I am explicitly calculating the screen widths on resizing, and am calculation column width and column count. My code is as…
raksheetbhat
  • 850
  • 2
  • 11
  • 25
3
votes
1 answer

Are there any issues using Arrow Key Stepper to scroll when the rows have tabIndex or contentEditable enabled?

We've implemented React-Vitualized using single column Grid with rows that are enabled for keyboard event (onKeyUp/onKeyDown/onKeyPress). We are using Arrow-Key-Stepper to enable ArrowUp/ArrowDown scrolling of the rows. All works quite well even…
Richard O'Brien
  • 33
  • 4
3
votes
1 answer

Use react-virtualized Window Scroller with frozen header and footer

I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great. Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it,…
kewlking
  • 412
  • 1
  • 4
  • 11
3
votes
1 answer

scroll to bottom/row on react-virtualized with autosizer and cellmeasurer

I am building a chat app and using react-virtualized to manage display / infinite load (through a custom method, not the HOC) of chat messages. I am using Autosizer to fill the container div, and cellmeasurer to calculate row heights. Everything is…
Jake Lowen
  • 899
  • 1
  • 11
  • 21
3
votes
1 answer

React Virtualized AutoSizer + Masonry doesn't render until resized

I'm trying to bind AutoSizer and Masonry components in react-virtualized. My list of items lives in state and appears asynchronously in componentDidMount(). If I use simple anonymous arrow function for rendering Masonry, everything is OK. But If I…
112358dev
  • 33
  • 2
3
votes
1 answer

Overlap of elements when using dynamic height List

I have almost the same problem as Facebook has when rendering it's feed. As soon as a lot of posts are rendered, performance problems appear. After some research I found react-virtualized, which is awesome but I am having trouble to make it work for…
Matías Hernán García
  • 231
  • 3
  • 12
3
votes
4 answers

React-Virtualized Table only showing one column

I'm using react-virtualized's table and defined 4 columns for that table. For some reason it only displays the 1st column. I can not get the other columns to display. Not sure what I'm doing wrong. Below is a snippet of the code: const BTable =…
Los Morales
  • 2,061
  • 7
  • 26
  • 42
3
votes
2 answers

React-virtualized dropdown menu clipped by overflow:hidden

I am using react-virtualized for my table. I want to show a drop down menu on click of a button in one my cell. Issue is my drop down menu is suppressed by the rowheight of the table. With rowHeight={40} With rowHeight={200} I have played with…
Arjita Mitra
  • 962
  • 2
  • 13
  • 36
1 2 3
…
34 35