[PBNTR-784] Fixing gaps between sticky right columns (#4101)

**What does this PR do?**
Fixing gaps between sticky right columns

**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

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

@@ -69,6 +69,7 @@ const Table = (props: TableProps): React.ReactElement => {
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
     const dynamicInlineProps = globalInlineProps(props)
+    const stickyRightColumnReversed = stickyRightColumn.reverse()
 
     const classNames = classnames(
         'pb_table',
@@ -148,7 +149,7 @@ const Table = (props: TableProps): React.ReactElement => {
             if (!stickyRightColumn.length) return;
             let accumulatedWidth = 0;
 
-            stickyRightColumn.reverse().forEach((colId, index) => {
+            stickyRightColumnReversed.forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
@@ -186,6 +187,12 @@ const Table = (props: TableProps): React.ReactElement => {
         setTimeout(() => {
             handleStickyRightColumns();
         }, 10);
+
+        window.addEventListener('resize', handleStickyRightColumns);
+
+        return () => {
+            window.removeEventListener('resize', handleStickyRightColumns);
+        };
     }, [stickyRightColumn]);
 
     useEffect(() => {

playbook/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -35,6 +35,8 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_sticky_left_columns: Sticky Left Column
+    - table_sticky_right_columns: Sticky Right Column
+    - table_sticky_columns: Sticky Left and Right Columns
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift

playbook/app/pb_kits/playbook/pb_table/docs/index.js

@@ -26,6 +26,8 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
 export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
+export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
+export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
 export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'