Feat/infinity scroll (#412)

* increase overscan

* add infinity scroll

* add fakeData

* add infinite scroll

* fix typo

* fix typo

* add useScrollListner hook with ref to handler

* add virtualize options

* move listener inside useEffect

Author: AlexNti

src/components/tableV2/core/fullTable.js

@@ -21,6 +21,7 @@ const FullTable = ({
   testPrefixCallback,
   width,
   scrollParentRef,
+  virtualizeOptions = {},
 }) => {
   return (
     <Table
@@ -54,6 +55,7 @@ const FullTable = ({
           table={table}
           testPrefix={testPrefix}
           testPrefixCallback={testPrefixCallback}
+          {...virtualizeOptions}
         />
       </Table.Body>
     </Table>

src/components/tableV2/core/rows.js

@@ -19,6 +19,7 @@ const Rows = ({
   testPrefix,
   testPrefixCallback,
   scrollParentRef,
+  overscan,
 }) => {
   const { state, updateState } = useSharedTable({})
   const { rows } = table.getRowModel()
@@ -27,7 +28,7 @@ const Rows = ({
     count: rows.length,
     getScrollElement: () => scrollParentRef.current,
     estimateSize: () => CELL_HEIGHT,
-    overscan: 20,
+    overscan: overscan || 30,
   })
 
   const virtualRows = virtualizer.getVirtualItems()

src/components/tableV2/hooks/useInfiniteScroll.js

@@ -0,0 +1,139 @@
+import { useEffect, useMemo, useState, useRef } from "react"
+
+//COMMENTS HERE ARE ONLY FOR TESTING REASONS THE ARE GOING TO BE REMOVED AFTER WE SEE THAT THE INFINITY WORKS AS EXPECTED
+
+// const fakeData = () => [
+//   {
+//     nodes: "node51",
+//     alerts: 15,
+//     user: "mitsos",
+//     disabled: true,
+//     status: "stale",
+//     untouchable: "true",
+//   },
+//   {
+//     nodes: "node52",
+//     alerts: 15,
+//     user: "mitsos",
+//     disabled: true,
+//     status: "stale",
+//     untouchable: "true",
+//   },
+//   {
+//     nodes: "node53",
+//     alerts: 15,
+//     user: "mitsos",
+//     disabled: true,
+//     status: "stale",
+//     untouchable: "true",
+//   },
+//   {
+//     nodes: "node54",
+//     alerts: 15,
+//     user: "mitsos",
+//     disabled: true,
+//     status: "stale",
+//     untouchable: "true",
+//   },
+//   {
+//     nodes: "node55",
+//     alerts: 15,
+//     user: "mitsos",
+//     disabled: true,
+//     status: "stale",
+//     untouchable: "true",
+//   },
+//   {
+//     nodes: "node56",
+//     alerts: 15,
+//     user: "mitsos",
+//     disabled: true,
+//     status: "stale",
+//     untouchable: "true",
+//   },
+// ]
+
+// function loadMoreItems(lastData) {
+//   console.log(lastData)
+//   return new Promise(resolve => {
+//     setTimeout(() => {
+//       resolve({
+//         data: fakeData(),
+//       })
+//     }, 4000)
+//   })
+// }
+
+const useScrollListener = (target, handler) => {
+  const listenerRef = useRef(handler)
+  listenerRef.current = handler
+
+  useEffect(() => {
+    const listener = () => listenerRef.current()
+
+    if (!target?.current) return
+    target.current.addEventListener("scroll", listener)
+
+    return () => {
+      if (!target.current) return
+      target.current.removeEventListener("scroll", listener)
+    }
+  }, [target])
+}
+
+const useIniniteScroll = ({
+  service,
+  target,
+  onError,
+  onSuccess,
+  onDataEnd,
+  updateTableData,
+  threshold = 100,
+}) => {
+  const [lastReceivedData, setLastReceivedData] = useState()
+  const [loading, setLoading] = useState(false)
+
+  const hasDataEnded = useMemo(() => {
+    if (!onDataEnd) return false
+    return onDataEnd(lastReceivedData)
+  }, [lastReceivedData])
+
+  const runService = async () => {
+    try {
+      const currentData = await service(lastReceivedData)
+
+      updateTableData(currentData.data)
+      setLastReceivedData(currentData)
+      onSuccess?.(currentData)
+      setLoading(false)
+    } catch (err) {
+      onError?.(err)
+      setLoading(false)
+    }
+  }
+
+  const loadMore = () => {
+    if (hasDataEnded) return
+    setLoading(true)
+    runService()
+  }
+  const scrollMethod = () => {
+    const el = target.current
+    if (!el) {
+      return
+    }
+    const scrollTop = el.scrollTop
+    const scrollHeight = el.scrollHeight
+    const clientHeight = el.clientHeight
+    if (scrollHeight - scrollTop <= clientHeight + threshold) {
+      loadMore()
+    }
+  }
+
+  useScrollListener(target, () => {
+    if (loading || service) return
+    scrollMethod()
+  })
+}
+
+export default useIniniteScroll

src/components/tableV2/netdataTable.js

@@ -25,6 +25,8 @@ import MainTable from "./features/mainTable"
 
 import { SharedTableProvider } from "./context/sharedTable"
 
+import useInfiniteScroll from "./hooks/useInfiniteScroll"
+
 const noop = () => {}
 
 const NetdataTable = ({
@@ -56,6 +58,8 @@ const NetdataTable = ({
   enableColumnPinning = false,
   columnPinningOptions = {},
   enableResize = false,
+  loadMoreOptions = {},
+  virtualizeOptions = {},
 }) => {
   const [isColumnDropdownVisible, setIsColumnDropdownVisible] = useState(false)
   const [columnVisibility, setColumnVisibility] = useState(initialColumnVisibility)
@@ -69,9 +73,16 @@ const NetdataTable = ({
     pageIndex: paginationOptions.pageIndex,
     pageSize: paginationOptions.pageSize,
   })
+  const [tableData, setTableData] = useState(data)
 
   const scrollParentRef = useRef()
 
+  const updateTableData = useCallback(newData => {
+    setTableData(oldData => [...oldData, ...newData])
+  }, [])
+
+  useInfiniteScroll({ target: scrollParentRef, updateTableData, ...loadMoreOptions })
+
   const handleGlobalSearch = useCallback(value => {
     onGlobalSearchChange?.(value)
     setGlobalFilter(String(value))
@@ -151,7 +162,7 @@ const NetdataTable = ({
 
   const table = useReactTable({
     columns: [...makeSelectionColumn, ...makeDataColumns, ...makeActionsColumn],
-    data: data,
+    data: tableData,
     manualPagination: !enablePagination,
     columnResizeMode: enableResize ? "onEnd" : "",
     filterFns: {
@@ -223,6 +234,7 @@ const NetdataTable = ({
               flexRender={flexRender}
               onHoverRow={onHoverRow}
               scrollParentRef={scrollParentRef}
+              virtualizeOptions={virtualizeOptions}
             />
           )}
           <MainTable
@@ -239,6 +251,7 @@ const NetdataTable = ({
             testPrefix={testPrefix}
             flexRender={flexRender}
             onHoverRow={onHoverRow}
+            virtualizeOptions={virtualizeOptions}
           />
         </Flex>
         {enablePagination && makePagination({ table })}