playbook_ui 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 → 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff11190f99fd3526f682637bab45adc5e4c6622abc098105e921812d32865a0d
-  data.tar.gz: 82f35cf6cbaa49b39804d96662fef1f95d1bf94a6ef505d9ae629a7b55ec27bb
+  metadata.gz: 4f8792edbc1bba55bdb026a17142b4ec1eda307af7043e0ab9900ea3e92a78bf
+  data.tar.gz: 574614453f812f73b094fa52f2ce793b73f880630c94cd813e7c63f2ce5ad891
 SHA512:
-  metadata.gz: ddd191fb90d1c45fb7c29aa490b5468ea44d0b3f75dfcac06ec498710571a771ae15892f6629123488c979881fba11f5aa1a0dce6e40d964a45020e4bd3df181
-  data.tar.gz: 37e12958a52b826dfceb58a28a8840fceb209ad9138b54d3d192e02cee52f59a4b8bd1f7994461812aa7ebc179302a91b4069ff256101a6d0b61a848c4a4ca5d
+  metadata.gz: dfef0aea6e35c15c7876b205c5103191b233bad3346654f2b1312557d3d79420e56939752fbb4b09d627ecd2b0b6d0c19bac23b5325f6a14a03c742120245cd8
+  data.tar.gz: c33eb3ac3b988bfbbfd02d8088cd91dcdbe81f92457c94739910653202337a355ff15a79b8c27244ebbbe507e44563039fde131eb3dfc62034548ccdc75dda5b

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -40,59 +40,46 @@ 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
-
-  const isLastHeaderCell =
-    header?.column.parent?.columns.at(-1) === header?.column ||
-    (header?.colSpan > 1 && header?.column.parent !== undefined);
- 
-const cellClassName = classnames(
-  "table-header-cells",
-  `${isChrome() ? "chrome-styles" : ""}`,
+const cellClassName = classnames("table-header-cells", 
+  `${isChrome() ? "chrome-styles" : ""}`, 
   `${enableSorting ? "table-header-cells-active" : ""}`,
-  { "pinned-left": responsive === "scroll" && isPinnedLeft },
-   isLastHeaderCell ? "last-header-cell" : ""
-); 
+  { 'pinned-left': responsive === "scroll" && isPinnedLeft },
+)
 
 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"
 
