playbook_ui 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 → 14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5274

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f8792edbc1bba55bdb026a17142b4ec1eda307af7043e0ab9900ea3e92a78bf
-  data.tar.gz: 574614453f812f73b094fa52f2ce793b73f880630c94cd813e7c63f2ce5ad891
+  metadata.gz: 80b37662bebc6f6f7e4e45d7ded73d10ea7fc90ba038eb1ff0282977b56aaf45
+  data.tar.gz: 9966bfe67740a8c489bca09defda4e00643f63a4d2fce90fee1bd97908f6f676
 SHA512:
-  metadata.gz: dfef0aea6e35c15c7876b205c5103191b233bad3346654f2b1312557d3d79420e56939752fbb4b09d627ecd2b0b6d0c19bac23b5325f6a14a03c742120245cd8
-  data.tar.gz: c33eb3ac3b988bfbbfd02d8088cd91dcdbe81f92457c94739910653202337a355ff15a79b8c27244ebbbe507e44563039fde131eb3dfc62034548ccdc75dda5b
+  metadata.gz: ebae5c57518c2e101d13eb25a2f1ce3e5b34ec0960136c48698e489a7e07e33a1dc65e22249e26082df31b399a3c267385e5e7c7abc4f625a41f01c52add4732
+  data.tar.gz: e99ffce613a963251b91e62b05e77037391574b3866f14a63ddc5f92dd0cae5f4a7b9b56bdea482572629ae859cc82f6293962391b3e35341cae77345a3f070e

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,37 @@
     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;
+      }
+    }
+    th[colspan]:not([colspan="1"]) {
+      border-right: 1px solid $border_light !important;
+    }
+  }
+
+  .pb_advanced_table_body {
+    .last-cell {
+      border-right: 1px solid $border_light !important;
+    }
+    tr td:first-child {
+      padding-left: 8px !important;
+    }
+    tr .pb_table_td:last-child {
+      padding-right: 8px !important;
+    }
+  }
+
+
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
@@ -97,7 +128,7 @@
   }
 
   .toggle-content {
-    display: none;
+    display: none !important;
     height: 0;
     padding-bottom: 0 !important;
     padding-top: 0 !important;
@@ -106,7 +137,7 @@
   }
 
   .toggle-content.is-visible {
-    display: contents;
+    display: table-row !important;
     height: auto;
   }
 
@@ -129,7 +160,7 @@
       width: 100%;
       [class^=pb_table].table-sm.table-card thead tr th:first-child,
       [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-        border-left-width: 0px;
+        border-left-width: 0px !important;
       }
       [class^=pb_table].table-sm.table-card thead tr th:last-child,
       [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
@@ -155,6 +186,7 @@
       .bg-white td:first-child {
           background-color: $white;
       }
+      
     }
   }
   @media only screen and (min-width: $screen-xl-min) {

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

@@ -142,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 = [

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

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>

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

@@ -10,9 +10,16 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "none"
 
       def classname
-        generate_classname("pb_advanced_table")
+        generate_classname("pb_advanced_table", responsive_classname, separator: " ")
+      end
+
+      def responsive_classname
+        responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end
     end
   end

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

@@ -49,11 +49,9 @@
       label: "Graduated Students",
     }
   ]
-
-  subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
 <%= pb_rails("advanced_table", props: { 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: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -0,0 +1,43 @@
+<% column_definitions = [
+  {
+    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",
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_headers", table_data: @table_data, column_definitions: column_definitions }) %>

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.html.erb

@@ -0,0 +1,58 @@
+<% column_definitions = [
+  {
+    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",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions }) %>

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.

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -1,10 +1,13 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
-  - advanced_table_beta_subrow_headers: SubRow Headers
+  # - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
+  - advanced_table_column_headers: Multi-Header Columns
+  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -21,3 +24,5 @@ examples:
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
+  - advanced_table_column_headers: Multi-Header Columns
+  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -12,3 +12,5 @@ export { default as AdvancedTableResponsive } from './_advanced_table_responsive
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
+export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'