playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -31,12 +31,46 @@
     width: 100%;
   }
 
-    .row-selection-actions-card {
-      border-bottom-right-radius: 0px !important;
-      border-bottom-left-radius: 0px !important;
-      border-bottom-color: transparent;
-      transition: height 300ms ease;
+  // Virtualized table styles
+  .virtualized-table-row {
+    display: table !important;
+    table-layout: fixed !important;
+    width: 100% !important;
+
+    td {
+      display: table-cell !important;
+      box-sizing: border-box !important;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
+
+    // Ensure the first column has proper width
+    td:first-child {
+      min-width: 180px;
+    }
+
+    // First column (typically the checkbox column)
+    td:first-child.checkbox-cell {
+      width: 40px !important; // Set a fixed width that matches header
+      min-width: 40px !important;
+      box-sizing: border-box !important;
+      text-align: center;
+    }
+
+    // Ensure the first data column has proper alignment with header
+    td:first-of-type:not(.checkbox-cell) {
+      min-width: 180px;
+      text-align: left;
+    }
+  }
+
+  .row-selection-actions-card {
+    border-bottom-right-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+    border-bottom-color: transparent;
+    transition: height 300ms ease;
+  }
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -67,6 +101,23 @@
       border-top-left-radius: 0px !important;
       border-top-right-radius: 0px !important;
     }
+
+    // Set fixed width for header cells to match table body
+    th {
+      box-sizing: border-box !important;
+      // Apply min-width to ensure consistent sizing
+      &.table-header-cells:first-child,
+      &.table-header-cells-custom:first-child {
+        min-width: 180px;
+      }
+
+      // Set fixed width for checkbox column
+      &.table-header-cells-custom {
+        width: 40px !important;
+        min-width: 40px !important;
+        box-sizing: border-box !important;
+      }
+    }
   }
 
   .pb_advanced_table_body {
@@ -87,6 +138,36 @@
         padding-left: 0px;
       }
     }
+
+    // Fix virtualized row borders
+    tr.virtualized-table-row {
+      border-bottom: 1px solid $border_light;
+
+      &.bg-silver {
+        td:first-child {
+          background-color: lighten($silver, $opacity_7);
+        }
+      }
+
+      &.bg-white {
+        td:first-child {
+          background-color: $white;
+        }
+      }
+
+      &.bg-row-selection {
+        td:first-child {
+          background-color: $info_subtle;
+        }
+      }
+    }
+    td {
+      [class^=pb_text_input_kit] .text_input_wrapper input {
+        padding: 0 $space_xxs;
+        font-size: 14px;
+        text-align: right;
+      }
+    }
   }
 
   .table-header-cells-active:first-child {
@@ -129,7 +210,6 @@
     max-height: 1920px;
     overflow-y: auto;
   }