-const justifyHeader = isLeafColumn ? "end" : "center"
-
   return (
     <th
         align="right"
         className={cellClassName}
-        colSpan={header?.colSpan}
         id={cellId}
-        key={`${header?.id}-header`}
+        key={`${header.id}-header`}
     >
-      {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
+      {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
         <Flex alignItems="center">
           {headerChildren}
           <div>
@@ -102,7 +89,7 @@ const justifyHeader = isLeafColumn ? "end" : "center"
       ) : (
         <Flex
             alignItems="center"
-            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
+            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
         >
           {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
@@ -113,11 +100,11 @@ const justifyHeader = isLeafColumn ? "end" : "center"
             )}
 
           <Flex
-              className={`${header?.index === 0 &&
+              className={`${header.index === 0 &&
                 enableSorting &&
                 "header-sort-button pb_th_link"}`}
-              cursor={header?.index === 0 && enableSorting ? "pointer" : "default"}
-              {...(header?.index === 0 &&
+              cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
+              {...(header.index === 0 &&
                 enableSorting && {
                   htmlOptions: {
                     onClick: (event: React.MouseEvent) => toggleSortButton(event),
@@ -129,14 +116,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"}
           >
             <div>
-              {flexRender(header?.column.columnDef.header, header?.getContext())}
+              {flexRender(header.column.columnDef.header, header.getContext())}
             </div>
 
-            {header?.index === 0 &&
+            {header.index === 0 &&
               header.column.getCanSort() &&
               enableSorting &&
               (loading ? (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -86,7 +86,6 @@ 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
@@ -94,8 +93,7 @@ export const TableBody = ({
                       className={classnames(
                         `${cell.id}-cell position_relative`,
                         isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left',
-                        isLastCell && 'last-cell',
+                        isPinnedLeft && 'pinned-left'
                       )}
                       key={`${cell.id}-data`}
                   >

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -31,43 +31,6 @@
     min-width: 180px;
   }
 
-  .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 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;
   }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -142,41 +142,27 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
     return columnCells
   }
-
-  const buildColumns = (columnDefinitions: GenericObject[]): any => {
-    return (
-      columnDefinitions &&
+//Create column array in format needed by Tanstack
+  const columns =
+    columnDefinitions &&
       columnDefinitions.map((column, index) => {
-        //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
-            );
-          }
+      // Define the base column structure
+      const columnStructure = {
+        ...columnHelper.accessor(column.accessor, {
+          header: column.label,
+        }),
+      }
 
-          return columnStructure;
-        }
-      })
-    );
-  };
+  if (column.cellAccessors || column.customRenderer) {
+    columnStructure.cell = createCellFunction(
+      column.cellAccessors,
+      column.customRenderer,
+      index
+    )
+  }
 
-  //Create column array in format needed by Tanstack
-  const columns = buildColumns(columnDefinitions);
+  return columnStructure
+})
 
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -21,5 +21,3 @@ examples:
   - advanced_table_custom_cell: Custom Components for Cells
   - 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)

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -12,5 +12,3 @@ 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'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -20,7 +20,6 @@ type CircleIconButtonProps = {
   onClick?: React.MouseEventHandler<HTMLElement>,
   newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset' | undefined,
-  target?: string
   variant?: 'primary' | 'secondary' | 'link',
 }
 
@@ -37,7 +36,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     loading = false,
     onClick = noop,
     type,
-    target,
     link,
     newWindow,
     variant,
@@ -68,7 +66,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
           loading={loading}
           newWindow={newWindow}
           onClick={onClick}
-          target={target}
           text={null}
           variant={variant}
       >

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -17,7 +17,6 @@ module Playbook
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
-      prop :target
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb

@@ -10,11 +10,3 @@
   link: "https://google.com",
   new_window: true
 }) %>
-<br/>
-<%= pb_rails("circle_icon_button", props: {
-  icon: "info",
-  variant: "secondary",
-  aria: { label: "Link to Playbook in new window" },
-  link: "https://playbook.powerapp.cloud/",
-  target: "child"
-}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -21,15 +21,6 @@ const CircleIconButtonLink = (props) => (
         {...props}
     />
 
-    <br/>
-
-    <CircleIconButton
-        aria={{ label: "Link to Playbook in new window" }}
-        icon="info"
-        link="https://playbook.powerapp.cloud/"
-        target="child"
-        variant="secondary"
-    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -28,8 +28,7 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftColumn?: string[],
-    stickyRightColumn?: string[],
+    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -53,8 +52,7 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftColumn = [],
-        stickyRightColumn= [],
+        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -81,8 +79,7 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftColumn,
-            'sticky-right-column': stickyRightColumn,
+            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -93,12 +90,11 @@ const Table = (props: TableProps): React.ReactElement => {
     )
 
     useEffect(() => {
-        const handleStickyLeftColumns = () => {
-            if (!stickyLeftColumn.length) return;
+        const handleStickyColumns = () => {
             let accumulatedWidth = 0;
 
-            stickyLeftColumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftColumn.length - 1;
+            stickyLeftcolumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftcolumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
 
@@ -107,11 +103,11 @@ const Table = (props: TableProps): React.ReactElement => {
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
                     if (!isLastColumn) {
-                        header.classList.add('with-border-right');
-                        header.classList.remove('sticky-left-shadow');
+                        header.classList.add('with-border');
+                        header.classList.remove('sticky-shadow');
                     } else {
-                        header.classList.remove('with-border-right');
-                        header.classList.add('sticky-left-shadow');
+                        header.classList.remove('with-border');
+                        header.classList.add('sticky-shadow');
                     }
 
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -122,71 +118,26 @@ const Table = (props: TableProps): React.ReactElement => {
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
                     if (!isLastColumn) {
-                        cell.classList.add('with-border-right');
-                        cell.classList.remove('sticky-left-shadow');
+                        cell.classList.add('with-border');
+                        cell.classList.remove('sticky-shadow');
                     } else {
-                        cell.classList.remove('with-border-right');
-                        cell.classList.add('sticky-left-shadow');
+                        cell.classList.remove('with-border');
+                        cell.classList.add('sticky-shadow');
                     }
                 });
             });
         };
 
         setTimeout(() => {
-            handleStickyLeftColumns();
+            handleStickyColumns();
         }, 10);
 
-        window.addEventListener('resize', handleStickyLeftColumns);
+        window.addEventListener('resize', handleStickyColumns);
 
         return () => {
-            window.removeEventListener('resize', handleStickyLeftColumns);
+            window.removeEventListener('resize', handleStickyColumns);
         };
-    }, [stickyLeftColumn]);
-
-    useEffect(() => {
-        const handleStickyRightColumns = () => {
-            if (!stickyRightColumn.length) return;
-            let accumulatedWidth = 0;
-
-            stickyRightColumn.reverse().forEach((colId, index) => {
-                const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
-
-                if (header) {
-                    header.classList.add('sticky');
-                    (header as HTMLElement).style.right = `${accumulatedWidth}px`;
-
-                    if (!isLastColumn) {
-                        header.classList.add('with-border-left');
-                        header.classList.remove('sticky-right-shadow');
-                    } else {
-                        header.classList.remove('with-border-left');
-                        header.classList.add('sticky-right-shadow');
-                    }
-
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
-
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-left');
-                        cell.classList.remove('sticky-right-shadow');
-                    } else {
-                        cell.classList.remove('with-border-left');
-                        cell.classList.add('sticky-right-shadow');
-                    }
-                });
-            });
-        };
-
-        setTimeout(() => {
-            handleStickyRightColumns();
-        }, 10);
-    }, [stickyRightColumn]);
+    }, [stickyLeftcolumn]);
 
     useEffect(() => {
         const instance = new PbTable()

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx

@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
         <Table
             responsive="scroll"
             size="md"
-            stickyLeftColumn={["1", "2", "3"]}
+            stickyLeftcolumn={["1", "2", "3"]}
         >
             <thead>
                 <tr>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md

@@ -1,3 +1 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md

@@ -1,5 +1,2 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

data/app/pb_kits/playbook/pb_table/index.ts

@@ -2,7 +2,7 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
     private stickyLeftColumns: string[] = [];
-    private handleStickyLeftColumnsRef: () => void;
+    private handleStickyColumnsRef: () => void;
 
     static get selector(): string {
       return '.table-responsive-collapse'
@@ -31,10 +31,10 @@ export default class PbTable extends PbEnhancedElement {
       });
 
       // New sticky columns logic
-      this.initStickyLeftColumns();
+      this.initStickyColumns();
     }
 
-    private initStickyLeftColumns(): void {
+    private initStickyColumns(): void {
       // Find tables with sticky-left-column class
       const tables = document.querySelectorAll('.sticky-left-column');
 
@@ -52,16 +52,16 @@ export default class PbTable extends PbEnhancedElement {
 
           if (this.stickyLeftColumns.length > 0) {
             setTimeout(() => {
-              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
-              this.handleStickyLeftColumns();
-              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
+              this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
+              this.handleStickyColumns();
+              window.addEventListener('resize', this.handleStickyColumnsRef);
             }, 10);
           }
         }
       });
     }
 
-    private handleStickyLeftColumns(): void {
+    private handleStickyColumns(): void {
       let accumulatedWidth = 0;
 
       this.stickyLeftColumns.forEach((colId, index) => {
@@ -74,11 +74,11 @@ export default class PbTable extends PbEnhancedElement {
           (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
           if (!isLastColumn) {
-            header.classList.add('with-border-right');
-            header.classList.remove('sticky-left-shadow');
+            header.classList.add('with-border');
+            header.classList.remove('sticky-shadow');
           } else {
-            header.classList.remove('with-border-right');
-            header.classList.add('sticky-left-shadow');
+            header.classList.remove('with-border');
+            header.classList.add('sticky-shadow');
           }
 
           accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -89,11 +89,11 @@ export default class PbTable extends PbEnhancedElement {
           (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
           if (!isLastColumn) {
-            cell.classList.add('with-border-right');
-            cell.classList.remove('sticky-left-shadow');
+            cell.classList.add('with-border');
+            cell.classList.remove('sticky-shadow');
           } else {
-            cell.classList.remove('with-border-right');
-            cell.classList.add('sticky-left-shadow');
+            cell.classList.remove('with-border');
+            cell.classList.add('sticky-shadow');
           }
         });
       });
@@ -101,8 +101,8 @@ export default class PbTable extends PbEnhancedElement {
 
     // Cleanup method to remove event listener
     disconnect(): void {
-      if (this.handleStickyLeftColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
+      if (this.handleStickyColumnsRef) {
+        window.removeEventListener('resize', this.handleStickyColumnsRef);
       }
     }
 }

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -8,24 +8,8 @@
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
             border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_light,
-                        -1px 0 0 0px $border_light
-        }
-
-        &[class^=pb_table].table-sm.table-card thead tr th:first-child,
-        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
-
-        &[class^=pb_table].table-md.table-card thead tr th:first-child,
-        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
-
-        &[class^=pb_table].table-lg.table-card thead tr th:first-child,
-        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
-            border-left-width: 0px;
-        }
+            box-shadow: 1px 0 0 0px $border_light
+          }
 
         &[class^=pb_table].table-sm.table-card thead tr th:last-child,
         &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {

data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss

@@ -7,25 +7,11 @@
         background-color: white;
     }
 
-    // For use with sticky left columns
-    .sticky-left-shadow {
-        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
-        left: 0;
-    }
-
-    .with-border-right {
+    .with-border {
         border-right: 1px solid $border_light !important;
-        left: 0;
     }
 
-    // For use with sticky right columns
-    .sticky-right-shadow {
-        box-shadow: -4px 0 10px rgba(60, 106, 172, 0.16) !important;
-        right: 0;
-    }
-
-    .with-border-left {
-        border-left: 1px solid $border_light !important;
-        right: 0;
+    .sticky-shadow {
+        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
     }
 }