Autodesk / Autodesk/react-base-table
scrollToLeft not stopping current scroll, and no possibility to add initial offset
- 主要语言
- TypeScript
- 星标
- 1.5k
- 派生
- 170
- PR 合并指标
- 30 天内没有已合并 PR
描述
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 !
贡献指南
调研方向
从链接的 CodeSandbox 入口 src/StaffingTable.tsx 开始,阅读 scrollToLeft 和 onScroll 的使用方式。对比正常工作的 react-window scrollToItem 行为,然后重现初始偏移量以及左/右边界情况。完成的标准是:在不同屏幕尺寸下,两侧边界的重复周加载都能正常工作,同时偏移量保持稳定。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100