playbook_ui 14.11.0.pre.rc.14 → 14.11.0.pre.rc.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 392b890c5210bbfd4bd949f30717b1eb5d3cb6072108595ee8a28d1caf868435
-  data.tar.gz: d768258037273fb3be827c7668d71757dc6984473784f5b1719c7bc5331ef8af
+  metadata.gz: caaa8ef768bf3d4ce1eccc3ea9f2ab8821d5809a0d959ca9da5a06b091c46fb8
+  data.tar.gz: f7cf447b160f0ff975b6d26579871d72a358a212394544f0393078f2f86040ae
 SHA512:
-  metadata.gz: 856857b42f0f319dfae33ab64e91594c80e035bad901b783880d9056fda116d3280372486399480f882d1b3095a3a0cf31e0fd78b20f7b81693f2b406b42bf8c
-  data.tar.gz: 6c78b48c806fba97842d34dc9cc766838748ead66ab63aaded3282daddb775fe4721859b2c58907a8fe6ee8b4fffe0ab1edfc737f786c7c39cb3eb8edb91c3f4
+  metadata.gz: e5d42d032c284243dac212cd60662402baa057344340c1fbe5951b008ac475e2477ff44e8d7365f1f3c6a132960c28434dbc7d85ebc81442ed7b73fef850a491
+  data.tar.gz: b0cb1d6b1fa1dc524b07cea7ceedc06ae84fb4cb1ef8a799d8cb5879693dd26ccb8b05c9a4a34b9f4e43cd1f7c7d90bb6249b622ae6e5f23a925a6d5b08ba20a

data/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(() => {

data/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

data/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'