playbook_ui 14.9.0 → 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7a7f25e68582acb4d819f3a13e444e023d5e9a95bff66d1db87ee30c8697cf8
-  data.tar.gz: 4f818bdb6d0a5f7deb43dea03ec99fddc97b0fbfb0cefff7cae577eff2fcabac
+  metadata.gz: ff11190f99fd3526f682637bab45adc5e4c6622abc098105e921812d32865a0d
+  data.tar.gz: 82f35cf6cbaa49b39804d96662fef1f95d1bf94a6ef505d9ae629a7b55ec27bb
 SHA512:
-  metadata.gz: 86090fdf6679c81084b2b9e1373730a97b8dbfcc16dd265bf798e6056d65b970aec7e4d70c7f4ad480136b4ee600d98a716ade5deb8ade445fd83e9a6f851ce8
-  data.tar.gz: 6b04543f4665c4205c70f887a3ae02d1c7e264b97b0f76bd998320be0da33d067f14f3cce7e819e809b25780256366048a3afb5d6bf04b0d156ea0936b59ae7b
+  metadata.gz: ddd191fb90d1c45fb7c29aa490b5468ea44d0b3f75dfcac06ec498710571a771ae15892f6629123488c979881fba11f5aa1a0dce6e40d964a45020e4bd3df181
+  data.tar.gz: 37e12958a52b826dfceb58a28a8840fceb209ad9138b54d3d192e02cee52f59a4b8bd1f7994461812aa7ebc179302a91b4069ff256101a6d0b61a848c4a4ca5d

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -3,18 +3,13 @@ import React from "react"
 //CollapsibleTrail component
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
   const style: { [key: string]: string | number } = {
-    position: "absolute",
     left: `${leftOffset}em`,
-    top: 0,
-    bottom: 0,
-    width: "2px",
-    backgroundColor: "#E4E8F0",
   }
 
   return (
     <div 
         className="collapsible-trail" 
-        style={style} 
+        style={style}
     />
   )
 }

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -40,46 +40,59 @@ export const TableHeaderCell = ({
 
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
-      const sortIsDesc = header.column.getIsSorted() === "desc"
+      const sortIsDesc = header?.column.getIsSorted() === "desc"
       sortIsDesc
         ? sortControl.onChange({ desc: true })
         : sortControl.onChange({ desc: false })
     } else {
-      header.column.getToggleSortingHandler()(event)
+      header?.column.getToggleSortingHandler()(event)
     }
   }
 
