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
index 9047949468..3e5f000ebc 100644
--- 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"
- {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
+ {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
{headerChildren}
@@ -97,7 +98,7 @@ const justifyHeader = isLeafColumn ? "end" : "center"
) : (
{isToggleExpansionEnabled && (
@@ -108,11 +109,11 @@ const justifyHeader = isLeafColumn ? "end" : "center"
)}
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"}
>
- {flexRender(header.column.columnDef.header, header.getContext())}
+ {flexRender(header?.column.columnDef.header, header?.getContext())}
- {header.index === 0 &&
+ {header?.index === 0 &&
header.column.getCanSort() &&
enableSorting &&
(loading ? (
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
new file mode 100644
index 0000000000..e9110ca1af
--- /dev/null
+++ b/playbook/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 (
+
+ );
+};
+
+export default AdvancedTableColumnHeadersMultiple;
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
new file mode 100644
index 0000000000..fab3216439
--- /dev/null
+++ b/playbook/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.
\ No newline at end of file
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
index 7dd856fc6e..1387c03272 100644
--- 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
index 6c0b2ce02f..ead2d64fef 100644
--- 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'
\ No newline at end of file
+export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
\ No newline at end of file
|