[DataGridPro] Rework `onRowsScrollEnd` to use `IntersectionObserver` #8672

DanailH · 2023-04-19T11:34:34Z

Fixes #4371
Fixes #9022

Preview: https://deploy-preview-8672--material-ui-x.netlify.app/x/react-data-grid/row-updates/#infinite-loading

TODO:

How should it behave with sorting applied?
Server-side sorting should be used.
How should it behave with a filter applied? [DataGrid] onRowsScrollEnd triggered when applying filters #11402

mui-bot · 2023-04-19T11:39:23Z

Deploy preview: https://deploy-preview-8672--material-ui-x.netlify.app/

Updated pages:

docs/data/data-grid/row-updates/row-updates.md

Generated by 🚫 dangerJS against 4ab0bd3

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts

packages/grid/x-data-grid/src/components/GridRow.tsx

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts

…-rework-onRowsScrollEnd-to-use-IntersectionObserver

packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts

romgrk · 2024-02-29T18:22:43Z

packages/x-data-grid-pro/src/hooks/features/infiniteLoader/gridInfniteLoaderInterface.ts

+   * Stores the ref of the element at the bottom of the virtual scroller content that triggers the infinite loading.
+   * @ignore - do not document.
+   */
+  unstable_infiniteLoadingTriggerRef: (node: HTMLElement | null) => void;


Keep in private API?

I've replaced it with a getInfiniteLoadingTriggerElement method in the private API and moved the interface to the MIT package for the sake of type safety (getInfiniteLoadingTriggerElement is being called in the MIT package's useGridVirtualScroller)

packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts

romgrk · 2024-02-29T18:36:50Z

packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

+const InfiniteLoadingTriggerElement = styled('div')({
+  position: 'sticky',
+  left: 0,
+  width: 0,
+  height: 0,
+});
+


I don't love how the infinite loading logic is spilling in this file. Is there any other way we can separate the logic?

Instead of exposing unstable_infiniteLoadingTriggerRef on the API, maybe we could expose (a) function(s) to add the trigger element?

The function could take as input the props, so the props.rowsLoadingMode === 'client' (below) would not need the (rootProps as any) cast that's required here.

Moved the trigger to the useGridInfiniteLoader hook 👍🏻

packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

…ersectionObserver

romgrk · 2024-03-05T19:49:29Z

packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx

+    if (triggerElement.current) {
+      observer.current?.unobserve(triggerElement.current);
+    }


Not sure if it applies but there is also observer.current?.disconnect(), which can help avoid storing the observed element ref sometimes.

Good point! I used disconnect instead of unobserve.

I still need to keep track of the trigger element to observe it after recreating IntersectionObserver (e.g. when marginBottom changes): https://github.com/mui/mui-x/pull/8672/files#diff-626d69f7d7c9aebfab3fdc6388cd0f88a38b6d9e51c567e76f63a25d63895b10R81-R83

…ersectionObserver

docs/data/data-grid/row-updates/row-updates.md

…ui#8672) Co-authored-by: Andrew Cherniavskyi <[email protected]>

Rework onRowsScrollEnd to use IntersectionObserver

b367d96

DanailH added bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user labels Apr 19, 2023

DanailH requested review from MBilalShafi, cherniavskii and m4theushw April 19, 2023 11:34

DanailH self-assigned this Apr 19, 2023

DanailH changed the title ~~Rework 'onRowsScrollEnd' to use 'IntersectionObserver'~~ [DataGridPro] Rework 'onRowsScrollEnd' to use 'IntersectionObserver' Apr 19, 2023

DanailH changed the title ~~[DataGridPro] Rework 'onRowsScrollEnd' to use 'IntersectionObserver'~~ [DataGridPro] Rework onRowsScrollEnd to use IntersectionObserver Apr 19, 2023

cherniavskii reviewed May 5, 2023

View reviewed changes

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts Outdated Show resolved Hide resolved

m4theushw reviewed May 15, 2023

View reviewed changes

packages/grid/x-data-grid/src/components/GridRow.tsx Outdated Show resolved Hide resolved

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts Outdated Show resolved Hide resolved

m4theushw mentioned this pull request May 18, 2023

[question][data grid] data grid don't trigger onRowScrollEnd on infinite loading with less rows than viewport #9022

Closed

2 tasks

DanailH added 2 commits June 29, 2023 12:48

Merge branch 'master' of https://github.com/mui/mui-x into issue/4371…

aa72ec4

…-rework-onRowsScrollEnd-to-use-IntersectionObserver

push solution forward

0d6cf9f

DanailH requested review from cherniavskii and m4theushw June 29, 2023 13:19

DanailH commented Jun 29, 2023

View reviewed changes

packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx Outdated Show resolved Hide resolved

DanailH added 3 commits June 29, 2023 16:21

remove unwanted changes

c93352f

proptypes

268313c

apis

4567916

cherniavskii reviewed Jun 29, 2023

View reviewed changes

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts Outdated Show resolved Hide resolved

