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 0b6363bae7..7181c244dd 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
@@ -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 (
@@ -89,7 +97,7 @@ const isToggleExpansionEnabled =
) : (
{isToggleExpansionEnabled && (
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
index 5f564b08a0..2874729f1b 100644
--- 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
index 51a8184a9a..2ea7776327 100644
--- 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
new file mode 100644
index 0000000000..24ef753da5
--- /dev/null
+++ 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 (
+
+ )
+}
+
+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
index c47594bde4..d93721af40 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
@@ -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
index 1f3131a070..6c0b2ce02f 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,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'
\ No newline at end of file
|