playbook_ui 14.11.0.pre.rc.6 → 14.11.0.pre.rc.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90f0123e3995ace5639733d29921fbb16fab9b2d33ade22943e730de7354462f
-  data.tar.gz: cc98b9bc9a33a7786acec47a68ff3453630c0394d7dffb9620fc25fd0b9e52c4
+  metadata.gz: 6cdd4fe59f0cd9c9bb6fdf8b9483d93556d3c755fb1c60f2ee1e157b8bd44da2
+  data.tar.gz: 43be89b4b77863b582d36e7e8e8067cfeffe33ba2fcc437688d9229b1e8753de
 SHA512:
-  metadata.gz: 2f417b8df46ee94165dc64e48ea31d5dc36fa4f2c9a87149021cbc7a975c759f5ee0e2895fefcf14c3701bfcbcca88b55d88fcb356b0af1309c6e07eb0f3824f
-  data.tar.gz: e49a36cb29ad2001e8b1155336b88b3c4d82e1a171234e05cf0d03414544fb7796e517ef237d7192223e42a8fcf1aee8b64cc647bc5746e128e3f0ad57ca871d
+  metadata.gz: c32c0e2052ba650765e58318cf4413777019547c6ea0bbb6af01efa67555fa05aee5bc96f31fdcd4a988efd12a52ee53df1d4b6646433237a3fe7ff7316ffdb7
+  data.tar.gz: 70507ffdcbc63b986e6a3b5ce6b43a66fe11e70d39526126dae3c7ab2ba4c1b2cfb32c44031d971c31a91ebccdc7e707fae43ad0d056142e212b520531578813

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss

