yummy-guide-generic-administrate 0.8.7 → 0.8.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0520a5cdee147e08194dab9b3db2bd7c07a1ab16378069dd33075092a0d26fa5
-  data.tar.gz: 929494186a5804c39b86503635520ec5b0a5898fc2c306cdd679787dac48b361
+  metadata.gz: 1ed6d8460a0a0e1b9a84b4b69a0e0dfd01195b505b2d9efa984cddf182efea28
+  data.tar.gz: d1d8de5996db5b20c7bbf8d5f822d9f62f900b59c1c6818a9104ac2a876961f1
 SHA512:
-  metadata.gz: 043eb9eae3d408ef080935b7ab1072f8f5df4e965549f6b8285c5b3f0dd0e50408c92f0174bac1ede3dceaaee976c107bc900cacb389e294bb66cf3882fe2767
-  data.tar.gz: 2cf1472d84a48a940408f1dec4138966f0efd331c0097f3152ccbaa9564e8faf74a246dcf0b195a63393f1934299961a0b334a1b4dc4e66ccea34b2f14bc400f
+  metadata.gz: 0b4f2c4caeb356f6758c40a5dbbcd7278d1303cc46970273d3ff3549c410bfba1b16ec163a2debb87649fb0e29c930401847aa73d7db866373c35125bc4e2f95
+  data.tar.gz: 077c2bf515cd0f2b0f46dbf16917eb5dbc781add60f5502b7c027fcfc97867c94ee215eaf5cd54049f4f0d597a1c5f68a7855a11280e54e92106b37a7c3cea84

data/README.md

@@ -51,7 +51,6 @@ bundle install
   - 管理画面フォーム用の number input text 化 helper
 - 共通 partial / assets
   - collection partial
-  - fixed table header partial
   - filter form partial
   - `clipboards.js`
   - `datetime_input.js`
@@ -59,7 +58,6 @@ bundle install
   - `filter_controls.js`
   - `filter_form.js`
   - `sticky_left_columns.js`
-  - `sticky_table_headers.js`
   - `tooltips.js`
   - `components.css`
 - 共通 field
@@ -143,18 +141,27 @@ engine の共通 partial に委譲します。
 #### 1. 最小構成
 
 gem 付属の collection partial をそのまま使う場合、table wrapper と table 本体に
