Column headers for Advanced Table

powerhome · Dec 19, 2024 · 27bb897 · 27bb897
1 parent 8543aa2
commit 27bb897
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 32 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
@@ -49,10 +49,15 @@ 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 },
+  isLeafColumn ? "leaf-column" : "",
 )
 
 const cellId = `${loading ? 
@@ -72,10 +77,13 @@ const isToggleExpansionEnabled =
   (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`}
     >
@@ -89,7 +97,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} />

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss
@@ -31,6 +31,21 @@
     min-width: 180px;
   }
 
+  .pb_advanced_table_header {
+    > tr:not(:first-child) {
+      th {
+        border-radius: 0px !important;
+        border-width: 0 1px 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;
+        }
+      }
+    }
+  }
+
   .table-header-cells-active:first-child {
     color: $primary !important;
   }

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx b/playbook/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) => {
+    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 = [

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
@@ -0,0 +1,61 @@
+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 (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={{verticalBorder: true}}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnHeaders
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
@@ -7,16 +7,17 @@ examples:
 
   react:
   - advanced_table_default: Default (Required Props)
-  - advanced_table_loading: Loading State
-  - advanced_table_sort: Enable Sorting
-  - advanced_table_sort_control: Sort Control
-  - advanced_table_expanded_control: Expanded Control
-  - advanced_table_subrow_headers: SubRow Headers
-  - advanced_table_collapsible_trail: Collapsible Trail
-  - advanced_table_table_options: Table Options
-  - advanced_table_table_props: Table Props
-  - advanced_table_inline_row_loading: Inline Row Loading
-  - advanced_table_responsive: Responsive Tables
-  - advanced_table_custom_cell: Custom Components for Cells
-  - advanced_table_pagination: Pagination
-  - advanced_table_pagination_with_props: Pagination Props
+  # - advanced_table_loading: Loading State
+  # - advanced_table_sort: Enable Sorting
+  # - advanced_table_sort_control: Sort Control
+  # - advanced_table_expanded_control: Expanded Control
+  # - advanced_table_subrow_headers: SubRow Headers
+  # - advanced_table_collapsible_trail: Collapsible Trail
+  # - advanced_table_table_options: Table Options
+  # - advanced_table_table_props: Table Props
+  # - advanced_table_inline_row_loading: Inline Row Loading
+  # - advanced_table_responsive: Responsive Tables
+  # - advanced_table_custom_cell: Custom Components for Cells
+  # - advanced_table_pagination: Pagination
+  # - advanced_table_pagination_with_props: Pagination Props
+  - advanced_table_column_headers: Column Headers
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,3 +12,4 @@ 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'