-  
   // Icons
   .button-icon {
     display: flex;
@@ -251,6 +331,19 @@
       .bg-white td:first-child {
           background-color: $white;
       }
+
+      .virtualized-table-row {
+        &.bg-silver td:first-child {
+          background-color: lighten($silver, $opacity_7);
+        }
+        &.bg-white td:first-child {
+          background-color: $white;
+        }
+        &.bg-row-selection td:first-child {
+          background-color: $info_subtle;
+        }
+      }
+
       .row-selection-actions-card {
         border-right-width: 0px;
         border-left-width: 0px;
@@ -289,6 +382,25 @@
       background: $bg_dark;
     }
 
+    // Dark mode virtualized rows
+    .virtualized-table-row {
+      &.bg-white {
+        background: $bg_dark_card !important;
+
+        td:first-child {
+          background: $bg_dark_card !important;
+        }
+      }
+
+      &.bg-silver {
+        background: $bg_dark;
+
+        td:first-child {
+          background: $bg_dark;
+        }
+      }
+    }
+
     .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
@@ -359,6 +471,17 @@
         .bg-white td:first-child {
           background-color: $bg_dark_card;
         }
+
+        // Dark mode virtualized rows
+        .virtualized-table-row {
+          &.bg-silver td:first-child {
+            background-color: $bg_dark;
+          }
+          &.bg-white td:first-child {
+            background-color: $bg_dark_card;
+          }
+        }
+
         .sticky-header {
           thead {
             th:first-child {
@@ -370,4 +493,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,38 +1,23 @@
-import React, { useState, useEffect, useCallback, useRef } from "react"
-import classnames from "classnames"
+import React, { useRef, useEffect } from "react";
+import classnames from "classnames";
 
-import { GenericObject } from "../types"
+import { GenericObject } from "../types";
+import { Row, RowSelectionState } from "@tanstack/react-table";
 
-import {
-  createColumnHelper,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  Row,
-  useReactTable,
-  Getter,
-  RowSelectionState
-} from "@tanstack/react-table"
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
-import { globalProps, GlobalProps } from "../utilities/globalProps"
+import Table from "../pb_table/_table";
+import { AdvancedTableProvider } from "./Context/AdvancedTableContext";
+import { getVirtualizedContainerStyles } from "./Utilities/TableContainerStyles";
 
-import Table from "../pb_table/_table"
-import Card from "../pb_card/_card"
-import Caption from "../pb_caption/_caption"
-import Flex from "../pb_flex/_flex"
-import FlexItem from "../pb_flex/_flex_item"
+import { TableHeader } from "./SubKits/TableHeader";
+import { TableBody } from "./SubKits/TableBody";
+import TablePagination from "./Components/TablePagination";
+import TableActionBar from "./Components/TableActionBar";
 
-import AdvancedTableContext from "./Context/AdvancedTableContext"
-
-import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
-import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
-
-import { CustomCell } from "./Components/CustomCell"
-import { TableHeader } from "./SubKits/TableHeader"
-import { TableBody } from "./SubKits/TableBody"
-import Pagination from "../pb_pagination/_pagination"
+import { useTableState } from "./Hooks/useTableState";
+import { useTableActions } from "./Hooks/useTableActions";
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -63,7 +48,8 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
-} & GlobalProps
+  virtualizedRows?: boolean
+} & GlobalProps;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
@@ -95,282 +81,149 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
-  } = props
-
-  const [loadingStateRowCount, setLoadingStateRowCount] = useState(
-    initialLoadingRowsCount
-  )
-
-  // Create a local state for expanded and setExpanded if expandedControl not used
-  const [localExpanded, setLocalExpanded] = useState({})
-
-  // Determine whether to use the prop or the local state
-  const expanded = expandedControl ? expandedControl.value : localExpanded
-  const setExpanded = expandedControl
-    ? expandedControl.onChange
-    : setLocalExpanded
-
-  const columnHelper = createColumnHelper()
-
-  //Row Selection
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-
-  //Create cells for columns, with customization for first column
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, isFirstColumn?: boolean) => {
-    const columnCells = ({
-      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()
-    }
-    return columnCells
-  }
+    virtualizedRows = false,
+  } = props;
 
