Multiple column headers

powerhome · Dec 21, 2024 · 7e319a6 · 7e319a6
1 parent 29aa1c3
commit 7e319a6
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 17 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx
@@ -52,27 +52,28 @@ export const TableHeaderCell = ({
   const isLeafColumn =
   header?.column.getLeafColumns().length === 1 &&
   header?.column.getLeafColumns()[0].id === header.column.id
-
+ 
 const cellClassName = classnames("table-header-cells", 
   `${isChrome() ? "chrome-styles" : ""}`, 
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { 'pinned-left': responsive === "scroll" && isPinnedLeft },
-  `${header.column.parent?.columns.at(-1)?.id === header.id ? "last-header-cell" : ""}`,
+  `${header?.column.parent?.columns.at(-1) === header?.column ? "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"
@@ -83,11 +84,11 @@ const justifyHeader = isLeafColumn ? "end" : "center"
     <th
         align="right"
         className={cellClassName}
-        colSpan={header.colSpan}
+        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>
@@ -97,7 +98,7 @@ const justifyHeader = isLeafColumn ? "end" : "center"
       ) : (
         <Flex
             alignItems="center"
-            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : justifyHeader}
+            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
         >
           {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
@@ -108,11 +109,11 @@ const justifyHeader = isLeafColumn ? "end" : "center"
             )}
 
           <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),
@@ -124,14 +125,14 @@ const justifyHeader = isLeafColumn ? "end" : "center"
                     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 ? (

diff --git a/...k/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx b/...k/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: "graduatedStudents",
+              label: "Graduated Students",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default AdvancedTableColumnHeadersMultiple;
diff --git a/...kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md b/...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.
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/example.yml
@@ -22,3 +22,4 @@ examples:
   - 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)
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/index.js
@@ -12,4 +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 AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Multiple levels of column headers can also be rendered as seen here.