Comments (7)
Can you please create a jsfiddle for this? You can fork off https://jsfiddle.net/uq8osbp1/
from fixed-data-table-2.
@msojka I've seen a similar issue with images which happened because the table recycles rows and updates the props on them for performance. With images updating of the props would keep the old image and just update the src attribute on it, leading to the wrong images appearing until you stopped scrolling.
I was able to work around the issue by setting a key prop on the image element (at the cost of not getting to recycle our image elements).
A fiddle as Kam mentioned, or details on how your focused components are specified would be great. Thanks!
from fixed-data-table-2.
@KamranAsif here is minimum jsfiddle to replicate the issue: https://jsfiddle.net/msojka/f6aqLe0y/1/
Click to focus a1 input and scroll down to see multiple inputs created and focused as well (where exactly depends on height).
from fixed-data-table-2.
@msojka As @wcjordan mentioned, you can use the key property to fix this:
<input
key={this.props.rowIndex}
type="text"
value={this.props.data[this.props.rowIndex][this.props.columnKey]}
/>
https://jsfiddle.net/9jzy061k/3/
from fixed-data-table-2.
@KamranAsif ok that helped. Also note that I found it's important to add key to MyCell as well to ensure proper passing of props to the cells and children.
Anyways with this sorted out everything works great with one caveat. Scrolling (just scrolling) is terribly slow in IE 11. Even when stripped down to just a few data and simple cell content (divs instead of inputs).Chrome and FF are smooooth. Seems like IE render engine is just horrible. Anybody else experiencing same thing?
from fixed-data-table-2.
@msojka Hmm we haven't run into any issues like that yet. Does scrolling on this webpage also appear slow to you? http://schrodinger.github.io/fixed-data-table-2/example-reorder.html
from fixed-data-table-2.
The whole point of the fixed-data-table is to work with "fixed data". It's optimisations comes from windowing and recycling. In the case of inputs, recycling is not possible and it will cause lots of performance loss. I think there's nothing to do here other than using keys and disabling recycling for that elements.
from fixed-data-table-2.
Related Issues (20)
- Does it provide infinite scroll? HOT 1
- Resizable rows? HOT 5
- Need drop and play example HOT 3
- Sometimes when scrolling through table rows, I receive warning: Failed prop type: The prop `index` is marked as required in `FixedDataTableRowImpl`, but its value is `null`. HOT 4
- Check the column/cell visibility HOT 9
- Z-index 1 set on column header causes header to overlap other elements HOT 6
- Vertical scroll bar when we have many columns HOT 2
- Cannot read properties of null (reading 'onWheel') HOT 6
- Cannot read properties of null (reading 'setRoot') HOT 4
- React 18 question HOT 4
- "Global is not defined" in React Vite app HOT 2
- Error when refreshing data in table with "smaller" data HOT 5
- Is there a way to implement multi-level headers in Fixed Data Table 2 HOT 3
- When using variable row heights, setting `scrollTop` doesn't work well. Fix proposed HOT 4
- Resize line not shown when "maxHeight" is set. HOT 2
- Column resize doesn't properly work on mobile HOT 11
- Resize vertical bar public in header_ FixedDataTableColumnResizerLine_ Main positioning is not accurate HOT 4
- "site-dev-server" script doesn't work after upgrading to npm 9.8.0 HOT 4
- Scroll to an exact position when clicking the scrollbar track doesn't work in case of variable row heights and isVerticalScrollExact = true HOT 3
- Help with keeping scrollLeft property in components in each row when scrolling vertically. HOT 7
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 fixed-data-table-2.