playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts

@@ -0,0 +1,66 @@
+import { useCallback, useEffect } from 'react';
+import { Row } from "@tanstack/react-table";
+import { GenericObject } from "../../types";
+import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
+
+interface UseTableActionsProps {
+  table: any;
+  expanded: GenericObject;
+  setExpanded: (expanded: GenericObject) => void;
+  onToggleExpansionClick?: (arg: Row<GenericObject>) => void;
+  onRowSelectionChange?: (rowSelection: any) => void;
+}
+
+export function useTableActions({
+  table,
+  expanded,
+  setExpanded,
+  onToggleExpansionClick,
+  onRowSelectionChange
+}: UseTableActionsProps) {
+
+  // Handle expand/collapse
+  const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
+    onToggleExpansionClick && onToggleExpansionClick(row);
+
+    const expandedState = expanded;
+    const targetParent = row?.parentId;
+    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
+    setExpanded(updatedRows);
+  }, [expanded, setExpanded, onToggleExpansionClick, table]);
+
+  // Handle pagination
+  const onPageChange = useCallback((page: number) => {
+    table.setPageIndex(page - 1);
+  }, [table]);
+
+  // Handle scroll detection for infinite scroll/virtualization
+  const fetchMoreOnBottomReached = useCallback((
+    containerRefElement: HTMLDivElement | null,
+    fetchNextPage: () => void,
+    isFetching: boolean,
+    totalFetched: number,
+    totalDBRowCount: number
+  ) => {
+    if (containerRefElement) {
+      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+      // If user scrolls near bottom, fetch more data
+      if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && totalFetched < totalDBRowCount) {
+        fetchNextPage();
+      }
+    }
+  }, []);
+
+  // Update selection state
+  useEffect(() => {
+    if (onRowSelectionChange) {
+      onRowSelectionChange(table.getState().rowSelection);
+    }
+  }, [table.getState().rowSelection, onRowSelectionChange]);
+
+  return {
+    handleExpandOrCollapse,
+    onPageChange,
+    fetchMoreOnBottomReached
+  };
+}

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -0,0 +1,195 @@
+import { useState, useCallback, useMemo } from 'react';
+import {
+  useReactTable,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  RowSelectionState,
+  Row
+} from "@tanstack/react-table";
+import { GenericObject } from "../../types";
+import { createColumnHelper } from "@tanstack/react-table";
+import { createCellFunction } from "../Utilities/CellRendererUtils";
+
+interface UseTableStateProps {
+  tableData: GenericObject[];
+  columnDefinitions: GenericObject[];
+  expandedControl?: GenericObject;
+  sortControl?: GenericObject;
+  onRowToggleClick?: (arg: Row<GenericObject>) => void;
+  selectableRows?: boolean;
+  initialLoadingRowsCount?: number;
+  loading?: boolean | string;
+  pagination?: boolean;
+  paginationProps?: GenericObject;
+  virtualizedRows?: boolean;
+  tableOptions?: GenericObject;
+  onRowSelectionChange?: (arg: RowSelectionState) => void;
+}
+
+export function useTableState({
+  tableData,
+  columnDefinitions,
+  expandedControl,
+  sortControl,
+  onRowToggleClick,
+  selectableRows,
+  initialLoadingRowsCount = 10,
+  loading,
+  pagination = false,
+  paginationProps,
+  virtualizedRows = false,
+  tableOptions
+}: UseTableStateProps) {
+  // Create a local state for expanded and setExpanded if expandedControl not used
+  const [localExpanded, setLocalExpanded] = useState({});
+  const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  // Determine whether to use the prop or the local state
+  const expanded = expandedControl ? expandedControl.value : localExpanded;
+  const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
+
+  // Virtualized data handling (chunked loading)
+  const fetchSize = 20; // Number of rows per "page"
+  const [fullData] = useState(tableData); // All data from the JSON file
+  const [dataChunk, setDataChunk] = useState(fullData.slice(0, fetchSize)); // Initial chunk
+  const [totalFetched, setTotalFetched] = useState(fetchSize); // Track loaded rows
+  const [isFetching, setIsFetching] = useState(false);
+
+  // Create column structure
+  const columnHelper = createColumnHelper();
+
+  // Build columns with proper cell renderers
+  const buildColumns = useCallback((columnDefinitions: GenericObject[], isRoot = true): any[] => {
+    return columnDefinitions?.map((column, index) => {
+      const isFirstColumn = isRoot && index === 0;
+
+      // Handle grouped columns
+      if (column.columns && column.columns.length > 0) {
+        return {
+          header: column.label || "",
+          columns: buildColumns(column.columns, false),
+        };
+      }
+
+      // Define the base column structure
+      const columnStructure = {
+        ...columnHelper.accessor(column.accessor, {
+          header: column.label || "",
+        }),
+      };
+
+      if (column.cellAccessors || column.customRenderer) {
+        columnStructure.cell = createCellFunction(
+          column.cellAccessors || [],
+          column.customRenderer,
+          isFirstColumn,
+          onRowToggleClick,
+          selectableRows
+        );
+      }
+
+      return columnStructure;
+    }) || [];
+  }, [columnHelper, onRowToggleClick, selectableRows]);
+
+  const columns = useMemo(() => buildColumns(columnDefinitions), [buildColumns, columnDefinitions]);
+
+  // Sorting configuration
+  const sorting = useMemo(() => ([{
+    id: columnDefinitions[0].accessor,
+    desc: sortControl && sortControl.value !== null ? !sortControl.value.desc : false,
+  }]), [columnDefinitions, sortControl]);
+
+  // Custom state based on features enabled
+  const customState = useCallback(() => {
+    if (sortControl && selectableRows) {
+      return { state: { expanded, sorting, rowSelection } };
+    } else if (sortControl) {
+      return { state: { expanded, sorting } };
+    } else if (selectableRows) {
+      return { state: { expanded, rowSelection } };
+    } else {
+      return { state: { expanded } };
+    }
+  }, [expanded, rowSelection, sortControl, selectableRows, sorting]);
+
+  // Pagination configuration
+  const paginationInitializer = useMemo(() => {
+    if (!pagination) return {};
+
+    return {
+      getPaginationRowModel: getPaginationRowModel(),
+      paginateExpandedRows: false,
+      initialState: {
+        pagination: {
+          pageIndex: paginationProps?.pageIndex ?? 0,
+          pageSize: paginationProps?.pageSize ?? 20,
+        },
+      },
+    };
+  }, [pagination, paginationProps]);
+
+  // Initialize the table
+  const table = useReactTable({
+    data: loading ? Array(loadingStateRowCount).fill({}) : (virtualizedRows ? dataChunk : tableData),
+    columns,
+    onExpandedChange: setExpanded,
+    getSubRows: (row: GenericObject) => row.children,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableSortingRemoval: false,
+    sortDescFirst: true,
+    onRowSelectionChange: setRowSelection,
+    getRowId: selectableRows ? row => row.id : undefined,
+    meta: {
+      columnDefinitions
+    },
+    ...customState(),
+    ...paginationInitializer,
+    ...tableOptions,
+  });
+
+  // Check if table has any sub-rows
+  const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
+  const selectedRowsLength = Object.keys(table.getState().rowSelection).length;
+
+  // Data fetching for virtualized view
+  const fetchNextPage = useCallback(() => {
+    if (isFetching || totalFetched >= fullData.length) return;
+
+    setIsFetching(true);
+    // Simulate API call delay
+    setTimeout(() => {
+      const nextChunk = fullData.slice(totalFetched, totalFetched + fetchSize);
+      setDataChunk(prev => [...prev, ...nextChunk]);
+      setTotalFetched(prev => prev + nextChunk.length);
+      setIsFetching(false);
+    }, 500);
+  }, [isFetching, totalFetched, fullData, fetchSize]);
+
+  // Update row count for loading state
+  const updateLoadingStateRowCount = useCallback(() => {
+    const rowsCount = table.getRowModel().rows.length;
+    if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
+      setLoadingStateRowCount(rowsCount);
+    }
+  }, [loadingStateRowCount, table]);
+
+  return {
+    table,
+    expanded,
+    setExpanded,
+    hasAnySubRows,
+    selectedRowsLength,
+    fetchNextPage,
+    updateLoadingStateRowCount,
+    rowSelection,
+    fullData,
+    totalFetched,
+    isFetching
+  };
+}

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -1,21 +1,14 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Row } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
 import { buildCss } from "../../utilities/props"
 import { globalProps } from "../../utilities/globalProps"
