Autodesk / Autodesk/react-base-table
scrollToLeft not stopping current scroll, and no possibility to add initial offset
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 170
- PR merge metrics
- No merged PRs in 30d
Description
Hello here,
First I would like to thank you for this great library, I am doing a complex screen with scroll vertical, horizontal and drag n drop, I tried to do it with react window but I was not able to have a fixed column easily, I discovered your awesome library and it simply save my life ! So **thanks a lot** 🙏
To add some context, I am doing this screen :

This component displays planning of users. Among the features I have to implement, here are some elements :
- It should be possible to scroll vertically to load more and more users
- It should be possible to scroll horizontally **left and right** to go backward or forward in time to see past or future planning
- Elements inside row should be draggable from one row to another
- First column displaying user names should be fixed
I have implemented a solution and [here is a codesandbox](https://codesandbox.io/s/test-virtualize-base-table-oywdd?file=/src/StaffingTable.tsx) grouping only problematics on scroll (forget about drag and drop for the moment, I will do it once I solve my problems of scrolling).
So, several problems on my side :
I have created a Base Table with n rows (n = numbers of users, n is growing each time we scroll vertically) and 3 columns :
1 column for user name (fixed), 1 (big) column for user planning, and 1 column blank to manage the scroll left (let's call this column "Loading").
So, first I would like to have an initial scroll offset of size "Loading column", giving to the user the impression he can scroll left. Each time the user scroll left, I will :
- set the "visible range" of the planning to range - 1 week
- get planning elements for the past week
- add these elements to the user row
- reset scroll offset left to Loading column size, to allow user to scroll again and again on left
(same for scroll right, adding + 1 week)
I do not know how to add this initial scroll left, I am currently using :
```
useEffect(
function addInitialScrollOffset() {
if (tableRef.current !== null) {
tableRef.current?.scrollToLeft(loadingColumnWidth);
}
},
[tableRef.current]
);
```
But this does not work since tableRef.current is a mutable value and changing it does not re-render component. Adding no dependencies on the useEffect does not work either.
Moreover, here is my current onScroll method :
```
const onScroll = (
props: StaffingScrollProps,
tableRef: RefObject>
) => {
if (
tableRef.current === null ||
scrollRef.current === null ||
props.scrollUpdateWasRequested
) {
return;
}
if (
props.scrollLeft - SCROLL_MARGIN ===
tableRef.current.getTotalColumnsWidth() - scrollRef.current.scrollWidth
) {
const newRange = range.clone();
newRange.end.add(1, "week");
newRange.start.add(1, "week");
setRange(newRange);
tableRef.current?.scrollToLeft(WIDTH_OF_LOADING_COLUMN);
} else if (props.scrollLeft === 0) {
const newRange = range.clone();
newRange.start.subtract(1, "week");
newRange.end.subtract(1, "week");
setRange(newRange);
tableRef.current?.scrollToLeft(WIDTH_OF_LOADING_COLUMN);
}
};
```
The problem with this code is that _sometimes_ when I scroll left, scrollToLeft works correctly and I get stuck on offset left = loading column, which is the behaviour I want to have. And _sometimes_ the scroll goes to offset left = loading column, but it is not "stopped", so it continues to scroll left until 0. So there is no offset left anymore, and if user wants to scroll left again, is has to first scroll right, then scroll left to trigger the fetching of past planning.
One thing to know : I did not have the problem using react-window directly :
```
tableRef.current.scrollToItem({
columnIndex: 1,
align: "start"
});
```
worked
Finally, for the right scroll, I am using `props.scrollLeft - SCROLL_MARGIN === tableRef.current.getTotalColumnsWidth() - scrollRef.current.scrollWidth` to get a condition to fetch new data for future planning (where SCROLL_MARGIN is an arbitrary value of 15px), but I think this does not work well on all device screens.
Do you have any idea on how could I resolve my problems ? 😢
Thank you !
Contributor guide
Assessment
This issue has not been assessed yet.