IBX-4445: Option to add last column in tables as sticky (#695)

ibexa · Mar 2, 2023 · ee83750 · ee83750
1 parent 3e3c275
commit ee83750
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.table.js b/src/bundle/Resources/public/js/scripts/admin.table.js
@@ -97,6 +97,23 @@
 
         tablesCheckboxesChangeListeners.delete(table);
     };
+    const toggleLastColumnShadow = (table, scroller) => {
+        const offsetRoudingCompensator = 0.5;
+        const shouldShowRightColumnShadow =
+            scroller.scrollLeft < scroller.scrollWidth - scroller.offsetWidth - 2 * offsetRoudingCompensator;
+
+        table.classList.toggle('ibexa-table--last-column-shadow', shouldShowRightColumnShadow);
+    };
+    const initStickyTables = () => {
+        const stickyTables = doc.querySelectorAll('.ibexa-table.ibexa-table--last-column-sticky');
+
+        stickyTables.forEach((table) => {
+            const scrollableWrapper = table.closest('.ibexa-scrollable-wrapper');
+
+            scrollableWrapper.addEventListener('scroll', (event) => toggleLastColumnShadow(table, event.currentTarget), false);
+            toggleLastColumnShadow(table, scrollableWrapper);
+        });
+    };
 
     ibexaTables.forEach((table) => {
         const tableHasBulkCheckbox = !!table.querySelector(
@@ -118,4 +135,5 @@
             false,
         );
     });
+    initStickyTables();
 })(window, window.document);
diff --git a/src/bundle/Resources/public/scss/_tables.scss b/src/bundle/Resources/public/scss/_tables.scss
@@ -195,6 +195,29 @@
             }
         }
     }
+
+    &--last-column-sticky {
+        border-collapse: separate;
+
+        .ibexa-table__row,
+        .ibexa-table__head-row {
+            .ibexa-table__cell:last-of-type,
+            .ibexa-table__header-cell:last-of-type {
+                position: sticky;
+                right: calculateRem(-1px);
+            }
+        }
+    }
+
+    &--last-column-shadow {
+        .ibexa-table__row,
+        .ibexa-table__head-row {
+            .ibexa-table__cell:last-of-type,
+            .ibexa-table__header-cell:last-of-type {
+                box-shadow: calculateRem(-13px) calculateRem(5px) calculateRem(20px) 0 rgba($ibexa-color-info, 0.1);
+            }
+        }
+    }
 }
 
 .ibexa-table-header {

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/table/table.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/table/table.html.twig
@@ -2,6 +2,15 @@
 
 {% set show_head_cols_if_empty = show_head_cols_if_empty|default(false) %}
 
+{% if is_last_column_sticky is not defined %}
+    {% if body_rows is defined %}
+        {% set no_action_cell_rows = body_rows|filter((row) => not (row.cols|last).has_action_btns|default(false)) %}
+        {% set is_last_column_sticky = no_action_cell_rows|length == 0 %}
+    {% else %}
+        {% set is_last_column_sticky = false %}
+    {% endif %}
+{% endif %}
+
 {% block header %}
     {% if headline is defined %}
         {% include '@ibexadesign/ui/component/table/table_header.html.twig' with {
@@ -22,6 +31,7 @@
     {% set table_content %}
         <table
             class="ibexa-table table
+            {{ is_last_column_sticky ? 'ibexa-table--last-column-sticky' }}
             {{ class|default('') -}}"
             {{ html.attributes(attr|default({})) }}
         >