|
|
|
|
@@ -768,7 +768,7 @@ export class DeesTable<T> extends DeesElement {
|
|
|
|
|
${effectiveColumns
|
|
|
|
|
.filter((c) => !c.hidden)
|
|
|
|
|
.map((col) => {
|
|
|
|
|
const isSortable = !!col.sortable;
|
|
|
|
|
const isSortable = col.sortable !== false;
|
|
|
|
|
const ariaSort = this.getAriaSort(col);
|
|
|
|
|
return html`
|
|
|
|
|
<th
|
|
|
|
|
@@ -1053,14 +1053,23 @@ export class DeesTable<T> extends DeesElement {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Active when the table top is above the stick line and the table bottom
|
|
|
|
|
// hasn't yet scrolled past it.
|
|
|
|
|
const shouldBeActive =
|
|
|
|
|
tableRect.top < stick.top && tableRect.bottom > stick.top + Math.min(headerHeight, 1);
|
|
|
|
|
// Active when the table top is above the stick line and any pixel of the
|
|
|
|
|
// table still sits below it. As the table's bottom edge approaches the
|
|
|
|
|
// stick line we shrink the floating container and slide the cloned header
|
|
|
|
|
// up inside it, so the header appears to scroll off with the table
|
|
|
|
|
// instead of snapping away in one frame.
|
|
|
|
|
const distance = tableRect.bottom - stick.top;
|
|
|
|
|
const shouldBeActive = tableRect.top < stick.top && distance > 0;
|
|
|
|
|
|
|
|
|
|
if (shouldBeActive !== this.__floatingActive) {
|
|
|
|
|
this.__floatingActive = shouldBeActive;
|
|
|
|
|
fh.classList.toggle('active', shouldBeActive);
|
|
|
|
|
if (!shouldBeActive) {
|
|
|
|
|
// Reset inline geometry so the next activation starts clean.
|
|
|
|
|
fh.style.height = '';
|
|
|
|
|
const ft = this.__floatingTableEl;
|
|
|
|
|
if (ft) ft.style.transform = '';
|
|
|
|
|
}
|
|
|
|
|
if (shouldBeActive) {
|
|
|
|
|
// Clone subtree doesn't exist yet — wait for the next render to
|
|
|
|
|
// materialize it, then complete geometry sync.
|
|
|
|
|
@@ -1100,10 +1109,19 @@ export class DeesTable<T> extends DeesElement {
|
|
|
|
|
fh.style.left = `${clipLeft}px`;
|
|
|
|
|
fh.style.width = `${clipWidth}px`;
|
|
|
|
|
|
|
|
|
|
// Exit animation: when the table's bottom edge is within `headerHeight`
|
|
|
|
|
// pixels of the stick line, shrink the container and translate the
|
|
|
|
|
// inner table up by the same amount. overflow:hidden on .floatingHeader
|
|
|
|
|
// clips the overflow, producing a scroll-off effect.
|
|
|
|
|
const visibleHeight = Math.min(headerHeight, distance);
|
|
|
|
|
const exitOffset = headerHeight - visibleHeight;
|
|
|
|
|
fh.style.height = `${visibleHeight}px`;
|
|
|
|
|
|
|
|
|
|
// The inner table is positioned so the visible region matches the real
|
|
|
|
|
// table's left edge — shift it left when we clipped to the container.
|
|
|
|
|
floatTable.style.width = `${tableRect.width}px`;
|
|
|
|
|
floatTable.style.marginLeft = `${tableRect.left - clipLeft}px`;
|
|
|
|
|
floatTable.style.transform = exitOffset > 0 ? `translateY(-${exitOffset}px)` : '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public async disconnectedCallback() {
|
|
|
|
|
@@ -1496,7 +1514,7 @@ export class DeesTable<T> extends DeesElement {
|
|
|
|
|
// Maximum exposed slot: one beyond the current cascade, capped at the
|
|
|
|
|
// number of sortable columns. If the column is already in the cascade we
|
|
|
|
|
// never need to grow the slot count.
|
|
|
|
|
const sortableColumnCount = effectiveColumns.filter((c) => !!c.sortable).length;
|
|
|
|
|
const sortableColumnCount = effectiveColumns.filter((c) => c.sortable !== false).length;
|
|
|
|
|
const maxSlot = Math.min(
|
|
|
|
|
Math.max(cascadeLen + (existing ? 0 : 1), 1),
|
|
|
|
|
Math.max(sortableColumnCount, 1)
|
|
|
|
|
@@ -1602,6 +1620,17 @@ export class DeesTable<T> extends DeesElement {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
items.push({ divider: true });
|
|
|
|
|
items.push({
|
|
|
|
|
name: this.showColumnFilters ? 'Hide column filters' : 'Show column filters',
|
|
|
|
|
iconName: this.showColumnFilters ? 'lucide:filterX' : 'lucide:filter',
|
|
|
|
|
action: async () => {
|
|
|
|
|
this.showColumnFilters = !this.showColumnFilters;
|
|
|
|
|
this.requestUpdate();
|
|
|
|
|
return null;
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return items;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|