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