Autodesk / Autodesk/react-base-table
scrollToLeft not stopping current scroll, and no possibility to add initial offset
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.5k
- Forks
- 170
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
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 !
Guía de contribución
Línea de trabajo
Comienza con el punto de entrada de CodeSandbox enlazado, src/StaffingTable.tsx, y lee el uso de scrollToLeft y onScroll. Compara el comportamiento funcional de react-window con scrollToItem y luego reproduce los casos del offset inicial y de los límites izquierdo/derecho. Está terminado cuando el offset permanece estable mientras la carga repetida de semanas funciona en ambos límites y en distintos tamaños de pantalla.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 38/100