-  const buildColumns = (columnDefinitions: GenericObject[], isRoot= true): any => {
-    return (
-      columnDefinitions &&
-      columnDefinitions.map((column, index) => {
-        const isFirstColumn = isRoot && index === 0; 
-        //Checking to see if grouped column or not
-        if (column.columns && column.columns.length > 0) {
-          return {
-            header: column.label || "",
-            columns: buildColumns(column.columns, false),
-          };
-        } else {
-          // Define the base column structure
-          const columnStructure = {
-            ...columnHelper.accessor(column.accessor, {
-              header: column.label || "",
-            }),
-          };
+  // Component refs
+  const tableWrapperRef = useRef<HTMLDivElement>(null);
 
-          if (column.cellAccessors || column.customRenderer) {
-            columnStructure.cell = createCellFunction(
-              column.cellAccessors,
-              column.customRenderer,
-              isFirstColumn
-            );
-          }
-
-          return columnStructure;
-        }
-      })
-    );
-  };
-
-  //Create column array in format needed by Tanstack
-  const columns = buildColumns(columnDefinitions);
-
-  //Syntax for sorting Array if we want to manage state ourselves
-  const sorting = [
-    {
-      id: columnDefinitions[0].accessor,
-      desc:
-        sortControl && sortControl.value !== null
-          ? !sortControl.value.desc
-          : false,
-    },
-  ]
-
-  const customState = () => {
-    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 } }
-    }
-  }
-
-  const paginationInitializer = pagination ? {
-    getPaginationRowModel: getPaginationRowModel(),
-    paginateExpandedRows: false,
-    initialState: {
-        pagination: {
-            pageIndex: paginationProps?.pageIndex ?? 0,
-            pageSize: paginationProps?.pageSize ??  20,
-        },
-    },
-} : {}
-
-//initialize table
-  const table = useReactTable({
-    data: loading ? Array(loadingStateRowCount).fill({}) : 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,
-    ...customState(),
-    ...paginationInitializer,
-    ...tableOptions,
-  })
-
-  const tableRows = table.getRowModel()
-
-  const hasAnySubRows = tableRows.rows.some(row => row.subRows && row.subRows.length > 0);
-  const selectedRowsLength = Object.keys(table.getState().rowSelection).length
+  // Initialize table state
+  const {
+    table,
+    expanded,
+    setExpanded,
+    hasAnySubRows,
+    selectedRowsLength,
+    fetchNextPage,
+    updateLoadingStateRowCount,
+    fullData,
+    totalFetched,
+    isFetching
+  } = useTableState({
+    tableData,
+    columnDefinitions,
+    expandedControl,
+    sortControl,
+    onRowToggleClick,
+    selectableRows,
+    initialLoadingRowsCount,
+    loading,
+    pagination,
+    paginationProps,
+    virtualizedRows,
+    tableOptions,
+    onRowSelectionChange
+  });
 
-  useEffect(() => {
-    if (onRowSelectionChange) {
-      onRowSelectionChange(table.getState().rowSelection)
-    }
-  } , [table.getState().rowSelection, onRowSelectionChange])
+  // Initialize table actions
+  const {
+    handleExpandOrCollapse,
+    onPageChange,
+    fetchMoreOnBottomReached
+  } = useTableActions({
+    table,
+    expanded,
+    setExpanded,
+    onToggleExpansionClick,
+    onRowSelectionChange
+  });
 
   // Set table row count for loading state
-  const updateLoadingStateRowCount = useCallback(() => {
-    const rowsCount = table.getRowModel().rows.length
-    if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
-      setLoadingStateRowCount(rowsCount)
-    }
-  }, [tableData, loadingStateRowCount])
-
   useEffect(() => {
     if (!loading) {
-      updateLoadingStateRowCount()
+      updateLoadingStateRowCount();
     }
-  }, [loading, updateLoadingStateRowCount])
+  }, [loading, updateLoadingStateRowCount]);
 
-  const handleExpandOrCollapse = async (row: Row<GenericObject>) => {
-    onToggleExpansionClick && onToggleExpansionClick(row)
-  
-    const expandedState = expanded;
-    const targetParent = row?.parentId;
-    const updatedRows = await updateExpandAndCollapseState(tableRows, expandedState, targetParent)
-    setExpanded(updatedRows)
-  }
+  // Check for infinite scroll
+  useEffect(() => {
+    fetchMoreOnBottomReached(
+      tableWrapperRef.current,
+      fetchNextPage,
+      isFetching,
+      totalFetched,
+      fullData.length
+    );
+  }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  // Build CSS classes and props
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
-    maxHeight ? `advanced-table-max-height-${maxHeight}` : '', // max height as kit prop not global prop to control overflow-y
+    maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     globalProps(props),
     className
-  )
+  );
 
-  const onPageChange = (page: number) => {
-    table.setPageIndex(page - 1)
-  }
-//When to show the actions bar as a whole
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
+  // Table wrapper styling with virtualization support
+  const tableWrapperStyle = virtualizedRows
+    ? getVirtualizedContainerStyles(maxHeight)
+    : {};
 
-  //Ref and useEffect for animating the actions bar
-  const cardRef = useRef(null);
-  useEffect(() => {
-    if (cardRef.current) {
-      if (isActionBarVisible) {
-        showActionBar(cardRef.current);
-      } else {
-        hideActionBar(cardRef.current);
-      }
-    }
-  }, [isActionBarVisible]);
+  // Visibility flag for action bar
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
-    <div {...ariaProps} 
-        {...dataProps} 
+    <div
+        {...ariaProps}
+        {...dataProps}
         {...htmlProps}