-import { isChrome } from "../Utilities/BrowserCheck"
-
-import LoadingInline from "../../pb_loading_inline/_loading_inline"
-import Checkbox from "../../pb_checkbox/_checkbox"
-
-import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
-import { LoadingCell } from "../Components/LoadingCell"
-import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { RegularTableView } from "../Components/RegularTableView"
+import { VirtualizedTableView } from "../Components/VirtualizedTableView"
 
 type TableBodyProps = {
   className?: string
@@ -35,18 +28,15 @@ export const TableBody = ({
 }: TableBodyProps) => {
 
   const {
-    columnDefinitions,
-    enableToggleExpansion,
-    handleExpandOrCollapse,
-    isPinnedLeft = false,
-    inlineRowLoading,
-    loading,
     responsive,
-    table,
-    selectableRows,
-    hasAnySubRows
+    isPinnedLeft = false,
+    virtualizer,
+    virtualizedRows,
+    enableVirtualization
   } = useContext(AdvancedTableContext)
 
+  const isVirtualized = virtualizedRows || enableVirtualization;
+
   const classes = classnames(
     buildCss("pb_advanced_table_body"),
     { 'pinned-left': responsive === "scroll" && isPinnedLeft },
@@ -54,93 +44,49 @@ export const TableBody = ({
     className
   )
 
-  const columnPinning = table.getState().columnPinning;
+  // Style for virtualized table container
+  const style: React.CSSProperties = virtualizer ? {
+    height: `${virtualizer.getTotalSize()}px`, // tells scrollbar how big the table is
+    position: 'relative', // needed for absolute positioning of rows
+    width: '100%',
+  } : {};
 
   return (
     <>
-      <tbody className={classes} 
+      <tbody
+          className={classes}
+          data-virtualized={isVirtualized ? 'true' : 'false'}
           id={id}
+          style={style}
       >
-        {table.getRowModel().rows.map((row: Row<GenericObject>) => {
-          const isExpandable = row.getIsExpanded()
-          const isFirstChildofSubrow = row.depth > 0 && row.index === 0
-          const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
-          const numberOfColumns = table.getAllFlatColumns().length
-          const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
-          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
-          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white"
-          return (
-            <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
-              {isFirstChildofSubrow && subRowHeaders && (
-                <SubRowHeaderRow
-                    collapsibleTrail={collapsibleTrail}
-                    enableToggleExpansion={enableToggleExpansion}
-                    onClick={handleExpandOrCollapse}
-                    row={row}
-                    subRowHeaders={subRowHeaders}
-                    table={table}
-                />
-              )}
-            <tr
-                className={`${rowColor} ${
-                  row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
-              }`}
-                id={`${row.index}-${row.id}-${row.depth}-row`}
-            >
-              {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
-              {selectableRows && !hasAnySubRows && (
-                  <td className="checkbox-cell">
-                    <Checkbox
-                        checked={row.getIsSelected()}
-                        disabled={!row.getCanSelect()}
-                        indeterminate={row.getIsSomeSelected()}
-                        name={row.id}
-                        onChange={row.getToggleSelectedHandler()}
-                    />
-                  </td>
-                )}
-              {row.getVisibleCells().map((cell, i) => {
-                const isPinnedLeft = columnPinning.left.includes(cell.column.id)
-                const isLastCell = cell.column.parent?.columns.at(-1)?.id === cell.column.id
-
-                return (
-                  <td
-                      align="right"
-                      className={classnames(
-                        `${cell.id}-cell position_relative`,
-                        isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left',
-                        isLastCell && 'last-cell',
-                      )}
-                      key={`${cell.id}-data`}
-                  >
-                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
-                    <span id={`${cell.id}-span`}>
-                      {loading ? (
-                        <LoadingCell />
-                      ) : (
-                        flexRender(cell.column.columnDef.cell, cell.getContext())
-                      )}
-                    </span>
-                  </td>
-                )
-              })}
-            </tr>
+        {isVirtualized && virtualizer ? (
+          // Virtualized table view
+          <VirtualizedTableView
+              collapsibleTrail={collapsibleTrail}
+              subRowHeaders={subRowHeaders}
+          />
+        ) : (
+          // Regular non-virtualized table view
+          <RegularTableView
+              collapsibleTrail={collapsibleTrail}
+              subRowHeaders={subRowHeaders}
+          />
+        )}
 
-              {/* Display LoadingInline if Row Data is querying and there are no children already */}
-              {isDataLoading ? (
-                <tr key={`${row.id}-row`}>
-                  <td colSpan={numberOfColumns}
-                      style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
-                  >
-                    <LoadingInline />
-                  </td>
-                </tr>
-              ) : null}
-            </React.Fragment>
-          )
-        })}
+        {/* Fallback for when virtualization should be enabled but virtualizer isn't available */}
+        {isVirtualized && !virtualizer && (
+          <tr>
+            <td
+                colSpan={999}
+                style={{ padding: '10px', textAlign: 'center' }}
+            >
+              <div>No data to display.</div>
+            </td>
+          </tr>
+        )}
       </tbody>
     </>
-  )
+  );
 }
+
+export default TableBody;

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Row, Getter } from "@tanstack/react-table";
+import { GenericObject } from "../../types";
+import { CustomCell } from "../Components/CustomCell";
+
+/**
+ * Creates a cell render function for table columns
+ *
+ * @param cellAccessors Array of accessors to use based on row depth
+ * @param customRenderer Optional custom renderer function
+ * @param isFirstColumn Whether this is the first column (special handling)
+ * @param onRowToggleClick Optional callback for row toggle
+ * @param selectableRows Whether rows are selectable
+ */
+export const createCellFunction = (
+  cellAccessors: string[],
+  customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element,
+  isFirstColumn?: boolean,
+  onRowToggleClick?: (row: Row<GenericObject>) => void,
+  selectableRows?: boolean
+) => {
+  // Add display name to the returned function
+  const cellRenderer = ({
+    row,
+    getValue,
+  }: {
+    row: Row<GenericObject>
+    getValue: Getter<string>
+  }) => {
+    const rowData = row.original;
+
+    if (isFirstColumn) {
+      switch (row.depth) {
+        case 0: {
+          return (
+            <CustomCell
+                customRenderer={customRenderer}
+                getValue={getValue}
+                onRowToggleClick={onRowToggleClick}
+                row={row}
+                selectableRows={selectableRows}
+            />
+          );
+        }
+        default: {
+          // Handle other depths based on cellAccessors
+          const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
+          const accessorValue = rowData[depthAccessor];
+          return accessorValue ? (
+            <CustomCell
+                customRenderer={customRenderer}
+                onRowToggleClick={onRowToggleClick}
+                row={row}
+                selectableRows={selectableRows}
+                value={accessorValue}
+            />
+          ) : (
+            "N/A"
+          );
+        }
+      }
+    }
+
+    return customRenderer
+      ? customRenderer(row, getValue())
+      : getValue();
+  };
+
+  // Add a display name to the function to fix the react/display-name warning
+  cellRenderer.displayName = 'CellRenderer';
+
+  return cellRenderer;
+};

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -0,0 +1,52 @@
+import { Row } from "@tanstack/react-table"
+import { GenericObject } from "../../types"
+
+/**
+ * Determines the background color class for a row
+ */
+export const getRowColorClass = (
+  row: Row<GenericObject>,
+  inlineRowLoading: boolean
+): string => {
+  const isExpandable = row.getIsExpanded();
+  const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
+  const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
+
+  return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
+}
+
+/**
+ * Determines if loading indicator should be shown for a row
+ */
+export const shouldShowLoadingIndicator = (
+  row: Row<GenericObject>,
+  inlineRowLoading: boolean,
+  cellAccessorsLength: number
+): boolean => {
+  const isExpandable = row.getIsExpanded();
+  const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
+
+  return isExpandable &&
+    (inlineRowLoading && rowHasNoChildren) &&
+    (row.depth < cellAccessorsLength);
+}
+
+/**
+ * Creates a virtual item style object for virtualized rows
+ */
+export const createVirtualItemStyle = (startPosition: number): React.CSSProperties => {
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    transform: `translateY(${startPosition}px)`,
+  };
+}
+
+/**
+ * Calculates padding left based on row depth
+ */
+export const getDepthPaddingLeft = (depth: number): string => {
+  return `${depth === 0 ? 0.5 : (depth * 2)}em`;
+}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/TableContainerStyles.ts

@@ -0,0 +1,80 @@
+/**
+ * Utility functions to generate styles for table container
+ */
+
+/**
+ * Creates styles for a virtualized table container
+ * These styles are critical for the virtualizer to work properly
+ */
+export const getVirtualizedContainerStyles = (maxHeight?: string): React.CSSProperties => {
+    // Calculate height based on maxHeight prop or use default
+    let heightValue = '600px'; // Default height
+
+    if (maxHeight) {
+      switch (maxHeight) {
+        case 'xs':
+          heightValue = '200px';
+          break;
+        case 'sm':
+          heightValue = '300px';
+          break;
+        case 'md':
+          heightValue = '400px';
+          break;
+        case 'lg':
+          heightValue = '500px';
+          break;
+        case 'xl':
+          heightValue = '600px';
+          break;
+        case 'xxl':
+          heightValue = '700px';
+          break;
+        case 'xxxl':
+          heightValue = '800px';
+          break;
+        default:
+          if (maxHeight !== 'auto') {
+            heightValue = maxHeight; // Use custom value if provided
+          }
+      }
+    }
+
+    return {
+      overflow: 'auto',       // Critical: must have overflow:auto to enable scrolling
+      position: 'relative',   // Required for absolute positioning of virtualized rows
+      height: heightValue,    // Must have fixed height (not auto) for virtualization
+      width: '100%',          // Fill container width
+    };
+  };
+
+  /**
+   * Creates consistent row styles for virtualized table rows
+   * Matches the virtualized row height to the standard table
+   */
+  export const getVirtualizedRowStyle = (startPosition: number): React.CSSProperties => {
+    return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '40px', // Match standard table row height
+      transform: `translateY(${startPosition}px)`,
+      tableLayout: 'fixed',
+    };
+  };
+
+  /**
+   * Get height estimates for different row types
+   */
+  export const getRowHeightEstimate = (rowType: 'header' | 'row' | 'loading') => {
+    switch (rowType) {
+      case 'header':
+        return 40; // Header height
+      case 'loading':
+        return 30; // Loading indicator height
+      case 'row':
+      default:
+        return 40; // Standard row height - match this to your design system
+    }
+  };