column borders

powerhome · Dec 20, 2024 · 788eb64 · 788eb64
1 parent 1ebed75
commit 788eb64
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 10 deletions.
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
@@ -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
@@ -86,14 +86,16 @@ 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 (
                   <td
                       align="right"
                       className={classnames(
                         `${cell.id}-cell position_relative`,
                         isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left'
+                        isPinnedLeft && 'pinned-left',
+                        isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
                   >

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
@@ -33,19 +33,41 @@
 
   .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;
         @media only screen and (max-width: $screen-xl-min) {
           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
@@ -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
@@ -51,7 +51,6 @@ const AdvancedTableColumnHeaders = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           tableData={MOCK_DATA}
-          tableProps={{verticalBorder: true}}
           {...props}
       />
     </div>

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
@@ -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