-        className={classes} 
+        className={classes}
         id={id}
+        onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
+          e.currentTarget,
+          fetchNextPage,
+          isFetching,
+          totalFetched,
+          fullData.length
+        ) : undefined}
+        ref={tableWrapperRef}
+        style={tableWrapperStyle as React.CSSProperties}
     >
-      <AdvancedTableContext.Provider
-          value={{
-            columnDefinitions,
-            enableToggleExpansion,
-            expanded,
-            expandedControl,
-            handleExpandOrCollapse,
-            inlineRowLoading,
-            isActionBarVisible,
-            loading,
-            responsive,
-            setExpanded,
-            sortControl,
-            table,
-            toggleExpansionIcon,
-            showActionsBar,
-            selectableRows,
-            hasAnySubRows
-          }}
+      <AdvancedTableProvider
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion={enableToggleExpansion}
+          enableVirtualization={virtualizedRows}
+          expanded={expanded}
+          expandedControl={expandedControl}
+          handleExpandOrCollapse={handleExpandOrCollapse}
+          hasAnySubRows={hasAnySubRows}
+          inlineRowLoading={inlineRowLoading}
+          isActionBarVisible={isActionBarVisible}
+          loading={loading}
+          responsive={responsive}
+          selectableRows={selectableRows}
+          setExpanded={setExpanded}
+          showActionsBar={showActionsBar}
+          sortControl={sortControl}
+          subRowHeaders={tableOptions?.subRowHeaders}
+          table={table}
+          tableContainerRef={tableWrapperRef}
+          toggleExpansionIcon={toggleExpansionIcon}
+          virtualizedRows={virtualizedRows}
       >
-        <>
-          {pagination &&
-              <Pagination
-                  current={table.getState().pagination.pageIndex + 1}
-                  key={`pagination-top-${table.getState().pagination.pageIndex + 1}`}
-                  marginBottom="xs"
-                  onChange={onPageChange}
-                  range={paginationProps?.range ? paginationProps?.range : 5}
-                  total={table.getPageCount()}
-                  />
-          }
-          <Card
-              borderNone={!isActionBarVisible}
-              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
-              htmlOptions={{ ref: cardRef as any }}
-              padding={`${isActionBarVisible ? "xs" : "none"}`}
-          >
-            <Flex alignItems="center" 
-                justify="between"
-            >
-              <Caption color="light" 
-                  paddingLeft="xs" 
-                  size="xs"
-              >
-                {selectedRowsLength} Selected
-              </Caption>
-              <FlexItem>{actions}</FlexItem>
-            </Flex>
-          </Card>
+        <React.Fragment>
+          {/* Top Pagination */}
+          {pagination && (
+            <TablePagination
+                onChange={onPageChange}
+                position="top"
+                range={paginationProps?.range}
+                table={table}
+            />
+          )}
+
+          {/* Selection Action Bar */}
+          <TableActionBar
+              actions={actions}
+              isVisible={isActionBarVisible}
+              selectedCount={selectedRowsLength}
+          />
+
+          {/* Main Table */}
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}
@@ -388,23 +241,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
               </>
             )}
           </Table>
-          {pagination &&
-            <Pagination
-                current={table.getState().pagination.pageIndex + 1}
-                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
-                marginTop="xs"
+
+          {/* Bottom Pagination */}
+          {pagination && (
+            <TablePagination
                 onChange={onPageChange}
-                range={paginationProps?.range ? paginationProps?.range : 5}
-                total={table.getPageCount()}
+                position="bottom"
+                range={paginationProps?.range}
+                table={table}
             />
-          }
-        </>
-      </AdvancedTableContext.Provider>
+          )}
+        </React.Fragment>
+      </AdvancedTableProvider>
     </div>
-  )
-}
+  );
+};
 
-AdvancedTable.Header = TableHeader
-AdvancedTable.Body = TableBody
+// Re-export sub-components
+AdvancedTable.Header = TableHeader;
+AdvancedTable.Body = TableBody;
 
-export default AdvancedTable
+export default AdvancedTable;