-const cellClassName = classnames("table-header-cells", 
-  `${isChrome() ? "chrome-styles" : ""}`, 
+  const isLeafColumn =
+  header?.column.getLeafColumns().length === 1 &&
+  header?.column.getLeafColumns()[0].id === header.column.id
+
+  const isLastHeaderCell =
+    header?.column.parent?.columns.at(-1) === header?.column ||
+    (header?.colSpan > 1 && header?.column.parent !== undefined);
+ 
+const cellClassName = classnames(
+  "table-header-cells",
+  `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
-  { 'pinned-left': responsive === "scroll" && isPinnedLeft },
-)
+  { "pinned-left": responsive === "scroll" && isPinnedLeft },
+   isLastHeaderCell ? "last-header-cell" : ""
+); 
 
 const cellId = `${loading ? 
-    `loading-${header.id}`
-    : `${header.id}`
+    `loading-${header?.id}`
+    : `${header?.id}`
 }`
 
 const isToggleExpansionEnabledLoading =
-  header.index === 0 &&
+  header?.index === 0 &&
   loading &&
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
   
 const isToggleExpansionEnabled =
-  header.index === 0 &&
+  header?.index === 0 &&
   !loading &&
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
+const justifyHeader = isLeafColumn ? "end" : "center"
+
   return (
     <th
         align="right"
         className={cellClassName}
+        colSpan={header?.colSpan}
         id={cellId}
-        key={`${header.id}-header`}
+        key={`${header?.id}-header`}
     >
-      {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
+      {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
         <Flex alignItems="center">
           {headerChildren}
           <div>
@@ -89,7 +102,7 @@ const isToggleExpansionEnabled =
       ) : (
         <Flex
             alignItems="center"
-            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
+            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
         >
           {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
@@ -100,11 +113,11 @@ const isToggleExpansionEnabled =
             )}
 
           <Flex
-              className={`${header.index === 0 &&
+              className={`${header?.index === 0 &&
                 enableSorting &&
                 "header-sort-button pb_th_link"}`}
-              cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
-              {...(header.index === 0 &&
+              cursor={header?.index === 0 && enableSorting ? "pointer" : "default"}
+              {...(header?.index === 0 &&
                 enableSorting && {
                   htmlOptions: {
                     onClick: (event: React.MouseEvent) => toggleSortButton(event),
@@ -116,14 +129,14 @@ const isToggleExpansionEnabled =
                     tabIndex: 0,
                   },
                 })}
-              justify={header.index === 0 && enableSorting ? "between" : "none"}
+              justify={header?.index === 0 && enableSorting ? "between" : "none"}
               paddingLeft={enableSorting ? "xxs" : "xs"}
           >
             <div>
-              {flexRender(header.column.columnDef.header, header.getContext())}
+              {flexRender(header?.column.columnDef.header, header?.getContext())}
             </div>
 
-            {header.index === 0 &&
+            {header?.index === 0 &&
               header.column.getCanSort() &&
               enableSorting &&
               (loading ? (

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

@@ -86,6 +86,7 @@ export const TableBody = ({
             >
               {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
@@ -93,7 +94,8 @@ export const TableBody = ({
                       className={classnames(
                         `${cell.id}-cell position_relative`,
                         isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left'
+                        isPinnedLeft && 'pinned-left',
+                        isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
                   >

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

@@ -31,6 +31,43 @@
     min-width: 180px;
   }
 
+  .pb_advanced_table_header {
+    > tr:not(:first-child) {
+      .last-header-cell {
+        border-right: 1px solid $border_light !important;
+      }
+    
+      th {
+        border-radius: 0px !important;
+        border-width: 0 0 1px 0 !important;
+      }
+      th:first-child {
+        border-left-width: 1px !important;
+        @media only screen and (max-width: $screen-xl-min) {
+          border-left-width: 0 !important;
+        }
+      }
+      th:last-child {
+        border-right-width: 1px !important;
+        @media only screen and (max-width: $screen-xl-min) {
+          border-right-width: 0 !important;
+        }
+      }
+    }
+    th[colspan]:not([colspan="1"]) {
+      border-right: 1px solid $border_light;
+    }
+
+  
+  }
+
+  .pb_advanced_table_body {
+    .last-cell {
+      border-right: 1px solid $border_light !important;
+    }
+  }
+
+
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
@@ -110,9 +147,17 @@
     height: auto;
   }
 
+  .collapsible-trail {
+    background-color: $border_light;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+  }
+
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {  
-    &[class*="table-responsive-scroll"] {
+    &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
                   -1px 0 0 0px $border_light;
@@ -150,7 +195,7 @@
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
-    &[class*="table-responsive-scroll"] {
+    &[class*="advanced-table-responsive-scroll"] {
       overflow-x: visible;
     }
   }
@@ -200,7 +245,7 @@
     }
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
-      &[class*="table-responsive-scroll"] {
+      &[class*="advanced-table-responsive-scroll"] {
         border-radius: 4px;
         box-shadow: 1px 0 0 0px $border_dark,
                     -1px 0 0 0px $border_dark;

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

@@ -7,6 +7,7 @@ import {
   createColumnHelper,
   getCoreRowModel,
   getExpandedRowModel,
+  getPaginationRowModel,
   getSortedRowModel,
   Row,
   useReactTable,
@@ -25,6 +26,7 @@ import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelper
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
 import { TableBody } from "./SubKits/TableBody"
+import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -42,6 +44,8 @@ type AdvancedTableProps = {
   loading?: boolean | string
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
+  pagination?: boolean,
+  paginationProps?: GenericObject
   responsive?: "scroll" | "none",
   sortControl?: GenericObject
   tableData: GenericObject[]
@@ -67,6 +71,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
+    pagination = false,
+    paginationProps,
     responsive = "scroll",
     sortControl,
     tableData,
@@ -136,27 +142,41 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
     return columnCells
   }
-//Create column array in format needed by Tanstack
-  const columns =
-    columnDefinitions &&
+
+  const buildColumns = (columnDefinitions: GenericObject[]): any => {
+    return (
+      columnDefinitions &&
       columnDefinitions.map((column, index) => {
-      // Define the base column structure
-      const columnStructure = {
-        ...columnHelper.accessor(column.accessor, {
-          header: column.label,
-        }),
-      }
+        //Checking to see if grouped column or not
+        if (column.columns && column.columns.length > 0) {
+          return {
+            header: column.label || "",
+            columns: buildColumns(column.columns),
+          };
+        } else {
+          // 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,
-      index
-    )
-  }
+          if (column.cellAccessors || column.customRenderer) {
+            columnStructure.cell = createCellFunction(
+              column.cellAccessors,
+              column.customRenderer,
+              index
+            );
+          }
 
-  return columnStructure
-})
+          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 = [
@@ -177,6 +197,17 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
   }
 
+  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,
@@ -189,6 +220,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     enableSortingRemoval: false,
     sortDescFirst: true,
     ...expandAndSortState(),
+    ... paginationInitializer,
     ...tableOptions,
   })
 
@@ -222,11 +254,15 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
-    `table-responsive-${responsive}`,
+    `advanced-table-responsive-${responsive}`,
     globalProps(props),
     className
   )
 
+  const onPageChange = (page: number) => {
+    table.setPageIndex(page - 1)
+  }
+
   return (
     <div {...ariaProps} 
         {...dataProps} 
@@ -250,23 +286,45 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             toggleExpansionIcon,
           }}
       >
-        <Table
-            className={`${loading ? "content-loading" : ""}`}
-            dark={dark}
-            dataTable
-            numberSpacing="tabular"
-            responsive="none"
-            {...tableProps}
-        >
-          {children ? (
-            children
-          ) : (
-            <>
-              <TableHeader />
-              <TableBody />
-            </>
-          )}
-        </Table>
+        <>
+          {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()}
+                  />
+          }
+          <Table
+              className={`${loading ? "content-loading" : ""}`}
+              dark={dark}
+              dataTable
+              numberSpacing="tabular"
+              responsive="none"
+              {...tableProps}
+          >
+            {children ? (
+              children
+            ) : (
+              <>
+                <TableHeader />
+                <TableBody />
+              </>
+            )}
+          </Table>
+          {pagination &&
+            <Pagination
+                current={table.getState().pagination.pageIndex + 1}
+                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
+                marginTop="xs"
+                onChange={onPageChange}
+                range={paginationProps?.range ? paginationProps?.range : 5}
+                total={table.getPageCount()}
+            />
+          }
+        </>
       </AdvancedTableContext.Provider>
     </div>
   )

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -468,7 +468,7 @@ test("responsive prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
+  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-scroll")
 })
 
 test("responsive none prop functions as expected", () => {
@@ -483,7 +483,7 @@ test("responsive none prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
+  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-none")
 })
 
 test("customRenderer prop functions as expected", () => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb

@@ -0,0 +1,36 @@
+<% column_definitions = [
+    {
+      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",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md

@@ -0,0 +1 @@
+`collapsible_trail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.

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

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

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

@@ -0,0 +1 @@
+Use a nested `columns` array in your columnDefinitions to create multiple header rows. Any column with `columns` is treated as a grouped header, and its child columns are displayed beneath it.

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { AdvancedTable } from "playbook-ui";
+import MOCK_DATA from "./advanced_table_mock_data.json";
+
+const AdvancedTableColumnHeadersMultiple = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  );
+};
+
+export default AdvancedTableColumnHeadersMultiple;

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

@@ -0,0 +1 @@
+Multiple levels of column headers can also be rendered as seen here.