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