Weishen/Hydro
2
0 Fork 0
mirror of https://gitcode.com/gh_mirrors/hy/Hydro.git synced 2026-10-20 01:38:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: fix sticky table header

Browse Source
This commit is contained in:
undefined committed 2026-05-07 21:40:20 +08:00
1 parent 3b13ddb8c3
commit cc74b995ee
2 files changed
+18 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui-default/components/sticky/sticky.page.js
+7 -5
View File
@@ -4,10 +4,6 @@ import responsiveCutoff from 'vj/breakpoints.json';
import { AutoloadPage } from 'vj/misc/Page'; import { AutoloadPage } from 'vj/misc/Page';
import { isAbove, isBelow } from 'vj/utils/mediaQuery'; import { isAbove, isBelow } from 'vj/utils/mediaQuery';
const navHeight = isBelow(responsiveCutoff.mobile)
? 0
: $('.nav').height();
function getCutoff(str) { function getCutoff(str) {
if (str === 'medium') return responsiveCutoff.mobile; if (str === 'medium') return responsiveCutoff.mobile;
if (str === 'large') return responsiveCutoff.desktop; if (str === 'large') return responsiveCutoff.desktop;
@@ -15,15 +11,21 @@ function getCutoff(str) {
} }
function updateStickies($stickies) { function updateStickies($stickies) {
const navHeight = isBelow(responsiveCutoff.mobile) ? 0 : ($('.nav').height() || 0);
$stickies.get().forEach((element) => { $stickies.get().forEach((element) => {
const $sticky = $(element); const $sticky = $(element);
const shouldEnableSticky = isAbove($sticky.data('sticky-cutoff-min')); const shouldEnableSticky = isAbove($sticky.data('sticky-cutoff-min'));
const topOffset = 10 + navHeight;
if (shouldEnableSticky) { if (shouldEnableSticky) {
element.style.position = 'sticky'; element.style.position = 'sticky';
element.style.top = `${10 + navHeight}px`; element.style.top = `${topOffset}px`;
element.style.maxHeight = `calc(100vh - ${topOffset + 10}px)`;
element.style.overflowY = 'auto';
} else { } else {
element.style.position = ''; element.style.position = '';
element.style.top = ''; element.style.top = '';
element.style.maxHeight = '';
element.style.overflowY = '';
} }
}); });
} }
packages/ui-default/components/table/StyledTable.js
+11 -8
View File
@@ -5,7 +5,7 @@ import { isBelow } from 'vj/utils/mediaQuery';
const navHeight = isBelow(responsiveCutoff.mobile) const navHeight = isBelow(responsiveCutoff.mobile)
? 0 ? 0
: $('.nav').height(); : ($('.nav').height() || 0);
export default class StyledTable extends DOMAttachedObject { export default class StyledTable extends DOMAttachedObject {
static DOMAttachKey = 'vjStyledTableInstance'; static DOMAttachKey = 'vjStyledTableInstance';
@@ -13,13 +13,20 @@ export default class StyledTable extends DOMAttachedObject {
static DOMAttachSelector = '.data-table'; static DOMAttachSelector = '.data-table';
constructor($dom) { constructor($dom) {
if ($dom.closest('.section__body').length === 0) { const $body = $dom.closest('.section__body');
if ($body.length === 0) {
super(null); super(null);
return; return;
} }
super($dom); super($dom);
// Scroll container only wraps the data table
this.$container = $('<div>').addClass('section__table-container');
this.$container.insertBefore(this.$dom);
this.$container.append(this.$dom);
if ($body[0].style.overflow === 'hidden') return;
// Sentinel to detect when header becomes stuck // Sentinel to detect when header becomes stuck
this.$sentinel = $('<div>').css({ height: 0, margin: 0, padding: 0 }); this.$sentinel = $('<div>').css({ height: 0, margin: 0, padding: 0 });
@@ -31,12 +38,8 @@ export default class StyledTable extends DOMAttachedObject {
top: `${navHeight}px`, top: `${navHeight}px`,
}); });
// Scroll container only wraps the data table this.$sentinel.insertBefore(this.$container);
this.$container = $('<div>').addClass('section__table-container'); this.$header.insertBefore(this.$container);
this.$sentinel.insertBefore(this.$dom);
this.$header.insertBefore(this.$dom);
this.$container.insertBefore(this.$dom);
this.$container.append(this.$dom);
this.$header.empty(); this.$header.empty();
this.$dom.children('colgroup').clone().appendTo(this.$header); this.$dom.children('colgroup').clone().appendTo(this.$header);