web/dataTable
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: implement AOT template flattening for columns

Browse Source
This commit is contained in:
AI Engineer 2026-05-24 13:23:44 +08:00
parent 59a9e5d650
commit 6081140907
6 changed files with 521 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

375
dist/datatable.js vendored
View File

@ -50,11 +50,11 @@ const createPerfMonitor = () => {
const createScrollManager = (container, state, onRenderedListChange) => {
const vs = VirtualScroll({ itemHeight: 40 });
let scrollEl = null;
const refresh = () => {
const refresh = (isLayoutChange = false) => {
if (!scrollEl) return;
const res = vs.calc(scrollEl, state.list);
if (res) {
if (state.prevHeight === res.prevHeight && state.postHeight === res.postHeight && state._listStartIndex === res.listStartIndex && state._renderedList.length === res.renderedList.length) {
if (!isLayoutChange && state.prevHeight === res.prevHeight && state.postHeight === res.postHeight && state._listStartIndex === res.listStartIndex && state._renderedList.length === res.renderedList.length) {
return;
}
Object.assign(state, {
@ -63,7 +63,7 @@ const createScrollManager = (container, state, onRenderedListChange) => {
_listStartIndex: res.listStartIndex,
_renderedList: res.renderedList
});
onRenderedListChange == null ? void 0 : onRenderedListChange(res.renderedList.length);
onRenderedListChange == null ? void 0 : onRenderedListChange(res.renderedList.length, isLayoutChange);
}
};
return {
@ -72,13 +72,13 @@ const createScrollManager = (container, state, onRenderedListChange) => {
},
reset: (list) => {
state._listStartIndex = 0;
state._renderedList = vs.reset(list, scrollEl || container) || [];
vs.reset(list, scrollEl || container);
if (state.list === list) {
vs.init(list, refresh);
vs.init(list, () => refresh(true));
}
},
refresh,
onScroll: refresh
onScroll: () => refresh(false)
};
};
const createSelectionManager = (container, state) => {
@ -92,6 +92,7 @@ const createSelectionManager = (container, state) => {
let lastHadSelection = false;
const applySelectionUI = () => {
var _a;
if (window.__DT_FEATURES__ && !window.__DT_FEATURES__.selection) return;
let boundMinRow = Infinity, boundMaxRow = -Infinity;
if (activeBounds) {
boundMinRow = Math.min(boundMinRow, activeBounds.minRow);
@ -106,28 +107,24 @@ const createSelectionManager = (container, state) => {
lastHadSelection = hasSelection;
const body = container.querySelector(".dt-body");
if (!body) return;
const rowNodes = body.children;
for (let r = 0; r < rowNodes.length; r++) {
const rowNode = rowNodes[r];
const nodes = body.children;
for (let r = 0; r < nodes.length; r++) {
const rowNode = nodes[r];
if (!rowNode.classList.contains("dt-body-row")) continue;
const absoluteRow = (((_a = rowNode._ref) == null ? void 0 : _a.rIdx) ?? -1) + state._listStartIndex;
const cellNodes = rowNode.children;
if (!hasSelection || absoluteRow < boundMinRow || absoluteRow > boundMaxRow) {
for (let i = 0; i < cellNodes.length; i++) {
if (cellNodes[i].classList.contains("dt-cell-selected")) {
cellNodes[i].classList.remove("dt-cell-selected");
}
const cellNodes2 = rowNode.children;
for (let i = 0; i < cellNodes2.length; i++) {
cellNodes2[i].classList.remove("dt-cell-selected");
}
continue;
}
const cellNodes = rowNode.children;
for (let i = 0; i < cellNodes.length; i++) {
const isSelected = isCellSelected(absoluteRow, i);
const hasClass = cellNodes[i].classList.contains("dt-cell-selected");
if (isSelected && !hasClass) {
cellNodes[i].classList.add("dt-cell-selected");
} else if (!isSelected && hasClass) {
cellNodes[i].classList.remove("dt-cell-selected");
}
const cell = cellNodes[i];
if (isSelected) cell.classList.add("dt-cell-selected");
else cell.classList.remove("dt-cell-selected");
}
}
};
@ -312,13 +309,20 @@ Component.register("DataTable", (container) => {
prevHeight: 0,
postHeight: 0,
_listStartIndex: 0,
selectedRowCount: 0
selectedRowCount: 0,
_originalList: [],
sortConfig: { fieldId: null, direction: null },
filterConfig: {},
activeFieldId: null,
_internalUpdate: false,
_appliedHash: "",
_fieldsDirty: false,
_masterCellNodes: null
});
const perf = createPerfMonitor();
state.perf = perf.stats;
const selection = createSelectionManager(container, state);
const scroll = createScrollManager(container, state, (renderedCount) => {
container.hideEditor();
const scroll = createScrollManager(container, state, (renderedCount, isLayoutChange) => {
selection.applySelectionUI();
});
let _prevSpacer, _postSpacer, _editorOverlay;
@ -346,9 +350,119 @@ Component.register("DataTable", (container) => {
}
perf.endFrame(frameStart, state._renderedList.length);
};
let _scrollRaf = null;
container.onScroll = () => {
perf.onScroll();
container.refresh();
if (_scrollRaf) return;
_scrollRaf = requestAnimationFrame(() => {
_scrollRaf = null;
const menu = container.querySelector(".dt-column-menu");
if (menu && menu.style.display !== "none" && state.activeFieldId) {
const headerCell = container.querySelector(`.header-cell[data-id="${state.activeFieldId}"]`);
if (headerCell) {
const btn = headerCell.querySelector(".header-menu-btn");
const btnRect = btn.getBoundingClientRect();
const rootRect = container.getBoundingClientRect();
menu.style.left = btnRect.right - rootRect.left - 180 + "px";
menu.style.top = btnRect.bottom - rootRect.top + 5 + "px";
}
}
});
};
container.applySortFilter = (options = {}) => {
if (state._internalUpdate) return;
const targetFilters = { ...state.filterConfig, ...options.filters || {} };
const targetSort = options.sort !== void 0 ? options.sort ? { fieldId: state.activeFieldId, direction: options.sort } : { fieldId: null, direction: null } : state.sortConfig;
const currentHash = JSON.stringify({ s: targetSort, f: targetFilters });
if (state._appliedHash === currentHash && !options.force) return;
state._internalUpdate = true;
const startTime = performance.now();
let list = options.force ? state.list : [...state._originalList || []];
if (!options.force) {
Object.keys(targetFilters).forEach((fieldId) => {
const val = targetFilters[fieldId];
if (val) {
const lowerVal = String(val).toLowerCase();
list = list.filter((item) => String(item[fieldId] ?? "").toLowerCase().includes(lowerVal));
}
});
if (targetSort && targetSort.fieldId && targetSort.direction) {
list.sort((a, b) => {
let va = a[targetSort.fieldId], vb = b[targetSort.fieldId];
if (va === vb) return 0;
if (va === null || va === void 0) return 1;
if (vb === null || vb === void 0) return -1;
const res = va > vb ? 1 : -1;
return targetSort.direction === "asc" ? res : -res;
});
}
}
window.__perfTrace = { evalCount: 0, evalTotal: 0 };
performance.now();
state._appliedHash = currentHash;
if (options.sort !== void 0) state.sortConfig = targetSort;
state.list = list;
state._internalUpdate = false;
const frameEnd = performance.now();
const totalTime = frameEnd - startTime;
console.log(`[DataTable Performance Profile] Sync Block: ${totalTime.toFixed(2)}ms (Eval: ${window.__perfTrace.evalCount})`);
requestAnimationFrame(() => {
setTimeout(() => {
console.log(`[DataTable Performance Profile] E2E Paint: ${(performance.now() - startTime).toFixed(2)}ms`);
});
});
window.__perfTrace = null;
};
container.showColumnMenu = (field, e) => {
e.stopPropagation();
const btn = e.currentTarget;
const rect = btn.getBoundingClientRect();
const rootRect = container.getBoundingClientRect();
const menu = container.querySelector(".dt-column-menu");
state.activeFieldId = field.id;
menu.style.display = "block";
menu.style.left = rect.right - rootRect.left - 180 + "px";
menu.style.top = rect.bottom - rootRect.top + 5 + "px";
const onGlobalClick = (ev) => {
if (menu.contains(ev.target)) return;
if (!btn.contains(ev.target)) {
container.hideColumnMenu();
container.applySortFilter();
document.removeEventListener("mousedown", onGlobalClick);
}
};
document.addEventListener("mousedown", onGlobalClick);
RefreshState(menu);
setTimeout(() => {
const input = menu.querySelector("input");
if (input) input.focus();
}, 50);
};
container.hideColumnMenu = () => {
const menu = container.querySelector(".dt-column-menu");
if (menu) menu.style.display = "none";
};
container.setSort = (direction) => {
container.applySortFilter({ sort: direction });
};
container.clearColumnSettings = () => {
const filters = { ...state.filterConfig };
delete filters[state.activeFieldId];
state.filterConfig = filters;
container.applySortFilter({ sort: null });
container.hideColumnMenu();
};
container._initRow = (rowNode) => {
if (!rowNode || !rowNode.children) return;
const cells = rowNode.children;
for (let i = 0; i < cells.length; i++) {
const cell = cells[i];
const fIdx = parseInt(cell.dataset.fidx);
if (!isNaN(fIdx)) {
cell._refExt = { f: state.fields[fIdx], fIdx };
}
}
};
container.onMainMouseDown = (e) => {
var _a, _b;
@ -356,10 +470,9 @@ Component.register("DataTable", (container) => {
if (!cell) return;
const row = cell.closest(".dt-row");
if (!row || row.classList.contains("dt-header-row")) return;
const fIdx = ((_a = cell._ref) == null ? void 0 : _a.fIdx) ?? Array.from(row.children).indexOf(cell);
const fIdx = cell.dataset.fidx !== void 0 ? parseInt(cell.dataset.fidx) : ((_a = cell._ref) == null ? void 0 : _a.fIdx) ?? Array.from(row.children).indexOf(cell);
const rIdx = ((_b = row._ref) == null ? void 0 : _b.rIdx) ?? Array.from(container.querySelectorAll(".dt-body-row")).indexOf(row);
const absoluteRow = rIdx + state._listStartIndex;
container.startSelect(absoluteRow, fIdx, e);
container.startSelect(rIdx + state._listStartIndex, fIdx, e);
};
container.onMainMouseOver = (e) => {
var _a, _b;
@ -368,29 +481,57 @@ Component.register("DataTable", (container) => {
if (!cell) return;
const row = cell.closest(".dt-row");
if (!row || row.classList.contains("dt-header-row")) return;
const fIdx = ((_a = cell._ref) == null ? void 0 : _a.fIdx) ?? Array.from(row.children).indexOf(cell);
const fIdx = cell.dataset.fidx !== void 0 ? parseInt(cell.dataset.fidx) : ((_a = cell._ref) == null ? void 0 : _a.fIdx) ?? Array.from(row.children).indexOf(cell);
const rIdx = ((_b = row._ref) == null ? void 0 : _b.rIdx) ?? Array.from(container.querySelectorAll(".dt-body-row")).indexOf(row);
const absoluteRow = rIdx + state._listStartIndex;
container.updateSelect(absoluteRow, fIdx);
container.updateSelect(rIdx + state._listStartIndex, fIdx);
};
container.onMainDblClick = (e) => {
var _a, _b;
var _a, _b, _c;
const cell = e.target.closest(".dt-cell");
if (!cell) return;
const row = cell.closest(".dt-row");
if (!row || row.classList.contains("dt-header-row")) return;
const item = (_a = row._ref) == null ? void 0 : _a.item;
const field = (_b = cell._ref) == null ? void 0 : _b.f;
const fIdx = cell.dataset.fidx !== void 0 ? parseInt(cell.dataset.fidx) : ((_b = cell._ref) == null ? void 0 : _b.fIdx) ?? Array.from(row.children).indexOf(cell);
const field = ((_c = cell._ref) == null ? void 0 : _c.f) ?? state.fields[fIdx];
if (item && field) container.editCell(item, field, cell);
};
state.__watch("list", (list) => {
scroll.init();
scroll.reset(list);
});
state.__watch("fields", (fields) => {
if (!fields) return;
state._fieldsDirty = true;
const gridTemplate = fields.map((f) => `var(--w-${f.id}, ${f.width || 150}px)`).join(" ");
const totalWidth = fields.reduce((sum, f) => sum + (f.width || 150), 0);
container.style.setProperty("--dt-grid-template", gridTemplate);
container.style.setProperty("--dt-row-width", totalWidth + "px");
});
state.__watch("list", (list) => {
if (state._fieldsDirty) {
state._fieldsDirty = false;
const rowTemplate = container.querySelector('.dt-body template[index="rIdx"]');
if (rowTemplate) {
const fieldTemplate = rowTemplate.content.querySelector('template[as="f"]');
if (fieldTemplate) {
if (!state._masterCellNodes) {
state._masterCellNodes = Array.from(fieldTemplate.content.childNodes).map((n) => n.cloneNode(true));
}
fieldTemplate.removeAttribute("$each");
fieldTemplate.removeAttribute("as");
fieldTemplate.removeAttribute("index");
fieldTemplate.setAttribute("$if", "true");
fieldTemplate.content.textContent = "";
state.fields.forEach((f, fIdx) => {
state._masterCellNodes.forEach((master) => {
const clone = master.cloneNode(true);
if (clone.nodeType === 1) clone.dataset.fidx = fIdx;
fieldTemplate.content.appendChild(clone);
});
});
}
}
}
if (!state._internalUpdate) state._originalList = [...list || []];
scroll.init();
scroll.reset(list);
});
let currentEditingNode = null;
container.editCell = (row, field, cellNode) => {
@ -406,16 +547,7 @@ Component.register("DataTable", (container) => {
overlay.style.left = rect.left - rootRect.left + "px";
overlay.style.top = rect.top - rootRect.top + "px";
overlay.style.width = minW + "px";
overlay.style.height = "";
overlay.style.minHeight = "";
overlay.style.alignItems = "center";
if (field.type === "textarea" || field.type === "TagsInput") {
overlay.style.minHeight = (field.type === "textarea" ? 150 : rect.height) + "px";
overlay.style.height = "auto";
overlay.style.alignItems = "flex-start";
} else {
overlay.style.height = rect.height + "px";
}
overlay.style.height = field.type === "textarea" || field.type === "TagsInput" ? "auto" : rect.height + "px";
State.editingSchema = [{ ...field, name: field.id, label: "" }];
State.editingData = row;
RefreshState(overlay);
@ -428,36 +560,16 @@ Component.register("DataTable", (container) => {
if (!_editorOverlay) _editorOverlay = container.querySelector(".dt-editor-overlay");
if (!_editorOverlay || _editorOverlay.style.display === "none") return;
_editorOverlay.style.display = "none";
if (save && currentEditingNode) {
RefreshState(currentEditingNode);
}
State.editingSchema = null;
State.editingData = null;
currentEditingNode = null;
if (save && currentEditingNode) RefreshState(currentEditingNode);
State.editingSchema = State.editingData = currentEditingNode = null;
container.focus();
};
container.startSelect = selection.startSelect;
container.updateSelect = selection.updateSelect;
container.deleteSelected = selection.deleteSelected;
container.addEventListener("keydown", (e) => {
if (e.ctrlKey || e.metaKey) {
const k = e.key.toLowerCase();
if (k === "c") {
e.preventDefault();
selection.copy();
}
if (k === "v") {
e.preventDefault();
selection.paste();
}
}
if (e.key === "Escape") container.hideEditor(false);
});
const onGlobalMouseDown = (e) => {
const overlay = container.querySelector(".dt-editor-overlay");
if (overlay && overlay.style.display !== "none" && !overlay.contains(e.target)) {
container.hideEditor(true);
}
if (overlay && overlay.style.display !== "none" && !overlay.contains(e.target)) container.hideEditor(true);
if (!container.contains(e.target) && !(overlay == null ? void 0 : overlay.contains(e.target))) selection.clearAllActive();
};
window.addEventListener("mouseup", selection.endSelect);
@ -477,35 +589,70 @@ Component.register("DataTable", (container) => {
style="overflow-anchor:none; min-height: 0">
<div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">
<div class="dt-row dt-header-row fw-bold text-muted small">
<div $each="this.state?.fields || []" class="dt-cell border-end px-2 d-flex align-items-center">
<span $text="item.name" class="text-truncate"></span>
</div>
<template $each="this.state?.fields || []">
<div $data-id="item.id" class="dt-cell border-end px-2 d-flex align-items-center justify-content-between header-cell">
<div class="d-flex align-items-center overflow-hidden">
<i $if="this.state?.sortConfig?.fieldId === item.id"
$class="'bi bi-sort-' + (this.state?.sortConfig?.direction === 'asc' ? 'down' : 'up-alt') + ' me-1 text-primary'"></i>
<i $if="this.state?.filterConfig?.[item.id]" class="bi bi-filter me-1 text-primary"></i>
<span $text="item.name" class="text-truncate"></span>
</div>
<button class="btn btn-xs btn-link text-muted p-0 border-0 header-menu-btn" $onclick="this.showColumnMenu(item, event)">
<i class="bi bi-chevron-down"></i>
</button>
</div>
</template>
</div>
</div>
<div class="dt-body" style="position:relative">
<div class="dt-spacer-prev flex-shrink-0" style="display:none"></div>
<div $each="this.state?._renderedList || []" key="id" index="rIdx" class="dt-row dt-body-row border-bottom bg-white">
<div $each="this.state?.fields || []" as="f" index="fIdx" class="dt-cell border-end px-2 d-flex align-items-center">
<span $text="this.format(item[f.id], f)" class="text-truncate"></span>
<template $each="this.state?._renderedList || []" key="id" index="rIdx">
<div class="dt-row dt-body-row border-bottom bg-white" $.="this._initRow(thisNode)">
<template $each="this.state?.fields || []" as="f" index="fIdx">
<div class="dt-cell border-end px-2 d-flex align-items-center">
<span $text="!f.formatter ? item[f.id] : this.format(item[f.id], f)" class="text-truncate"></span>
</div>
</template>
</div>
</div>
</template>
<div class="dt-spacer-post flex-shrink-0" style="display:none"></div>
</div>
</div>
<!-- Shared Editor Overlay -->
<div class="dt-editor-overlay" style="display: none" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()">
<div class="dt-column-menu border bg-body shadow-sm rounded" style="display:none; position:absolute; z-index:2000; min-width:180px" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()">
<div class="list-group list-group-flush">
<button class="list-group-item list-group-item-action py-2 d-flex align-items-center" $onclick="this.setSort('asc')">
<i class="bi bi-sort-alpha-down me-2"></i> Sort Ascending
</button>
<button class="list-group-item list-group-item-action py-2 d-flex align-items-center" $onclick="this.setSort('desc')">
<i class="bi bi-sort-alpha-up-alt me-2"></i> Sort Descending
</button>
<div class="p-2 border-top bg-light-subtle">
<div class="d-flex align-items-center mb-1 text-muted fw-bold" style="font-size: 10px">
<i class="bi bi-filter me-1"></i> LOCAL FILTER
</div>
<input type="text" class="form-control form-control-sm" placeholder="Search..."
$bind="this.state.filterConfig[this.state.activeFieldId]"
$onkeydown="if(event.key === 'Enter') this.applySortFilter()">
</div>
<button class="list-group-item list-group-item-action py-2 text-danger d-flex align-items-center border-top" $onclick="this.clearColumnSettings()">
<i class="bi bi-x-circle me-2"></i> Clear Settings
</button>
</div>
</div>
<div class="dt-editor-overlay dt-editor-container" style="display: none" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()">
<AutoForm inline class="h-100 w-100" $onsubmit="thisNode.closest('DataTable').hideEditor(true)"/>
</div>
<div class="dt-footer border-top bg-light d-flex align-items-center px-2 py-1 small text-muted" style="height:32px">
<div class="flex-grow-1">
Total: <span $text="this.state?.list?.length || 0"></span> |
Selected Rows: <span $text="this.state?.selectedRowCount || 0"></span>
<div class="d-flex align-items-center gap-2">
<span $text="(this.state?.selectedRowCount || 0) + ' / ' + (this.state?.list?.length || 0)"></span>
<button class="btn btn-xs btn-link text-danger p-0 border-0" title="Delete Selected"
$if="this.state?.selectedRowCount" $onclick="this.deleteSelected()">
<i class="bi bi-trash"></i>
</button>
</div>
<button class="btn btn-xs btn-outline-danger py-0 px-2" style="font-size: 11px" $disabled="!this.state?.selectedRowCount" $onclick="this.deleteSelected()">
<i class="bi bi-trash me-1"></i>Delete Selected
</button>
</div>
</div>
`
@ -518,57 +665,27 @@ Component.register("DataTable", (container) => {
.dt-row {
display: grid;
grid-template-columns: var(--dt-grid-template);
width: max-content;
width: var(--dt-row-width, max-content);
min-width: 100%;
height: 40px;
contain: paint layout;
}
.dt-header-row {
background-color: var(--bs-tertiary-bg);
}
.dt-cell {
background: inherit;
white-space: nowrap;
flex-shrink: 0;
}
.dt-body-row:hover {
background-color: var(--bs-secondary-bg) !important;
}
.dt-cell-selected {
background-color: var(--bs-primary-bg-subtle) !important;
}
.dt-header-row { background-color: var(--bs-tertiary-bg); }
.dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
.dt-body-row:hover { background-color: var(--bs-secondary-bg) !important; }
.dt-cell-selected { background-color: var(--bs-primary-bg-subtle) !important; }
.header-cell .header-menu-btn { opacity: 0; transition: opacity 0.2s; }
.header-cell:hover .header-menu-btn { opacity: 1; }
.dt-column-menu { box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; }
.dt-column-menu .list-group-item { border: none; cursor: pointer; }
.dt-column-menu .list-group-item:hover { background-color: var(--bs-light); }
.dt-editor-overlay {
position: absolute;
z-index: 1000;
background: var(--bs-body-bg);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
border: 1px solid var(--bs-primary);
align-items: center;
overflow: visible;
transition: top 0.1s ease, left 0.1s ease, width 0.1s ease, height 0.1s ease, min-height 0.1s ease;
}
.dt-editor-overlay .auto-form-root, .dt-editor-overlay form {
height: 100%;
width: 100%;
}
.dt-editor-overlay .form-control, .dt-editor-overlay .form-select {
border: none !important;
border-radius: 0 !important;
height: 100% !important;
width: 100% !important;
box-shadow: none !important;
padding: 0 8px !important;
}
.dt-editor-overlay .form-check.form-switch {
padding-left: 2.5em;
margin: 0;
height: 100%;
display: flex;
align-items: center;
}
.btn-xs {
padding: 1px 5px;
line-height: 1.5;
position: absolute; z-index: 1000; background: var(--bs-body-bg);
box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 1px solid var(--bs-primary);
align-items: center; overflow: visible;
}
.dt-editor-overlay .form-control { border: none !important; border-radius: 0 !important; height: 100% !important; padding: 0 8px !important; }
.btn-xs { padding: 1px 5px; line-height: 1.5; }
</style>
`
));

2
dist/datatable.min.js vendored
View File

File diff suppressed because one or more lines are too long

387
src/index.js
View File

@ -11,7 +11,15 @@ Component.register('DataTable', container => {
Object.assign(state, {
list: [], fields: [], _renderedList: [],
prevHeight: 0, postHeight: 0, _listStartIndex: 0,
selectedRowCount: 0
selectedRowCount: 0,
_originalList: [],
sortConfig: { fieldId: null, direction: null },
filterConfig: {},
activeFieldId: null,
_internalUpdate: false,
_appliedHash: '',
_fieldsDirty: false,
_masterCellNodes: null
})
const perf = createPerfMonitor();
@ -19,10 +27,7 @@ Component.register('DataTable', container => {
const selection = createSelectionManager(container, state);
const scroll = createScrollManager(container, state, (renderedCount) => {
// Only hide editor if we actually scroll past its visibility range
// For now, simple hide for safety
container.hideEditor();
const scroll = createScrollManager(container, state, (renderedCount, isLayoutChange) => {
selection.applySelectionUI();
});
@ -41,7 +46,6 @@ Component.register('DataTable', container => {
const frameStart = perf.startFrame();
scroll.refresh();
// Manual DOM Sync for Spacers (Authorized optimization to avoid $if/$style overhead)
if (!_prevSpacer) _prevSpacer = container.querySelector('.dt-spacer-prev');
if (_prevSpacer) {
const h = state.prevHeight || 0;
@ -58,22 +62,143 @@ Component.register('DataTable', container => {
perf.endFrame(frameStart, state._renderedList.length);
};
let _scrollRaf = null;
container.onScroll = () => {
perf.onScroll();
container.refresh();
if (_scrollRaf) return;
_scrollRaf = requestAnimationFrame(() => {
_scrollRaf = null;
const menu = container.querySelector('.dt-column-menu');
if (menu && menu.style.display !== 'none' && state.activeFieldId) {
const headerCell = container.querySelector(`.header-cell[data-id="${state.activeFieldId}"]`);
if (headerCell) {
const btn = headerCell.querySelector('.header-menu-btn');
const btnRect = btn.getBoundingClientRect();
const rootRect = container.getBoundingClientRect();
menu.style.left = (btnRect.right - rootRect.left - 180) + 'px';
menu.style.top = (btnRect.bottom - rootRect.top + 5) + 'px';
}
}
});
};
container.applySortFilter = (options = {}) => {
if (state._internalUpdate) return;
const targetFilters = { ...state.filterConfig, ...(options.filters || {}) };
const targetSort = options.sort !== undefined ? (options.sort ? { fieldId: state.activeFieldId, direction: options.sort } : { fieldId: null, direction: null }) : state.sortConfig;
const currentHash = JSON.stringify({ s: targetSort, f: targetFilters });
if (state._appliedHash === currentHash && !options.force) return;
state._internalUpdate = true;
const startTime = performance.now();
let list = (options.force) ? state.list : [...(state._originalList || [])];
if (!options.force) {
Object.keys(targetFilters).forEach(fieldId => {
const val = targetFilters[fieldId];
if (val) {
const lowerVal = String(val).toLowerCase();
list = list.filter(item => String(item[fieldId] ?? '').toLowerCase().includes(lowerVal));
}
});
if (targetSort && targetSort.fieldId && targetSort.direction) {
list.sort((a, b) => {
let va = a[targetSort.fieldId], vb = b[targetSort.fieldId];
if (va === vb) return 0;
if (va === null || va === undefined) return 1;
if (vb === null || vb === undefined) return -1;
const res = va > vb ? 1 : -1;
return targetSort.direction === 'asc' ? res : -res;
});
}
}
window.__perfTrace = { evalCount: 0, evalTotal: 0 };
const frameStart = performance.now();
state._appliedHash = currentHash;
if (options.sort !== undefined) state.sortConfig = targetSort;
state.list = list;
state._internalUpdate = false;
const frameEnd = performance.now();
const totalTime = frameEnd - startTime;
console.log(`[DataTable Performance Profile] Sync Block: ${totalTime.toFixed(2)}ms (Eval: ${window.__perfTrace.evalCount})`);
requestAnimationFrame(() => {
setTimeout(() => {
console.log(`[DataTable Performance Profile] E2E Paint: ${(performance.now() - startTime).toFixed(2)}ms`);
});
});
window.__perfTrace = null;
};
container.showColumnMenu = (field, e) => {
e.stopPropagation();
const btn = e.currentTarget;
const rect = btn.getBoundingClientRect();
const rootRect = container.getBoundingClientRect();
const menu = container.querySelector('.dt-column-menu');
state.activeFieldId = field.id;
menu.style.display = 'block';
menu.style.left = (rect.right - rootRect.left - 180) + 'px';
menu.style.top = (rect.bottom - rootRect.top + 5) + 'px';
const onGlobalClick = (ev) => {
if (menu.contains(ev.target)) return;
if (!btn.contains(ev.target)) {
container.hideColumnMenu();
container.applySortFilter();
document.removeEventListener('mousedown', onGlobalClick);
}
};
document.addEventListener('mousedown', onGlobalClick);
RefreshState(menu);
setTimeout(() => {
const input = menu.querySelector('input');
if (input) input.focus();
}, 50);
};
container.hideColumnMenu = () => {
const menu = container.querySelector('.dt-column-menu');
if (menu) menu.style.display = 'none';
};
container.setSort = (direction) => {
container.applySortFilter({ sort: direction });
};
container.clearColumnSettings = () => {
const filters = { ...state.filterConfig };
delete filters[state.activeFieldId];
state.filterConfig = filters;
container.applySortFilter({ sort: null });
container.hideColumnMenu();
};
// --- Optimized Context Initialization (Using _refExt) ---
container._initRow = (rowNode) => {
if (!rowNode || !rowNode.children) return;
// This runs during framework's parsing of the cloned row.
// We set _refExt on each cell clone BEFORE _scanTree visits them.
const cells = rowNode.children;
for (let i = 0; i < cells.length; i++) {
const cell = cells[i];
const fIdx = parseInt(cell.dataset.fidx);
if (!isNaN(fIdx)) {
cell._refExt = { f: state.fields[fIdx], fIdx: fIdx };
}
}
};
// --- Optimized Event Delegation & DOM Interaction ---
container.onMainMouseDown = e => {
const cell = e.target.closest('.dt-cell');
if (!cell) return;
const row = cell.closest('.dt-row');
if (!row || row.classList.contains('dt-header-row')) return;
const fIdx = cell._ref?.fIdx ?? Array.from(row.children).indexOf(cell);
const fIdx = cell.dataset.fidx !== undefined ? parseInt(cell.dataset.fidx) : (cell._ref?.fIdx ?? Array.from(row.children).indexOf(cell));
const rIdx = row._ref?.rIdx ?? Array.from(container.querySelectorAll('.dt-body-row')).indexOf(row);
const absoluteRow = rIdx + state._listStartIndex;
container.startSelect(absoluteRow, fIdx, e);
container.startSelect(rIdx + state._listStartIndex, fIdx, e);
};
container.onMainMouseOver = e => {
@ -82,11 +207,9 @@ Component.register('DataTable', container => {
if (!cell) return;
const row = cell.closest('.dt-row');
if (!row || row.classList.contains('dt-header-row')) return;
const fIdx = cell._ref?.fIdx ?? Array.from(row.children).indexOf(cell);
const fIdx = cell.dataset.fidx !== undefined ? parseInt(cell.dataset.fidx) : (cell._ref?.fIdx ?? Array.from(row.children).indexOf(cell));
const rIdx = row._ref?.rIdx ?? Array.from(container.querySelectorAll('.dt-body-row')).indexOf(row);
const absoluteRow = rIdx + state._listStartIndex;
container.updateSelect(absoluteRow, fIdx);
container.updateSelect(rIdx + state._listStartIndex, fIdx);
};
container.onMainDblClick = e => {
@ -94,64 +217,73 @@ Component.register('DataTable', container => {
if (!cell) return;
const row = cell.closest('.dt-row');
if (!row || row.classList.contains('dt-header-row')) return;
const item = row._ref?.item;
const field = cell._ref?.f;
const fIdx = cell.dataset.fidx !== undefined ? parseInt(cell.dataset.fidx) : (cell._ref?.fIdx ?? Array.from(row.children).indexOf(cell));
const field = cell._ref?.f ?? state.fields[fIdx];
if (item && field) container.editCell(item, field, cell);
};
state.__watch('fields', fields => {
if (!fields) return;
state._fieldsDirty = true;
const gridTemplate = fields.map(f => `var(--w-${f.id}, ${f.width || 150}px)`).join(' ');
const totalWidth = fields.reduce((sum, f) => sum + (f.width || 150), 0);
container.style.setProperty('--dt-grid-template', gridTemplate);
container.style.setProperty('--dt-row-width', totalWidth + 'px');
})
state.__watch('list', list => {
if (state._fieldsDirty) {
state._fieldsDirty = false;
const rowTemplate = container.querySelector('.dt-body template[index="rIdx"]');
if (rowTemplate) {
const fieldTemplate = rowTemplate.content.querySelector('template[as="f"]');
if (fieldTemplate) {
// 1. Capture the master copy of cell nodes once
if (!state._masterCellNodes) {
state._masterCellNodes = Array.from(fieldTemplate.content.childNodes).map(n => n.cloneNode(true));
}
// 2. Transform the field template into a static flattened block
fieldTemplate.removeAttribute('$each');
fieldTemplate.removeAttribute('as');
fieldTemplate.removeAttribute('index');
fieldTemplate.setAttribute('$if', 'true'); // High-speed safe released block
fieldTemplate.content.textContent = ''; // Idiomatic way to clear document fragment
// 3. Inject flattened columns with position markers
state.fields.forEach((f, fIdx) => {
state._masterCellNodes.forEach(master => {
const clone = master.cloneNode(true);
if (clone.nodeType === 1) clone.dataset.fidx = fIdx;
fieldTemplate.content.appendChild(clone);
});
});
}
}
}
if (!state._internalUpdate) state._originalList = [...(list || [])];
scroll.init();
scroll.reset(list);
})
state.__watch('fields', fields => {
if (!fields) return
const gridTemplate = fields.map(f => `var(--w-${f.id}, ${f.width || 150}px)`).join(' ')
container.style.setProperty('--dt-grid-template', gridTemplate)
})
// --- Editing Logic (Manual Control, Permanent DOM) ---
let currentEditingNode = null;
container.editCell = (row, field, cellNode) => {
const overlay = container.querySelector('.dt-editor-overlay');
const editor = overlay.querySelector('AutoForm');
const rect = cellNode.getBoundingClientRect();
const rootRect = container.getBoundingClientRect();
currentEditingNode = cellNode;
// 1. Precise Positioning with expansion and Z-index
let minW = rect.width;
if (field.type === 'textarea' || field.type === 'TagsInput') minW = Math.max(rect.width, 300);
else if (field.type === 'radio') minW = Math.max(rect.width, 240);
overlay.style.display = 'flex';
overlay.style.left = (rect.left - rootRect.left) + 'px';
overlay.style.top = (rect.top - rootRect.top) + 'px';
overlay.style.width = minW + 'px';
// Reset styles to prevent crosstalk from previous editor types
overlay.style.height = '';
overlay.style.minHeight = '';
overlay.style.alignItems = 'center';
if (field.type === 'textarea' || field.type === 'TagsInput') {
overlay.style.minHeight = (field.type === 'textarea' ? 150 : rect.height) + 'px';
overlay.style.height = 'auto';
overlay.style.alignItems = 'flex-start';
} else {
overlay.style.height = (rect.height) + 'px';
}
// 2. Direct Driver: Switch context
// Use global State for both schema and data to ensure atomic updates
overlay.style.height = (field.type === 'textarea' || field.type === 'TagsInput' ? 'auto' : rect.height + 'px');
State.editingSchema = [{ ...field, name: field.id, label: '' }];
State.editingData = row;
RefreshState(overlay);
// 3. Focus
setTimeout(() => {
const input = editor.querySelector('.form-control, .form-select, .form-check-input, input');
if (input) input.focus();
@ -161,51 +293,27 @@ Component.register('DataTable', container => {
container.hideEditor = (save = true) => {
if (!_editorOverlay) _editorOverlay = container.querySelector('.dt-editor-overlay');
if (!_editorOverlay || _editorOverlay.style.display === 'none') return;
_editorOverlay.style.display = 'none';
if (save && currentEditingNode) {
RefreshState(currentEditingNode);
}
State.editingSchema = null;
State.editingData = null;
currentEditingNode = null;
if (save && currentEditingNode) RefreshState(currentEditingNode);
State.editingSchema = State.editingData = currentEditingNode = null;
container.focus();
};
// --- Shared Logic ---
container.startSelect = selection.startSelect;
container.updateSelect = selection.updateSelect;
container.deleteSelected = selection.deleteSelected;
container.addEventListener('keydown', e => {
if (e.ctrlKey || e.metaKey) {
const k = e.key.toLowerCase();
if (k === 'c') {
e.preventDefault();
selection.copy();
}
if (k === 'v') {
e.preventDefault();
selection.paste();
}
}
if (e.key === 'Escape') container.hideEditor(false);
});
const onGlobalMouseDown = e => {
const overlay = container.querySelector('.dt-editor-overlay');
if (overlay && overlay.style.display !== 'none' && !overlay.contains(e.target)) {
container.hideEditor(true);
}
if (overlay && overlay.style.display !== 'none' && !overlay.contains(e.target)) container.hideEditor(true);
if (!container.contains(e.target) && !overlay?.contains(e.target)) selection.clearAllActive();
}
window.addEventListener('mouseup', selection.endSelect);
document.addEventListener('mousedown', onGlobalMouseDown);
container._onUnload = () => {
document.removeEventListener('mousedown', onGlobalMouseDown)
window.removeEventListener('mouseup', selection.endSelect)
document.removeEventListener('mousedown', onGlobalMouseDown);
window.removeEventListener('mouseup', selection.endSelect);
}
}, Util.makeDom(/*html*/`
@ -217,35 +325,70 @@ Component.register('DataTable', container => {
style="overflow-anchor:none; min-height: 0">
<div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">
<div class="dt-row dt-header-row fw-bold text-muted small">
<div $each="this.state?.fields || []" class="dt-cell border-end px-2 d-flex align-items-center">
<span $text="item.name" class="text-truncate"></span>
</div>
<template $each="this.state?.fields || []">
<div $data-id="item.id" class="dt-cell border-end px-2 d-flex align-items-center justify-content-between header-cell">
<div class="d-flex align-items-center overflow-hidden">
<i $if="this.state?.sortConfig?.fieldId === item.id"
$class="'bi bi-sort-' + (this.state?.sortConfig?.direction === 'asc' ? 'down' : 'up-alt') + ' me-1 text-primary'"></i>
<i $if="this.state?.filterConfig?.[item.id]" class="bi bi-filter me-1 text-primary"></i>
<span $text="item.name" class="text-truncate"></span>
</div>
<button class="btn btn-xs btn-link text-muted p-0 border-0 header-menu-btn" $onclick="this.showColumnMenu(item, event)">
<i class="bi bi-chevron-down"></i>
</button>
</div>
</template>
</div>
</div>
<div class="dt-body" style="position:relative">
<div class="dt-spacer-prev flex-shrink-0" style="display:none"></div>
<div $each="this.state?._renderedList || []" key="id" index="rIdx" class="dt-row dt-body-row border-bottom bg-white">
<div $each="this.state?.fields || []" as="f" index="fIdx" class="dt-cell border-end px-2 d-flex align-items-center">
<span $text="this.format(item[f.id], f)" class="text-truncate"></span>
<template $each="this.state?._renderedList || []" key="id" index="rIdx">
<div class="dt-row dt-body-row border-bottom bg-white" $.="this._initRow(thisNode)">
<template $each="this.state?.fields || []" as="f" index="fIdx">
<div class="dt-cell border-end px-2 d-flex align-items-center">
<span $text="!f.formatter ? item[f.id] : this.format(item[f.id], f)" class="text-truncate"></span>
</div>
</template>
</div>
</div>
</template>
<div class="dt-spacer-post flex-shrink-0" style="display:none"></div>
</div>
</div>
<!-- Shared Editor Overlay -->
<div class="dt-editor-overlay" style="display: none" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()">
<div class="dt-column-menu border bg-body shadow-sm rounded" style="display:none; position:absolute; z-index:2000; min-width:180px" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()">
<div class="list-group list-group-flush">
<button class="list-group-item list-group-item-action py-2 d-flex align-items-center" $onclick="this.setSort('asc')">
<i class="bi bi-sort-alpha-down me-2"></i> Sort Ascending
</button>
<button class="list-group-item list-group-item-action py-2 d-flex align-items-center" $onclick="this.setSort('desc')">
<i class="bi bi-sort-alpha-up-alt me-2"></i> Sort Descending
</button>
<div class="p-2 border-top bg-light-subtle">
<div class="d-flex align-items-center mb-1 text-muted fw-bold" style="font-size: 10px">
<i class="bi bi-filter me-1"></i> LOCAL FILTER
</div>
<input type="text" class="form-control form-control-sm" placeholder="Search..."
$bind="this.state.filterConfig[this.state.activeFieldId]"
$onkeydown="if(event.key === 'Enter') this.applySortFilter()">
</div>
<button class="list-group-item list-group-item-action py-2 text-danger d-flex align-items-center border-top" $onclick="this.clearColumnSettings()">
<i class="bi bi-x-circle me-2"></i> Clear Settings
</button>
</div>
</div>
<div class="dt-editor-overlay dt-editor-container" style="display: none" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()">
<AutoForm inline class="h-100 w-100" $onsubmit="thisNode.closest('DataTable').hideEditor(true)"/>
</div>
<div class="dt-footer border-top bg-light d-flex align-items-center px-2 py-1 small text-muted" style="height:32px">
<div class="flex-grow-1">
Total: <span $text="this.state?.list?.length || 0"></span> |
Selected Rows: <span $text="this.state?.selectedRowCount || 0"></span>
<div class="d-flex align-items-center gap-2">
<span $text="(this.state?.selectedRowCount || 0) + ' / ' + (this.state?.list?.length || 0)"></span>
<button class="btn btn-xs btn-link text-danger p-0 border-0" title="Delete Selected"
$if="this.state?.selectedRowCount" $onclick="this.deleteSelected()">
<i class="bi bi-trash"></i>
</button>
</div>
<button class="btn btn-xs btn-outline-danger py-0 px-2" style="font-size: 11px" $disabled="!this.state?.selectedRowCount" $onclick="this.deleteSelected()">
<i class="bi bi-trash me-1"></i>Delete Selected
</button>
</div>
</div>
`), Util.makeDom(/*html*/`
@ -255,57 +398,27 @@ Component.register('DataTable', container => {
.dt-row {
display: grid;
grid-template-columns: var(--dt-grid-template);
width: max-content;
width: var(--dt-row-width, max-content);
min-width: 100%;
height: 40px;
contain: paint layout;
}
.dt-header-row {
background-color: var(--bs-tertiary-bg);
}
.dt-cell {
background: inherit;
white-space: nowrap;
flex-shrink: 0;
}
.dt-body-row:hover {
background-color: var(--bs-secondary-bg) !important;
}
.dt-cell-selected {
background-color: var(--bs-primary-bg-subtle) !important;
}
.dt-header-row { background-color: var(--bs-tertiary-bg); }
.dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
.dt-body-row:hover { background-color: var(--bs-secondary-bg) !important; }
.dt-cell-selected { background-color: var(--bs-primary-bg-subtle) !important; }
.header-cell .header-menu-btn { opacity: 0; transition: opacity 0.2s; }
.header-cell:hover .header-menu-btn { opacity: 1; }
.dt-column-menu { box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; }
.dt-column-menu .list-group-item { border: none; cursor: pointer; }
.dt-column-menu .list-group-item:hover { background-color: var(--bs-light); }
.dt-editor-overlay {
position: absolute;
z-index: 1000;
background: var(--bs-body-bg);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
border: 1px solid var(--bs-primary);
align-items: center;
overflow: visible;
transition: top 0.1s ease, left 0.1s ease, width 0.1s ease, height 0.1s ease, min-height 0.1s ease;
}
.dt-editor-overlay .auto-form-root, .dt-editor-overlay form {
height: 100%;
width: 100%;
}
.dt-editor-overlay .form-control, .dt-editor-overlay .form-select {
border: none !important;
border-radius: 0 !important;
height: 100% !important;
width: 100% !important;
box-shadow: none !important;
padding: 0 8px !important;
}
.dt-editor-overlay .form-check.form-switch {
padding-left: 2.5em;
margin: 0;
height: 100%;
display: flex;
align-items: center;
}
.btn-xs {
padding: 1px 5px;
line-height: 1.5;
position: absolute; z-index: 1000; background: var(--bs-body-bg);
box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 1px solid var(--bs-primary);
align-items: center; overflow: visible;
}
.dt-editor-overlay .form-control { border: none !important; border-radius: 0 !important; height: 100% !important; padding: 0 8px !important; }
.btn-xs { padding: 1px 5px; line-height: 1.5; }
</style>
`))

15
src/scroll.js
View File

@ -4,12 +4,13 @@ export const createScrollManager = (container, state, onRenderedListChange) => {
const vs = VirtualScroll({ itemHeight: 40 });
let scrollEl = null;
const refresh = () => {
const refresh = (isLayoutChange = false) => {
if (!scrollEl) return;
const res = vs.calc(scrollEl, state.list);
if (res) {
// Dirty check: Abort if layout boundaries haven't actually changed
if (state.prevHeight === res.prevHeight &&
if (!isLayoutChange &&
state.prevHeight === res.prevHeight &&
state.postHeight === res.postHeight &&
state._listStartIndex === res.listStartIndex &&
state._renderedList.length === res.renderedList.length) {
@ -22,7 +23,7 @@ export const createScrollManager = (container, state, onRenderedListChange) => {
_listStartIndex: res.listStartIndex,
_renderedList: res.renderedList
});
onRenderedListChange?.(res.renderedList.length);
onRenderedListChange?.(res.renderedList.length, isLayoutChange);
}
};
@ -32,12 +33,14 @@ export const createScrollManager = (container, state, onRenderedListChange) => {
},
reset: (list) => {
state._listStartIndex = 0;
state._renderedList = vs.reset(list, scrollEl || container) || [];
// Optimization: Don't update _renderedList here.
// vs.init will trigger refresh(true) which does it properly once.
vs.reset(list, scrollEl || container);
if (state.list === list) {
vs.init(list, refresh);
vs.init(list, () => refresh(true));
}
},
refresh,
onScroll: refresh
onScroll: () => refresh(false)
};
};

31
src/selection.js
View File

@ -11,6 +11,9 @@ export const createSelectionManager = (container, state) => {
let lastHadSelection = false;
const applySelectionUI = () => {
/* DEBUG: Performance Isolation Toggle */
if (window.__DT_FEATURES__ && !window.__DT_FEATURES__.selection) return;
let boundMinRow = Infinity, boundMaxRow = -Infinity;
if (activeBounds) {
boundMinRow = Math.min(boundMinRow, activeBounds.minRow);
@ -22,41 +25,35 @@ export const createSelectionManager = (container, state) => {
});
const hasSelection = boundMinRow !== Infinity;
// Fast path: If no current selection AND last frame also had no selection, skip EVERYTHING.
if (!hasSelection && !lastHadSelection) return;
lastHadSelection = hasSelection;
const body = container.querySelector('.dt-body');
if (!body) return;
const rowNodes = body.children;
// Fast path for scroll performance: Only iterate if selection overlaps or we need to clear
for (let r = 0; r < rowNodes.length; r++) {
const rowNode = rowNodes[r];
// Fast path: Use children instead of querySelectorAll
const nodes = body.children;
for (let r = 0; r < nodes.length; r++) {
const rowNode = nodes[r];
if (!rowNode.classList.contains('dt-body-row')) continue;
const absoluteRow = (rowNode._ref?.rIdx ?? -1) + state._listStartIndex;
const cellNodes = rowNode.children;
// Fast path: Row completely outside selection
if (!hasSelection || absoluteRow < boundMinRow || absoluteRow > boundMaxRow) {
// Clear all cells in row without checking individually if possible
const cellNodes = rowNode.children;
for (let i = 0; i < cellNodes.length; i++) {
if (cellNodes[i].classList.contains('dt-cell-selected')) {
cellNodes[i].classList.remove('dt-cell-selected');
}
cellNodes[i].classList.remove('dt-cell-selected');
}
continue;
}
const cellNodes = rowNode.children;
for (let i = 0; i < cellNodes.length; i++) {
const isSelected = isCellSelected(absoluteRow, i);
const hasClass = cellNodes[i].classList.contains('dt-cell-selected');
if (isSelected && !hasClass) {
cellNodes[i].classList.add('dt-cell-selected');
} else if (!isSelected && hasClass) {
cellNodes[i].classList.remove('dt-cell-selected');
}
const cell = cellNodes[i];
if (isSelected) cell.classList.add('dt-cell-selected');
else cell.classList.remove('dt-cell-selected');
}
}
};

1
test/index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTable Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; }