-必要な `data-*` 属性はすでに入っています。そのため、JS / CSS を読み込めば固定
-ヘッダーとカラム幅調整は自動で有効になります。カラム幅調整を使う場合は
+必要な `data-*` 属性はすでに入っています。`data-css-sticky-table` は sticky 対象の
+識別子として使い、wrapper 自体には縦横スクロールを持たせません。そのため、ページ
+スクロールに合わせて `thead th` が sticky で固定されます。カラム幅調整を使う場合は
 `yummy_guide_administrate/column_resizer.js` も読み込んでください。
 
 内部的には以下のような構造になります。
 
 ```erb
-<div class="scroll-table" data-fixed-header-scroll>
+<% table_definition = yummy_guide_administrate_collection_table_definition(
+     page: page,
+     collection_presenter: collection_presenter
+   ) %>
+
+<div class="scroll-table" data-css-sticky-table>
   <table
     aria-labelledby="<%= table_title %>"
-    data-fixed-columns-count="<%= yummy_guide_administrate_collection_table_fixed_columns_count(page: page, collection_presenter: collection_presenter) %>"
-    data-fixed-header-source
+    data-fixed-columns-count="<%= table_definition.fixed_columns_count %>"
+    data-mobile-fixed-columns-count="<%= table_definition.mobile_fixed_columns_count %>"
+    <% if table_definition.table_style.present? %>
+      style="<%= table_definition.table_style %>"
+    <% end %>
   >
     ...
   </table>
@@ -163,63 +170,39 @@ gem 付属の collection partial をそのまま使う場合、table wrapper と
 
 複数画面で幅設定を共有したい場合は、render local に `column_width_storage_scope: "admin.reservations"` のような任意の scope 名を渡してください。
 
-#### 2. ヘッダー位置を明示したい場合
-
-固定ヘッダーの表示位置をページ上部の特定箇所に合わせたい場合は、
-`data-fixed-table-header` を持つ slot を `.main-content` 配下に置きます。
-gem には専用 partial があります。
-
-```erb
-<header class="main-content__header">
-  <h1 id="page-title">Articles</h1>
-  <%= render "yummy_guide/administrate/administrate/application/fixed_table_header" %>
-</header>
-
-<section class="main-content__body main-content__body--flush">
-  <%= render "yummy_guide/administrate/administrate/application/collection",
-             collection_presenter: collection_presenter,
-             page: page,
-             resources: resources,
-             table_title: "page-title",
-             namespace: :admin,
-             resource_class: resource_class,
-             collection_field_name: resource_name %>
-</section>
-```
-
-`fixed_table_header` partial 自体は以下の 1 行です。
-
-```erb
-<div class="yummy-guide-administrate-fixed-table-header" data-fixed-table-header hidden></div>
-```
-
-この slot を置かない場合でも、JS が table の直前に自動生成します。配置を制御
-したいときだけ明示してください。desktop では LMJ と同じく、`main-content__body--flush`
-と組み合わせることで fixed header のクリップ幅が一覧 body と揃い、一覧 wrapper
-自体には縦スクロールを持たせません。
-
-#### 3. 自前の table partial を使う場合
+#### 2. 自前の table partial を使う場合
 
 独自の collection partial を書く場合は、少なくとも以下を満たしてください。
 
-- 横スクロール wrapper に `data-fixed-header-scroll` を付ける
-- table に `data-fixed-header-source` を付ける
+- table wrapper に `data-css-sticky-table` を付ける
+- `data-css-sticky-table` を付けた wrapper に縦横スクロールを持たせない
 - table に `data-fixed-columns-count` を付ける
+- table に `data-mobile-fixed-columns-count` を付ける
+- 固定列数・列幅・固定列class/styleは `yummy_guide_administrate_collection_table_definition` から参照する
 - header の `aria-labelledby` がページタイトルと対応している
 
 ```erb
-<%= render "yummy_guide/administrate/administrate/application/fixed_table_header" %>
+<% table_definition = yummy_guide_administrate_collection_table_definition(
+     page: page,
+     collection_presenter: collection_presenter,
+     column_names: %i[id name]
+   ) %>
 
-<div class="scroll-table" data-fixed-header-scroll>
+<div class="scroll-table" data-css-sticky-table>
   <table
     aria-labelledby="page-title"
-    data-fixed-header-source
-    data-fixed-columns-count="<%= yummy_guide_administrate_collection_table_fixed_columns_count(page: page, collection_presenter: collection_presenter) %>"
+    data-fixed-columns-count="<%= table_definition.fixed_columns_count %>"
+    data-mobile-fixed-columns-count="<%= table_definition.mobile_fixed_columns_count %>"
+    <% if table_definition.table_style.present? %>
+      style="<%= table_definition.table_style %>"
+    <% end %>
   >
     <thead>
       <tr>
-        <th>ID</th>
-        <th>Name</th>
+        <% id_column = table_definition.sticky_column(:id) %>
+        <th class="<%= id_column[:class] %>" style="<%= id_column[:style] %>">ID</th>
+        <% name_column = table_definition.sticky_column(:name) %>
+        <th class="<%= name_column[:class] %>" style="<%= name_column[:style] %>">Name</th>
         <th class="sticky actions-column">Actions</th>
       </tr>
     </thead>
@@ -502,7 +485,6 @@ block を使わない場合、tooltip 本文はテキストとして扱われ、
 //= require yummy_guide_administrate/filter_controls
 //= require yummy_guide_administrate/filter_form
 //= require yummy_guide_administrate/sticky_left_columns
