@heliux-org/design-system-core 0.0.140 → 0.0.142

package/src/components/NewTable/__stories__/NewTable.stories.tsx

@@ -132,12 +132,14 @@ const basicData = [
 
 export const Basic: StoryFn<StoryTableProps> = (args) => {
   const tableContainerRef = React.useRef<HTMLDivElement>(null);
-  // const data = React.useMemo(() => makeData(false, 10_000), []);
+
   const data = useMemo(
     () => [
-      { id: 1, name: "Name1", description: "Description1" },
-      { id: 2, name: "Name2", description: "Description2" },
-      { id: 3, name: "Name3", description: "Description3" },
+      ...Array.from({ length: 100 }, (_, i) => ({
+        id: i + 1,
+        name: `Name${i + 1}`,
+        description: `Description${i + 1}`,
+      })),
     ],
     []
   );
@@ -149,6 +151,9 @@ export const Basic: StoryFn<StoryTableProps> = (args) => {
     data,
     columns,
     useVirtualScrolling: true,
+    initialLoadCount: 10, 
+    loadMoreCount: 50,
+    infiniteScrolling: true
   });
 
   const { rows } = table.getRowModel();
@@ -156,14 +161,11 @@ export const Basic: StoryFn<StoryTableProps> = (args) => {
   return (
     <Table {...args} table={table} ref={tableContainerRef}>
       <TableHead isSticky>
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<any>) => (
+        {table.getHeaderGroups().map((headerGroup) => (
           <HeaderRow key={headerGroup.id}>
             {headerGroup.headers.map((header) => (
               <HeaderCell key={header.id} header={header}>
-                {flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )}
+                {flexRender(header.column.columnDef.header, header.getContext())}
               </HeaderCell>
             ))}
           </HeaderRow>
@@ -171,12 +173,12 @@ export const Basic: StoryFn<StoryTableProps> = (args) => {
       </TableHead>
       <TableBody>
         {table.virtualRows &&
-          table.virtualRows.map((virtualRow: VirtualItem) => {
+          table.virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
             const cells = row.getVisibleCells();
             return (
               <Row key={row.id}>
-                {cells.map((cell: LeafyGreenTableCell<any>) => (
+                {cells.map((cell) => (
                   <Cell key={cell.id} cell={cell}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </Cell>
@@ -184,6 +186,13 @@ export const Basic: StoryFn<StoryTableProps> = (args) => {
               </Row>
             );
           })}
+        {table.isLoading && (
+          <Row>
+            <td colSpan={columns.length} style={{ textAlign: "center" }}>
+              Loading...
+            </td>
+          </Row>
+        )}
       </TableBody>
     </Table>
   );
@@ -1957,13 +1966,13 @@ export const WithPagination: StoryFn<StoryTableProps> = ({ ...rest }) => {
     hasSelectableRows: true,
     selectCurrentPageOnly: false,
     onUnselectAll: () => {
-      console.log('All rows have been unselected');
+      console.log("All rows have been unselected");
     },
     initialState: {
       pagination: {
         pageSize: itemsPerPageOptions[0],
-      }
-    }
+      },
+    },
   });
 
   const handleClearSelection = () => {
@@ -2080,7 +2089,7 @@ export const StickyColumns: StoryFn<StoryTableProps> = (args) => {
         id: "product",
         header: "Product",
         accessorKey: "product",
-        size:150,
+        size: 150,
         sticky: "left",
       },
       {

package/src/components/NewTable/components/useLeafyGreenTable/useLeafyGreenTable.tsx

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import { useVirtual } from "react-virtual";
 import { useReactTable, ColumnResizeMode, ColumnResizeDirection } from "@tanstack/react-table";
 import { getCoreRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/react-table";
@@ -31,16 +31,33 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
   isExpandable = false,
   hoverIcon,
   selectCurrentPageOnly = false,
-  onUnselectAll, 
+  onUnselectAll,
   initialState,
+  initialLoadCount = 20, 
+  loadMoreCount = 10, 
+  onLoadMore, 
+  infiniteScrolling = false,
   ...rest
 }: LeafyGreenTableOptions<T, V>): LeafyGreenTable<T> => {
   const [rowSelection, setRowSelection] = useState<{ [key: string]: boolean }>({});
   const [hoveredRow, setHoveredRow] = useState<number | null>(null);
   const [showColumnManager, setShowColumnManager] = useState(false);
+  const [loadedData, setLoadedData] = useState<T[]>(infiniteScrolling ? data.slice(0, initialLoadCount) : data);
+  const [isLoading, setIsLoading] = useState(false);
+
   const columnManagerRef = useRef<HTMLButtonElement>(null);
   const isInitialSetupDone = useRef(false);
 
+  useEffect(() => {
+    setLoadedData([]);
+  }, [data]);
+  
+  useEffect(() => {
+    if (data.length > 0) {
+      setLoadedData(data.slice(0, initialLoadCount));
+    }
+  }, [data, initialLoadCount]);
+
   useEffect(() => {
     if (!isInitialSetupDone.current) {
       const initialRowSelection = initiallySelectedRowIds.reduce((acc, id) => {
@@ -61,7 +78,7 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
 
   const handleRowClick = (rowId: number) => {
     if (allowSelectSingle) {
-      const selectedRowData = data.find((d) => d.id === Number(rowId) + 1);
+      const selectedRowData = loadedData.find((d) => d.id === Number(rowId) + 1);
       onSelect?.(selectedRowData);
     }
   };
@@ -162,7 +179,7 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
   const [columnResizeDirection, setColumnResizeDirection] = useState<ColumnResizeDirection>("ltr");
 
   const table = useReactTable<LGTableDataType<T>>({
-    data,
+    data: loadedData,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getRowCanExpand: (row) => !!row.original.renderExpandedContent || !!row.subRows?.length,
@@ -179,7 +196,7 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
     ...rest,
   });
 
-  const { rows } = table.getCoreRowModel(); 
+  const { rows } = table.getCoreRowModel();
   const { rows: paginationRows } = table.getPaginationRowModel();
   const _rowVirtualizer = useVirtual({
     parentRef: containerRef,
@@ -188,10 +205,57 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
     ...virtualizerOptions,
   });
 
+  const loadMoreRows = useCallback(() => {
+    if (!infiniteScrolling || isLoading || loadedData.length >= data.length) return;
+    setIsLoading(true);
+    setTimeout(() => {
+      setLoadedData((prevData) => {
+        const nextData = data.slice(prevData.length, prevData.length + loadMoreCount);
+        return [...prevData, ...nextData];
+      });
+      setIsLoading(false);
+    }, 1000);
+  }, [infiniteScrolling, isLoading, data, loadMoreCount]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (
+        infiniteScrolling &&
+        containerRef.current &&
+        containerRef.current.scrollHeight - containerRef.current.scrollTop ===
+          containerRef.current.clientHeight
+      ) {
+        loadMoreRows();
+      }
+    };
+
+    const container = containerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+      return () => {
+        container.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, [containerRef, loadMoreRows, infiniteScrolling]);
+
+  useEffect(() => {
+    const checkContainerHeight = () => {
+      if (
+        infiniteScrolling &&
+        containerRef.current &&
+        containerRef.current.scrollHeight <= containerRef.current.clientHeight
+      ) {
+        loadMoreRows();
+      }
+    };
+
+    checkContainerHeight();
+  }, [containerRef, loadMoreRows, loadedData, infiniteScrolling]);
+
   const toggleAllRowsSelected = () => {
     const isAllRowsSelected = selectCurrentPageOnly
-      ? paginationRows.every(row => rowSelection[row.id])
-      : rows.every(row => rowSelection[row.id]);
+      ? paginationRows.every((row) => rowSelection[row.id])
+      : rows.every((row) => rowSelection[row.id]);
 
     const newSelection = {};
     const rowsToSelect = selectCurrentPageOnly ? paginationRows : rows;
@@ -240,6 +304,7 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
     setShowColumnManager,
     columnManagerRef,
     setHoveredRow,
+    isLoading,
   } as LeafyGreenTable<T>;
 };
 

package/src/components/NewTable/components/useLeafyGreenTable/useLeafyGreenTable.types.ts

@@ -49,6 +49,10 @@ export type LeafyGreenTableOptions<T extends LGRowData, V extends unknown = unkn
   hoverIcon?: React.ReactNode;
   selectCurrentPageOnly?: boolean;
   onUnselectAll?: () => void;
+  initialLoadCount?: number;
+  loadMoreCount?: number;
+  onLoadMore?: () => void;
+  infiniteScrolling?: boolean;
 };
 
 /**