playbook_ui 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846

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;

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -3,8 +3,8 @@
           <% if content.present? %>
             <% content.presence %>
           <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
           <% end %>
         <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -20,6 +20,8 @@ module Playbook
       prop :max_height, type: Playbook::Props::Enum,
                         values: %w[auto xs sm md lg xl xxl xxxl],
                         default: "auto"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
@@ -32,6 +34,14 @@ module Playbook
       def max_height_classname
         max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
       end
+
+      def selected_rows
+        @selected_rows ||= []
+      end
+
+      def selected_rows_length
+        selected_rows.length
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCollapsibleTrail = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx

@@ -1,5 +1,7 @@
 import React from "react"
-import { AdvancedTable, Pill } from "playbook-ui"
+import AdvancedTable from "../../pb_advanced_table/_advanced_table"
+import Pill from "../../pb_pill/_pill"
+
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableColumnHeadersCustomCell = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnHeadersMultiple = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx

@@ -1,5 +1,12 @@
 import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Pill from "../../pb_pill/_pill"
+import Body from "../../pb_body/_body"
+import Flex from "../../pb_flex/_flex"
+import Detail from "../../pb_detail/_detail"
+import Caption from "../../pb_caption/_caption"
+import Badge from "../../pb_badge/_badge"
+import Title from "../../pb_title/_title"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableDefault = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableExpandedControl = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
+
+const AdvancedTableInfiniteScroll = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          virtualizedRows
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableInfiniteScroll