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 7181c244dd..9047949468 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
@@ -40,25 +40,25 @@ export const TableHeaderCell = ({
const toggleSortButton = (event: React.SyntheticEvent) => {
if (sortControl) {
- const sortIsDesc = header.column.getIsSorted() === "desc"
+ const sortIsDesc = header?.column.getIsSorted() === "desc"
sortIsDesc
? sortControl.onChange({ desc: true })
: sortControl.onChange({ desc: false })
} else {
- header.column.getToggleSortingHandler()(event)
+ header?.column.getToggleSortingHandler()(event)
}
}
const isLeafColumn =
- header.column.getLeafColumns().length === 1 &&
- header.column.getLeafColumns()[0].id === header.column.id
+ 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" : "",
-)
+ `${header.column.parent?.columns.at(-1)?.id === header.id ? "last-header-cell" : ""}`,
+)
const cellId = `${loading ?
`loading-${header.id}`
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx
index d89df3fdd7..f168b7286d 100644
--- a/playbook/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx
+++ b/playbook/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx
@@ -86,6 +86,7 @@ export const TableBody = ({
>
{row.getVisibleCells().map((cell, i) => {
const isPinnedLeft = columnPinning.left.includes(cell.column.id)
+ const isLastCell = cell.column.parent?.columns.at(-1)?.id === cell.column.id
return (
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 15409eea6b..40694eab59 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
@@ -33,9 +33,13 @@
.pb_advanced_table_header {
> tr:not(:first-child) {
+ .last-header-cell {
+ border-right: 1px solid $border_light !important;
+ }
+
th {
border-radius: 0px !important;
- border-width: 0 1px 1px 0 !important;
+ border-width: 0 0 1px 0 !important;
}
th:first-child {
border-left-width: 1px !important;
@@ -43,9 +47,27 @@
border-left-width: 0 !important;
}
}
+ th:last-child {
+ border-right-width: 1px !important;
+ @media only screen and (max-width: $screen-xl-min) {
+ border-right-width: 0 !important;
+ }
+ }
+ }
+ th[colspan]:not([colspan="1"]) {
+ border-right: 1px solid $border_light;
}
+
+
}
+ .pb_advanced_table_body {
+ .last-cell {
+ border-right: 1px solid $border_light !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 c88531837d..63ee4a095f 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
@@ -152,12 +152,14 @@ const AdvancedTable = (props: AdvancedTableProps) => {
return {
header: column.label || "",
columns: buildColumns(column.columns),
+ headerClassName: 'grouped-header',
};
} else {
// Define the base column structure
const columnStructure = {
...columnHelper.accessor(column.accessor, {
header: column.label || "",
+ cellClassName: 'leaf-column-cell',
}),
};
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
index 24ef753da5..49f6443e22 100644
--- 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
@@ -51,7 +51,6 @@ const AdvancedTableColumnHeaders = (props) => {
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 391c862176..e84b193288 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
@@ -21,4 +21,4 @@ examples:
- 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
+ - advanced_table_column_headers: Multiple Column Headers
|