Comments (7)
Actually, I was able to get your fix working in my code. Not sure what exactly changed from before, but it works now. Thank you for your help on this!
from fixed-data-table-2.
Without a reproducible example or a video it's a bit difficult for me to confirm what's actually happening.
Any chance you can provide it? You can refer this codesandbox template.
I wasn't sure how the built in vertically scrolling works in FixedDataTable, but it seems like something is happening that wipes the scrollLeft value. It seems like the rows are doing some recycling, but I'm not sure about the details.
Yea, FDT recycles/reuses rows for performance, so any state in your cells may be reused across rows.
There are still some edge cases where an existing row gets unmounted if it goes outside the viewport.
So for example if you're storing scrollLeft
as local state in a cell, and that cell gets unmounted along with the row, then any local changes to scrollLeft
will also be wiped out.
I would suggest keeping your cell renderers pure as much as possible, and pulling up state from your cell renderers to the table level or above to avoid these sort of issues.
from fixed-data-table-2.
Thanks for the response. I was able to make a quick demo version of what I was running into over here: codesandbox.
Screen.Recording.2024-04-17.at.10.39.37.AM.mov
As I scroll up in the end, the scrollLeft stays the same as intended for a little bit, but then it snaps back to 0 at a certain time.
This is when I use the 1.2.0 version of FDT. It only does the reset for some rows and the snap back pretty quickly, but still not ideal.
Screen.Recording.2024-04-17.at.10.44.36.AM.mov
from fixed-data-table-2.
Thanks, the demo helps out a lot.
This is quite strange. The underlying issue seems to be that the browser resets the scroll state of a node whenever it gets moved to a different position.
So when FDT recycles rows by shifting them around, your cells in that row loose their scroll state.
Here's a demo to highlight this -- https://codesandbox.io/s/test-scroll-state-vkxn5y?file=/src/App.js.
It renders the <SpecialCell />
component taken from your demo, along with a button that simply flips the position of the components in the DOM.
In my testing, the browser seems to be resetting the scroll whenever the button is pressed...
@AmanGupta2708 @karry08 @abhisheksingh2410 , have you guys seen anything like this before?
from fixed-data-table-2.
@merrylewang , here's a sandbox where I put a hacky workaround.
I know this doesn't really solve the underlying issue, but sharing in case it might unblock your needs.
The main change is that I modified <SpecialCellRenderer>
to use FDT's builtin context so that the cell gets rerendered whenever the state of the table (like scroll values) change.
// workaround to make the cell rerender when vertical scroll changes
const data = useContext(Context);
useLayoutEffect(() => {
if (!ref.current) {
return;
}
if (ref.current.scrollLeft !== props.scroll) {
ref.current.scrollTo({ left: props.scroll });
}
});
The useLayoutEffect
runs before dom updates and lets us check if the cell's scroll offset differs from what's expected on every render, and if so simply sets it back.
from fixed-data-table-2.
I tried copying what you had in the sandbox, but wasn't able to get it to work in my own application. Do you know what I'm doing wrong? Currently the only two things I'm adding is wrapping with Context.Consumer
and switching to useLayoutEffect.
from fixed-data-table-2.
Without seeing the full code it's a bit hard to debug.
If sharing the application is not possible, could you instead share snippets of:
- How the cell renderer is passed to FDT:
eg:
<Column
columnKey="email"
header={<Cell>Email</Cell>}
cell={(cellProps) => {
return (
<Context.Consumer>
{(contextValue) => (
<SpecialCell
{...cellProps}
scroll={this.state.scrollLeft}
/>
)}
</Context.Consumer>
);
}}
width={300}
fixedRight={true}
/>
- And how the cell renderer actually makes use of the props?
eg:
useLayoutEffect(() => {
if (!ref.current) {
return;
}
if (ref.current.scrollLeft !== props.scroll) {
ref.current.scrollTo({ left: props.scroll });
}
});
return (
<div style={outer} ref={ref}>
<div style={inner}>hi</div>
</div>
);
And I'm also happy to get in a call to help debug what's going wrong. You can send me an email at [email protected]
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
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.