-//= require yummy_guide_administrate/sticky_table_headers
 //= require yummy_guide_administrate/tooltips
 ```
 

data/app/assets/javascripts/yummy_guide_administrate/column_resizer.js

@@ -1,12 +1,15 @@
 (function() {
   var TABLE_SELECTOR = 'table[data-fixed-columns-count]';
+  var CSS_STICKY_TABLE_SELECTOR = '[data-css-sticky-table]';
+  var MAIN_CONTENT_SELECTOR = '.main-content';
+  var STICKY_PAGE_HEADER_SELECTOR = '.main-content__header--sticky-table-layout, [data-reservations-sticky-header], .main-content__header';
+  var STICKY_PAGE_HEADER_HEIGHT_VARIABLE = '--admin-sticky-page-header-height';
   var HANDLE_CLASS = 'admin-column-resizer__handle';
   var HEADER_CLASS = 'admin-column-resizer__header';
   var TABLE_CLASS = 'admin-column-resizer__table';
   var DRAGGING_BODY_CLASS = 'admin-column-resizer--dragging';
   var APPLYING_BODY_CLASS = 'admin-column-resizer--applying';
   var PREVIEW_CLASS = 'admin-column-resizer__preview';
-  var FIXED_HEADER_TABLE_CLASS = 'table-fixed-header__table';
   var ADJUSTED_COLUMNS_ATTRIBUTE = 'data-admin-column-resizer-adjusted-columns';
   var STORAGE_PREFIX = 'yummyGuideAdminColumnWidths:v1:';
   var STYLE_ELEMENT_ID = 'admin-column-resizer-rules';
@@ -20,14 +23,12 @@
   var generatedRuleCount = 0;
   var initializedHandles = new WeakSet();
   var tableStates = new WeakMap();
-  var stickyRefreshFrame = null;
-  var stickyRefreshCallbacks = [];
+  var stickyPageHeaderResizeObservers = new WeakMap();
+  var stickyPageHeaderLayoutFrames = new WeakMap();
   var applyingWidth = false;
 
   function storageScopeForTable(table) {
-    var sourceTable = matchingSourceTable(table);
-    var scopedTable = sourceTable || table;
-    var scope = scopedTable && scopedTable.getAttribute('data-column-resizer-storage-scope');
+    var scope = table && table.getAttribute('data-column-resizer-storage-scope');
 
     return scope || window.location.pathname;
   }
@@ -83,6 +84,176 @@
     return preciseNumber(rectWidth || element.offsetWidth || 0);
   }
 
+  function pushUnique(array, item) {
+    if (item && array.indexOf(item) === -1) {
+      array.push(item);
+    }
+  }
+
+  function hasCssStickyTable(element) {
+    if (!element) return false;
+
+    return (element.matches && element.matches(CSS_STICKY_TABLE_SELECTOR)) ||
+      !!(element.querySelector && element.querySelector(CSS_STICKY_TABLE_SELECTOR));
+  }
+
+  function closestMainContent(element) {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return null;
+
+    if (element.matches && element.matches(MAIN_CONTENT_SELECTOR)) {
+      return element;
+    }
+
+    return element.closest ? element.closest(MAIN_CONTENT_SELECTOR) : null;
+  }
+
+  function collectStickyTableMainContents(root) {
+    var mainContents = [];
+    var element = root && root.nodeType === Node.ELEMENT_NODE ? root : null;
+
+    if (element) {
+      pushUnique(mainContents, closestMainContent(element));
+
+      if (element.matches && element.matches(CSS_STICKY_TABLE_SELECTOR)) {
+        pushUnique(mainContents, closestMainContent(element));
+      }
+    }
+
+    if (root && root.querySelectorAll) {
+      root.querySelectorAll(MAIN_CONTENT_SELECTOR).forEach(function(mainContent) {
+        if (hasCssStickyTable(mainContent)) {
+          pushUnique(mainContents, mainContent);
+        }
+      });
+
+      root.querySelectorAll(CSS_STICKY_TABLE_SELECTOR).forEach(function(tableWrapper) {
+        pushUnique(mainContents, closestMainContent(tableWrapper));
+      });
+    }
+
+    return mainContents;
+  }
+
+  function stickyPageHeader(mainContent) {
+    if (!mainContent) return null;
+
+    return Array.from(mainContent.children).find(function(child) {
+      return child.matches && child.matches(STICKY_PAGE_HEADER_SELECTOR);
+    }) || null;
+  }
+
+  function measuredStickyPageHeaderHeight(mainContent, header) {
+    var previousHeight = mainContent.style.getPropertyValue(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+
+    if (previousHeight) {
+      mainContent.style.removeProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+    }
+
+    var rectHeight = header.getBoundingClientRect().height;
+    var scrollHeight = header.scrollHeight || 0;
+    var height = Math.max(rectHeight || 0, scrollHeight);
+
+    if (previousHeight) {
+      mainContent.style.setProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE, previousHeight);
+    }
+
+    return preciseNumber(height);
+  }
+
+  function refreshStickyPageHeaderLayout(mainContent) {
+    if (!mainContent) return false;
+
+    if (!hasCssStickyTable(mainContent)) {
+      mainContent.style.removeProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+      return false;
+    }
+
+    var header = stickyPageHeader(mainContent);
+
+    if (!header) {
+      mainContent.style.removeProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+      return false;
+    }
+
+    var height = measuredStickyPageHeaderHeight(mainContent, header);
+
+    if (height > 0) {
+      var value = cssPixelValue(height);
+
+      if (mainContent.style.getPropertyValue(STICKY_PAGE_HEADER_HEIGHT_VARIABLE) !== value) {
+        mainContent.style.setProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE, value);
+      }
+    } else {
+      mainContent.style.removeProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+    }
+
+    return true;
+  }
+
+  function observeStickyPageHeaderLayout(mainContent) {
+    if (!window.ResizeObserver || !mainContent) return;
+
+    var header = stickyPageHeader(mainContent);
+    var currentObserver = stickyPageHeaderResizeObservers.get(mainContent);
+
+    if (!header) {
+      if (currentObserver) {
+        currentObserver.observer.disconnect();
+        stickyPageHeaderResizeObservers.delete(mainContent);
+      }
+      return;
+    }
+
+    if (currentObserver && currentObserver.header === header) return;
+
+    if (currentObserver) {
+      currentObserver.observer.disconnect();
+    }
+
+    var observer = new ResizeObserver(function() {
+      scheduleStickyPageHeaderLayout(mainContent);
+    });
+
+    observer.observe(header);
+
+    stickyPageHeaderResizeObservers.set(mainContent, {
+      header: header,
+      observer: observer
+    });
+  }
+
+  function scheduleStickyPageHeaderLayout(mainContent) {
+    if (!mainContent || stickyPageHeaderLayoutFrames.has(mainContent)) return;
+
+    var frame = window.requestAnimationFrame(function() {
+      stickyPageHeaderLayoutFrames.delete(mainContent);
+      refreshStickyPageHeaderLayout(mainContent);
+      observeStickyPageHeaderLayout(mainContent);
+    });
+
+    stickyPageHeaderLayoutFrames.set(mainContent, frame);
+  }
+
+  function refreshStickyHeaderLayout(root) {
+    var refreshed = false;
+
+    collectStickyTableMainContents(root || document).forEach(function(mainContent) {
+      refreshed = refreshStickyPageHeaderLayout(mainContent) || refreshed;
+      observeStickyPageHeaderLayout(mainContent);
+    });
+
+    return refreshed;
+  }
+
+  function refreshStickyHeaderLayoutForTable(table) {
+    var mainContent = closestMainContent(table);
+
+    if (!mainContent) return false;
+
+    scheduleStickyPageHeaderLayout(mainContent);
+    return true;
+  }
+
   function viewportHeight() {
     return window.innerHeight || document.documentElement.clientHeight || 0;
   }
@@ -115,39 +286,15 @@
       .replace(/\s+/g, ' ');
   }
 
-  function headerSignature(table) {
-    return columnHeaders(table).map(function(header, index) {
-      return normalizedIdentifier(header.dataset.columnId || headerLabel(header) || ('column_' + (index + 1)));
-    }).join('__');
-  }
-
-  function matchingSourceTable(table) {
-    if (!table) return null;
-    if (!table.classList.contains(FIXED_HEADER_TABLE_CLASS)) return null;
-
-    var signature = headerSignature(table);
-    return sourceTables().find(function(sourceTable) {
-      return headerSignature(sourceTable) === signature;
-    }) || null;
-  }
-
   function tableIdentifier(table) {
     if (table.dataset.adminColumnResizerTableId) return table.dataset.adminColumnResizerTableId;
 
-    var sourceTable = matchingSourceTable(table);
-    if (sourceTable) {
-      table.dataset.adminColumnResizerTableId = tableIdentifier(sourceTable);
-      return table.dataset.adminColumnResizerTableId;
-    }
-
     var tableLabel = table.id ||
       table.getAttribute('aria-labelledby') ||
-      table.getAttribute('data-admin-column-resizer-table') ||
-      table.getAttribute('data-fixed-header-source');
+      table.getAttribute('data-admin-column-resizer-table');
 
     if (!tableLabel) {
-      var index = sourceTables().indexOf(table);
-      tableLabel = 'table_' + (index >= 0 ? index + 1 : allTrackedTables().indexOf(table) + 1);
+      tableLabel = 'table_' + (allTrackedTables().indexOf(table) + 1);
     }
 
     table.dataset.adminColumnResizerTableId = normalizedIdentifier(tableLabel);
@@ -259,19 +406,12 @@
     return Array.from(document.querySelectorAll(TABLE_SELECTOR));
   }
 
-  function sourceTables() {
-    return allTrackedTables().filter(function(table) {
-      return table.getAttribute('aria-hidden') !== 'true' && !table.classList.contains(FIXED_HEADER_TABLE_CLASS);
-    });
-  }
-
   function stateForTable(table) {
     return tableStates.get(table) || configureTable(table);
   }
 
   function ensureManagedColgroup(table, columnCount) {
-    var fixedHeaderColgroup = table.querySelector('colgroup[data-fixed-header-colgroup]');
-    var colgroup = fixedHeaderColgroup || table.querySelector('colgroup[data-admin-column-resizer-colgroup]');
+    var colgroup = table.querySelector('colgroup[data-admin-column-resizer-colgroup]');
 
     if (!colgroup) {
       colgroup = document.createElement('colgroup');
@@ -407,7 +547,7 @@
   }
 
   function managedColumnWidth(table, index) {
-    var colgroup = table && table.querySelector('colgroup[data-admin-column-resizer-colgroup], colgroup[data-fixed-header-colgroup]');
+    var colgroup = table && table.querySelector('colgroup[data-admin-column-resizer-colgroup]');
     var col = colgroup && colgroup.children[index];
 
     return col ? parsedPixelValue(col.style.width) : 0;
@@ -447,7 +587,7 @@
   }
 
   function refreshCssStickyLeftColumns(table) {
-    if (!table || table.getAttribute('aria-hidden') === 'true' || table.classList.contains(FIXED_HEADER_TABLE_CLASS)) return;
+    if (!table || table.getAttribute('aria-hidden') === 'true') return;
 
     refreshCssStickyLeftColumnSet(table, 'sticky-left', '--sticky-left', '--sticky-width');
     refreshCssStickyLeftColumnSet(table, 'sticky-left-mobile', '--sticky-mobile-left', '--sticky-mobile-width');
@@ -458,6 +598,7 @@
       if (key && storageKeyForTable(table) !== key) return;
 
       applyTableColumnWidth(table, columnId, width);
+      refreshStickyHeaderLayoutForTable(table);
     });
   }
 
@@ -466,6 +607,7 @@
       if (key && storageKeyForTable(table) !== key) return;
 
       clearTableColumnWidth(table, columnId);
+      refreshStickyHeaderLayoutForTable(table);
     });
   }
 
@@ -476,6 +618,8 @@
 
       applyTableColumnWidth(table, columnId, width);
     });
+
+    refreshStickyHeaderLayoutForTable(table);
   }
 
   function applyStoredWidthsToTables(tables) {
@@ -491,41 +635,10 @@
     });
   }
 
-  function dispatchStickyRefresh() {
-    stickyRefreshFrame = null;
-    window.dispatchEvent(new Event('resize'));
-
-    var callbacks = stickyRefreshCallbacks;
-    stickyRefreshCallbacks = [];
-    callbacks.forEach(function(callback) {
-      callback();
-    });
-  }
-
-  function scheduleStickyRefresh(callback) {
-    if (callback) {
-      stickyRefreshCallbacks.push(callback);
-    }
-
-    if (stickyRefreshFrame) return;
-
-    stickyRefreshFrame = window.requestAnimationFrame(dispatchStickyRefresh);
-  }
-
   function sourceTableForHandle(handle) {
-    var header = handle.closest('th');
-    if (!header) return null;
-
     var table = handle.closest(TABLE_SELECTOR);
-    var columnId = headerColumnId(header);
-
-    if (table && table.getAttribute('aria-hidden') !== 'true' && !table.classList.contains(FIXED_HEADER_TABLE_CLASS)) {
-      return table;
-    }
 
-    return sourceTables().find(function(sourceTable) {
-      return columnHeader(sourceTable, columnId);
-    }) || matchingSourceTable(table) || null;
+    return table && table.getAttribute('aria-hidden') !== 'true' ? table : null;
   }
 
   function previewBoundsForTable(table, header) {
@@ -533,10 +646,8 @@
     var tableRect = table.getBoundingClientRect();
     var scrollContainer = table.closest('.sticky-table-scroll, .scroll-table, .home-table__wrapper');
     var scrollRect = scrollContainer ? scrollContainer.getBoundingClientRect() : tableRect;
-    var headerTable = header.closest(TABLE_SELECTOR);
-    var fromFixedHeader = headerTable && headerTable.classList.contains(FIXED_HEADER_TABLE_CLASS);
     var viewportBottom = viewportHeight();
-    var top = fromFixedHeader ? headerRect.top : Math.max(tableRect.top, scrollRect.top);
+    var top = Math.max(tableRect.top, scrollRect.top);
     var bottom = Math.min(viewportBottom, Math.max(tableRect.bottom, scrollRect.bottom, headerRect.bottom));
 
     top = Math.max(0, Math.min(top, viewportBottom));
@@ -551,6 +662,10 @@
     };
   }
 
+  function previewParentForTable(table) {
+    return table.closest('.main-content, .admin-main') || document.body;
+  }
+
   function updateDragPreview(preview, width) {
     if (!preview) return;
 
@@ -567,7 +682,7 @@
     element.style.top = cssPixelValue(bounds.top);
     element.style.height = cssPixelValue(bounds.height);
 
-    document.body.appendChild(element);
+    previewParentForTable(table).appendChild(element);
 
     var preview = {
       element: element
@@ -673,38 +788,9 @@
     });
   }
 
-  function refreshStickyHeaderColumn(pendingWidth, callback) {
-    var api = window.YummyGuideAdministrateStickyTableHeaders;
-
-    if (api && typeof api.refreshColumnWidth === 'function') {
-      var refreshed = api.refreshColumnWidth({
-        sourceTable: pendingWidth.sourceTable,
-        columnId: pendingWidth.columnId,
-        width: pendingWidth.width
-      });
-
-      if (refreshed) {
-        window.requestAnimationFrame(callback);
-        return;
-      }
-    }
-
-    scheduleStickyRefresh(callback);
-  }
-
-  function refreshStickyHeaderTable(sourceTable, callback) {
-    var api = window.YummyGuideAdministrateStickyTableHeaders;
-
-    if (api && typeof api.refreshTable === 'function') {
-      var refreshed = api.refreshTable(sourceTable, callback);
-
-      if (refreshed) return;
-    }
-
-    scheduleStickyRefresh(callback);
-  }
-
   function refreshStickyLeftColumns(sourceTable) {
+    refreshStickyHeaderLayoutForTable(sourceTable);
+
     var api = window.YummyGuideAdministrateStickyLeftColumns;
 
     if (api && typeof api.refreshTable === 'function') {
@@ -767,7 +853,8 @@
       widths[pendingWidth.columnId] = preciseNumber(pendingWidth.width);
       safeWriteWidths(pendingWidth.storageKey, widths);
       refreshStickyLeftColumnsForWidth(pendingWidth);
-      refreshStickyHeaderColumn(pendingWidth, function() {
+      refreshStickyHeaderLayoutForTable(pendingWidth.sourceTable);
+      window.requestAnimationFrame(function() {
         stopApplyingWidth(pendingWidth.preview);
       });
     } catch (error) {
@@ -888,15 +975,12 @@
     clearColumnWidth(columnId, key);
     startApplyingWidth();
     if (sourceTable) {
-      refreshStickyHeaderTable(sourceTable, function() {
-        refreshStickyLeftColumns(sourceTable);
-        stopApplyingWidth(null);
-      });
-    } else {
-      scheduleStickyRefresh(function() {
-        stopApplyingWidth(null);
-      });
+      refreshStickyLeftColumns(sourceTable);
     }
+
+    window.requestAnimationFrame(function() {
+      stopApplyingWidth(null);
+    });
   }
 
   function stopHandleClick(event) {
@@ -940,6 +1024,7 @@
     });
 
     applyStoredWidthsToTables(configuredTables);
+    refreshStickyHeaderLayout(root);
   }
 
   function initializeFromDocument() {
@@ -963,7 +1048,12 @@
           if (!shouldInitializeForAddedNode(node)) return;
 
           initializeColumnResizer(node);
+          refreshStickyHeaderLayout(node);
         });
+
+        if (mutation.target && mutation.target.nodeType === Node.ELEMENT_NODE) {
+          refreshStickyHeaderLayout(mutation.target);
+        }
       });
     });
 
@@ -973,6 +1063,10 @@
     });
   }
 
+  window.YummyGuideAdministrateColumnResizer = {
+    refreshStickyHeaderLayout: refreshStickyHeaderLayout
+  };
+
   setTimeout(initializeFromDocument, 100);
   setTimeout(initializeFromDocument, 300);
 })();

data/app/assets/stylesheets/yummy_guide_administrate/_column_resizer.scss

@@ -1,4 +1,4 @@
-table.admin-column-resizer__table:not(.table-fixed-header__table) {
+table.admin-column-resizer__table {
   table-layout: auto !important;
   width: max-content !important;
   min-width: 100% !important;
@@ -56,7 +56,7 @@ table.admin-column-resizer__table:not(.table-fixed-header__table) {
 
 .admin-column-resizer__preview {
   position: fixed;
-  z-index: 10000;
+  z-index: var(--admin-column-resizer-preview-z-index, 14);
   box-sizing: border-box;
   pointer-events: none;
   background: rgba(37, 99, 235, 0.12);
@@ -67,14 +67,6 @@ table.admin-column-resizer__table:not(.table-fixed-header__table) {
   will-change: width;
 }
 
-[data-fixed-table-header] .admin-column-resizer__handle {
-  pointer-events: auto;
-}
-
-[data-fixed-table-header] .table-fixed-header__table th.admin-column-resizer__header:not(.sticky):not(.sticky-left) {
-  position: relative;
-}
-
 @media (pointer: coarse), screen and (max-width: 767px) {
   .admin-column-resizer__handle {
     right: -14px;