Stack Overflow
Stack Overflow

Questions tagged [react-window]

133 questions
22
votes
6 answers

(react-window) How to pass props to {Row} in {Row}

I am using library called react-window When I pass props to its row like this: {Row({...props, {otherProps}})} it gave me an error something like: React.createElement: type is invalid -- expected a string (for built-in components) or a…
Bens
  • 831
  • 4
  • 12
  • 28
13
votes
1 answer

react-window set item size according to content height

I'm using react-window to implement a chat message list, but I'm getting stuck trying to set the right itemSize to each item. Happens that a chat message, based on his text length and window width, hasn't always a prefixed height (or a height that i…
Marco Nobile
  • 131
  • 1
  • 4
12
votes
2 answers

Test scrolling in a react-window list with react-testing-library

I am stuck here with a test where I want to verify that after scrolling through a list component, imported by react-window, different items are being rendered. The list is inside a table component that saves the scrolling position in React context,…
Albert Schilling
  • 663
  • 1
  • 7
  • 17
7
votes
1 answer

Measuring the height of text according to CSS rules – _without a browser rendering_ – for use with a virtualized list, to specify heights in advance

I've been implementing a chat client in Electron (Chrome) and React. Our top priority is speed. It behooves us, then, to use a virtualized list component (also known as "buffered render" or "window render"). We've explored react-virtualized,…
Zack Burt
  • 8,257
  • 10
  • 53
  • 81
6
votes
0 answers

Using react-table with react-window and sticky columns

I have a react-table v7 (with sticky header and footer) which renders thousands of virtualized rows using react-window. A new requirement needs the table to have sticky columns as well but I cannot have it working as react-window adds a couple of…
tnsw
  • 61
  • 2
6
votes
2 answers

How to type the index and style props passed to Row function using React-Window

I am trying to type the following two parameters passed to Row function. //https://github.com/bvaughn/react-window import * as React from "react"; import styled from "styled-components"; import { FixedSizeList as List } from "react-window"; import…
Faktor 10
  • 1,868
  • 2
  • 21
  • 29
6
votes
2 answers

How to deal with "Warning: validateDOMNesting(...): cannot appear as a child of

I'm using react-window to create virtual tables with react-table 7 (and material UI tables). I'm embedding FixedSizeList instead TableBody. Something like this:
Tom
  • 6,325
  • 4
  • 31
  • 55
6
votes
1 answer

What is the problem of glitch when scrolling using react-window?

I want to do row virtualization when scrolling (so that data is shown when scrolling) But when scrolling, now the terrible glitches appear Tell me what is the problem? project - male-wind.surge.sh A component with a table (react-window is used…
Kirill Margheriti
  • 141
  • 1
  • 5
6
votes
1 answer

react-window-infinite-loader material-ui autocomplete

I am trying to show an infinite scrolled list inside a material-ui Autocomplete dropdown list, using react-window-infinite-loader. When I scroll to the bottom of the list, I want to fetch the next page of items from the server. I created a…
Bernard Wolff
  • 121
  • 1
  • 6
6
votes
2 answers

Append components to a fixed list using react-window?

I have a fixed list and grid using react-window, infinite loader, and auto sizer. It's working fine but I'm looking to append a component before the list/grid starts (for example, a search box and a button). What's the correct approach to accomplish…
SeanWM
  • 16,789
  • 7
  • 51
  • 83
5
votes
2 answers

Efficiently rendering large list of data in React Select

What is the best way to render large list of data in a searchable react select dropdown? I've looked at windowing, where DOM nodes are created only for items that are visible in the view port. This can be done by using the react-window package…
blankface
  • 5,757
  • 19
  • 67
  • 114
4
votes
2 answers

react-window stop unnecessary rendering of child FixedSizeList rows when scrolling parent FixedSIzeList

In my react project I am using react-window package to render nested lists. Each parent FixedSizeList row renders a component which uses another FixedSizeList. Parent List doesn't have more than 14 rows at the moment. But the child List may contain…
Ahashan Alam Sojib
  • 77
  • 1
  • 7
4
votes
3 answers

Header flickering and freezing issue with material table (implemented with react window + react window infinite loader)

I have implemented an Infinite scrolling table with react-window (based on #60) and material UI. The table seems to be fulfilling the main objective but there are few issues with it - header is not sticking on the top in spite of having styles in…
Dev AKS
  • 512
  • 1
  • 5
  • 17
4
votes
1 answer

react-window fixedSizeGrid with react-window-infinite-loader

I tried to use react-window's fixedSizeGrid with react-infinite-loader. As mentioned it's issue, infinite-loader does not support fixedSizeGrid for the infinite load. So i found onItemsRendered override method. Now i am trying to render data with it…
Zorig
  • 585
  • 1
  • 10
  • 26
4
votes
1 answer

Tracking visibility of items rendered by react-window

I was looking for a way to know which list item is visible on the screen when using react-window . The isVisible prop is returning the visibility wrongly . https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq import React…
charan
  • 71
  • 6
1
2 3
…
8 9