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