@@ -1,8 +1,8 @@
 @import 'skeleton_loading_mixins';
 
 .pb_skeleton_loading {
-    display: "flex";
-    flex-direction: "column";
+    display: flex;
+    flex-direction: column;
     height: 100%;
     .color_default {
         @include skeleton-shimmer($silver);

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md

@@ -0,0 +1,3 @@
+The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading. 
+
+**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("flex", props: { justify: "evenly" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -0,0 +1 @@
+The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("card", props: { border_none: true }) do %>
+    <%= pb_rails("skeleton_loading") %>
+<% end %>
+
+<%= pb_rails("card", props: { background: "light", border_none: true }) do %>
+    <%= pb_rails("skeleton_loading", props: { color: "white" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("skeleton_loading") %>
+<%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb

@@ -0,0 +1,119 @@
+<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>
+
+<div id="skeleton-loading-filter-content">
+  <%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
+    <%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
+      <%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
+        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
+        <%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
+      <% end %>
+      <%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
+        <%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
+</div>
+
+<div id="filter-content" style="display: none;">
+  <%= pb_rails("filter", props: {
+    margin_bottom: "xl",
+    min_width: "360px",
+    id: "2",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    results: 546,
+    template: "single"
+  }) do %>
+    <% example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
+    ] %>
+
+    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+      <%= form.text_field :example_text_field, props: { label: true } %>
+      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+      <%= form.actions do |action| %>
+        <%= action.submit props: {
+          text: "Apply",
+          data: {
+            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+        },}%>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("filter", props: {
+    min_width: "360px",
+    id: "1",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+  }) do %>
+    <% example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
+    ] %>
+    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+      <%= form.text_field :example_text_field, props: { label: true } %>
+      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+      <%= form.actions do |action| %>
+        <%= action.submit props: {
+          text: "Apply",
+          data: {
+            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+        },}%>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const toggleButton = document.getElementById('toggle-filter-button')
+    const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
+    const filterContentDiv = document.getElementById('filter-content')
+    const secondFilterContentDiv = document.getElementById('second-filter-content')
+
+    let isLoading = true
+
+    toggleButton.addEventListener('click', function() {
+      isLoading = !isLoading
+
+      if (isLoading) {
+        skeletonFilterContentDiv.style.display = 'block'
+        filterContentDiv.style.display = 'none'
+        toggleButton.textContent = 'Show Filter'
+      } else {
+        skeletonFilterContentDiv.style.display = 'none'
+        filterContentDiv.style.display = 'block'
+        toggleButton.textContent = 'Show Skeleton Loading'
+      }
+    })
+  })
+</script>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
 
 const SortingChangeCallback = (sortOptions) => {
@@ -6,7 +6,8 @@ const SortingChangeCallback = (sortOptions) => {
 }
 
 const SkeletonLoadingFilter = (props) => {
-  const isLoading = true
+  const [isLoading, setIsLoading] = useState(true)
+  const toggleLoading = () => setIsLoading((prev) => !prev)
 
   const options = [
     { value: 'USA' },
@@ -18,6 +19,13 @@ const SkeletonLoadingFilter = (props) => {
 
   return (
     <div>
+      <Button 
+          marginBottom="md" 
+          onClick={toggleLoading} 
+          variant="secondary"
+      >
+          {isLoading ? "Show Filter" : "Show Skeleton Loading"}
+      </Button>
       <div>
         {isLoading ? (
           <Card 

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb

@@ -0,0 +1,15 @@
+<%= pb_rails("skeleton_loading", props: { height: "100px", width: "50%" }) %>
+
+<%= pb_rails("skeleton_loading", props: { gap: "md", height: "20px", margin_y: "md", stack: 3, width: "50px" }) %>
+
+<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "50%", width: "300px" }) %>
+<% end %>
+
+<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "30%", stack: 2, width: "70%" }) %>
+<% end %>
+
+<%= pb_rails("skeleton_loading", props: { height: "150px", margin_y: "md", width: "150px" }) %>
+
+<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "150px", width: "150px" }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -17,9 +17,11 @@ const SkeletonLoadingHeightWidth = (props) => (
         width="50px"
         {...props}
     />
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+    <Card 
+        height='200px' 
         marginBottom="md"
         padding="none" 
+        width='100%'
         {...props}
     >
       <SkeletonLoading
@@ -30,8 +32,10 @@ const SkeletonLoadingHeightWidth = (props) => (
           {...props}
       />
     </Card>
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+    <Card 
+        height='200px'
         padding="none"
+        width='100%'
         {...props}
     >
       <SkeletonLoading

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md

@@ -0,0 +1,3 @@
+The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
+
+Set the `height` and `width` props to the same value to make a square. A `rounded` border_radius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("skeleton_loading", props: { stack: 5 }) %>
+
+<%= pb_rails("skeleton_loading", props: { gap: "md", padding_top: "xl", stack: 3 }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb

@@ -0,0 +1,63 @@
+<%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>
+
+<div id="skeleton-loading-user-content">
+    <%= pb_rails("flex", props: { align_items: "center" }) do %>
+        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
+        <%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
+    <% end %>
+    <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
+        <%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
+            <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
+            <%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
+            <%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
+        <% end %>
+    <% end %>
+</div>
+
+<div id="user-content" style="display: none;">
+    <div>
+        <%= pb_rails("user", props: {
+            name: "Anna Black",
+            title: "Remodeling Consultant",
+            orientation: "horizontal",
+            align: "left",
+            avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+        }) %>
+    </div>
+    <div>
+        <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
+            <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Remodeling Consultant",
+                orientation: "vertical",
+                align: "center",
+                size: "lg",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+            }) %>
+        <% end %>
+    </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const toggleButton = document.getElementById('toggle-user-button')
+    const skeletonUserContentDiv = document.getElementById('skeleton-loading-user-content')
+    const userContentDiv = document.getElementById('user-content')
+
+    let isLoading = true
+
+    toggleButton.addEventListener('click', function() {
+      isLoading = !isLoading
+
+      if (isLoading) {
+        skeletonUserContentDiv.style.display = 'block'
+        userContentDiv.style.display = 'none'
+        toggleButton.textContent = 'Show User'
+      } else {
+        skeletonUserContentDiv.style.display = 'none'
+        userContentDiv.style.display = 'block'
+        toggleButton.textContent = 'Show Skeleton Loading'
+      }
+    })
+  })
+</script>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -1,11 +1,19 @@
-import React from 'react';
-import { Flex, SkeletonLoading, User } from "playbook-ui";
+import React, { useState } from 'react';
+import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
 
 const SkeletonLoadingUser = (props) => {
-  const isLoading = true
+  const [isLoading, setIsLoading] = useState(true)
+  const toggleLoading = () => setIsLoading((prev) => !prev)
 
   return (
     <div>
+      <Button 
+          marginBottom="md" 
+          onClick={toggleLoading} 
+          variant="secondary"
+      >
+          {isLoading ? "Show User" : "Show Skeleton Loading"}
+      </Button>
       <div>
         {isLoading ? (
           <Flex alignItems="center">

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

@@ -1,8 +1,13 @@
 examples:
   
   rails:
-  # - skeleton_loading_default: Default
-  
+  - skeleton_loading_default: Default
+  - skeleton_loading_color: Color
+  - skeleton_loading_layout: Layout
+  - skeleton_loading_border_radius: Border Radius
+  - skeleton_loading_height_width: Height & Width  
+  - skeleton_loading_user: User Component Example
+  - skeleton_loading_filter: Filter Component Example
   
   react:
   - skeleton_loading_default: Default

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb

@@ -1,12 +1,8 @@
-<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
-<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
-<%= pb_content_tag(
-    # :div,
-    # aria: object.aria,
-    # class: object.classname,
-    # data: object.data,
-    # id: object.id,
-    # **combined_html_options
-) do %>
-  <span>SKELETON_LOADING CONTENT</span>
-<% end %>
+<%= pb_content_tag do %>
+  <% stack.times do |index| %>
+    <div
+      class="<%= item_classname(index) %>"
+      style="<%= item_inline_styles %>"
+    ></div>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb

@@ -2,7 +2,54 @@
 
 module Playbook
   module PbSkeletonLoading
-    class SkeletonLoading < ::Playbook::KitBase
+    class SkeletonLoading < Playbook::KitBase
+      prop :height, type: Playbook::Props::String,
+                    default: "16px"
+      prop :width, type: Playbook::Props::String,
+                   default: "100%"
+      prop :border_radius, type: Playbook::Props::Enum,
+                           values: %w[none xs sm md lg xl rounded],
+                           default: "sm"
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[none xxs xs sm md lg xl xxl],
+                 default: "xxs"
+      prop :stack, type: Playbook::Props::Number,
+                   default: 1
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default white],
+                   default: "default"
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      def classname
+        generate_classname("pb_skeleton_loading")
+      end
+
+      def global_inline_props
+        {}
+      end
+
+      def item_classname(index = nil)
+        classes = [
+          "pb_skeleton_loading_item",
+          "border_radius_#{border_radius}",
+          "color_#{color}",
+          ("dark" if dark),
+          gap_class(index),
+        ]
+        classes.compact.join(" ")
+      end
+
+      def item_inline_styles
+        styles = []
+        styles << "height: #{height}"
+        styles << "width: #{width}"
+        styles.join("; ")
+      end
+
+      def gap_class(index = nil)
+        stack > 1 && index.to_i.positive? && gap != "none" ? "gap_#{gap}" : nil
+      end
     end
   end
 end

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

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