cherniavskii reviewed Jun 29, 2023

View reviewed changes

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts Outdated Show resolved Hide resolved

DanailH requested a review from romgrk July 3, 2023 14:21

romgrk reviewed Jul 3, 2023

View reviewed changes

packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts Outdated Show resolved Hide resolved

DanailH added 4 commits July 5, 2023 12:24

depracate prop

55f6c8a

fix types

c2b10a5

revert unwanted changes

922573f

api

cac873b

romgrk reviewed Feb 29, 2024

View reviewed changes

packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts Outdated Show resolved Hide resolved

romgrk reviewed Feb 29, 2024

View reviewed changes

packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx Outdated Show resolved Hide resolved

cherniavskii added 3 commits March 2, 2024 13:05

Merge branch 'next' into issue/4371-rework-onRowsScrollEnd-to-use-Int…

259f09a

…ersectionObserver

update import

b4639bc

move infinite loading trigger element to useGridInfiniteLoader hook

0d70d79

cherniavskii requested a review from romgrk March 2, 2024 12:48

remove broken export

bf1f72d

cherniavskii mentioned this pull request Mar 5, 2024

[DataGridPremium] Fix auto-scroll not working when selecting cell range #12267

Merged

cherniavskii added 2 commits March 5, 2024 19:40

Merge branch 'next' into issue/4371-rework-onRowsScrollEnd-to-use-Int…

ad04683

…ersectionObserver

fix ts issues

2a25c0e

romgrk reviewed Mar 5, 2024

View reviewed changes

romgrk approved these changes Mar 5, 2024

View reviewed changes

cherniavskii added 7 commits March 7, 2024 15:45

Merge branch 'next' into issue/4371-rework-onRowsScrollEnd-to-use-Int…

db3b679

…ersectionObserver

update infinite loading demo to use server-side filtering

3a707b1

update docs

3224228

initialize columns asap

7813044

remove unused import

6b9edb8

use disconnect instead of unobserve

9fa5de0

derive marginBottom outside of use effect to make dependencies cleaner

e85f4b3

MBilalShafi approved these changes Mar 7, 2024

View reviewed changes

docs/data/data-grid/row-updates/row-updates.md Outdated Show resolved Hide resolved

update docs

4ab0bd3

cherniavskii enabled auto-merge (squash) March 7, 2024 18:59

cherniavskii merged commit 11412db into mui:next Mar 7, 2024
15 checks passed

MBilalShafi mentioned this pull request Mar 8, 2024

[DataGrid] Make rowCount part of the state #12381

Merged

1 task

oliviertassinari mentioned this pull request May 4, 2024

[data grid] Tests fail with: "IntersectionObserver is not defined" after upgrading to x-data-grid v7.3.2 #12983

Open

thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024

[DataGridPro] Rework onRowsScrollEnd to use IntersectionObserver (m…

89d354d

…ui#8672) Co-authored-by: Andrew Cherniavskyi <[email protected]>

arminmeh mentioned this pull request Oct 10, 2024

[DataGridPro] Infinite loading onRowsScrollEnd intermittent issue not firing #14116

Closed

1 task

MBilalShafi mentioned this pull request Oct 11, 2024

[datagrid] onRowsScrollEnd should trigger even if initial data row heights is less than table height #8479

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGridPro] Rework `onRowsScrollEnd` to use `IntersectionObserver` #8672

[DataGridPro] Rework `onRowsScrollEnd` to use `IntersectionObserver` #8672

DanailH commented Apr 19, 2023 •

edited by cherniavskii

Loading

mui-bot commented Apr 19, 2023 •

edited

Loading

romgrk Feb 29, 2024

cherniavskii Mar 2, 2024

romgrk Feb 29, 2024

romgrk Feb 29, 2024

cherniavskii Mar 2, 2024

romgrk Mar 5, 2024

cherniavskii Mar 7, 2024

[DataGridPro] Rework onRowsScrollEnd to use IntersectionObserver #8672

[DataGridPro] Rework onRowsScrollEnd to use IntersectionObserver #8672

Conversation

DanailH commented Apr 19, 2023 • edited by cherniavskii Loading

mui-bot commented Apr 19, 2023 • edited Loading

romgrk Feb 29, 2024

Choose a reason for hiding this comment

cherniavskii Mar 2, 2024

Choose a reason for hiding this comment

romgrk Feb 29, 2024

Choose a reason for hiding this comment

romgrk Feb 29, 2024

Choose a reason for hiding this comment

cherniavskii Mar 2, 2024

Choose a reason for hiding this comment

romgrk Mar 5, 2024

Choose a reason for hiding this comment

cherniavskii Mar 7, 2024

Choose a reason for hiding this comment

[DataGridPro] Rework `onRowsScrollEnd` to use `IntersectionObserver` #8672

[DataGridPro] Rework `onRowsScrollEnd` to use `IntersectionObserver` #8672

DanailH commented Apr 19, 2023 •

edited by cherniavskii

Loading

mui-bot commented Apr 19, 2023 •

edited

Loading