@nanoporetech-digital/components 3.7.1 → 3.8.1

package/dist/components/table.js

@@ -207,9 +207,10 @@ function storeSetData(host, rows) {
     }
     // convert date columns into numbers to send to our worker
     dateCols.forEach((colName) => {
+      var _a;
       // coerce any date type;
       // Date(), timestamp, valid date string
-      const coerceDate = new Date(row[colName]) ?? null;
+      const coerceDate = (_a = new Date(row[colName])) !== null && _a !== void 0 ? _a : null;
       if (!!coerceDate && Number(coerceDate))
         row[colName] = Number(coerceDate);
     });
@@ -274,7 +275,7 @@ function colDataModel(rowIndex, colIndex) {
   const columns = store.config.state.columns;
   const rows = store.data.state.rows;
   const column = columns[colIndex];
-  const prop = column?.prop;
+  const prop = column === null || column === void 0 ? void 0 : column.prop;
   const rowModel = rows[rowIndex];
   const cellModel = rowModel ? rowModel[columns[colIndex].prop] : '';
   return {
@@ -309,12 +310,12 @@ function mergeProperties(current, extra) {
   if (!extra)
     return current;
   // top level merge
-  const props = { ...extra, ...current };
+  const props = Object.assign(Object.assign({}, extra), current);
   // deeper merge
   // merge classes maps or strings
   if (extra.class) {
     if (typeof extra.class === 'object' && typeof props.class === 'object') {
-      props.class = { ...extra.class, ...props.class };
+      props.class = Object.assign(Object.assign({}, extra.class), props.class);
     }
     else if (typeof extra.class === 'string' &&
       typeof props.class === 'object') {
@@ -326,7 +327,7 @@ function mergeProperties(current, extra) {
   }
   // merge style
   if (extra.style) {
-    props.style = { ...extra.style, ...props.style };
+    props.style = Object.assign(Object.assign({}, extra.style), props.style);
   }
   return props;
 }
@@ -346,8 +347,9 @@ function fetchStores() {
  * @returns - the merged properties that will be applied to a node
  */
 function mergeCellProperties(rowIndex, colIndex, defaultProps) {
-  const props = { ...defaultProps };
-  const extraPropsFunc = fetchStores().config.state.columns[colIndex]?.cellProperties;
+  var _a;
+  const props = Object.assign({}, defaultProps);
+  const extraPropsFunc = (_a = fetchStores().config.state.columns[colIndex]) === null || _a === void 0 ? void 0 : _a.cellProperties;
   if (!extraPropsFunc)
     return props;
   const data = colDataModel(rowIndex, colIndex);
@@ -362,7 +364,7 @@ function mergeCellProperties(rowIndex, colIndex, defaultProps) {
  * @returns - a JSX node
  */
 function colheadFootRender(col) {
-  const tpl = col?.columnTemplate;
+  const tpl = col === null || col === void 0 ? void 0 : col.columnTemplate;
   return tpl ? (tpl(h, col)) : (h(Fragment, null, col.title));
 }
 const stickyHIOs = new WeakMap();
@@ -462,31 +464,6 @@ function classListToStr(classes) {
   });
   return classString;
 }
-/**
- * Detects the current scroll speed as a number.
- * Use within a scroll listener
- */
-const detectScrollSpeed = (() => {
-  let lastPos;
-  let newPos;
-  let timer;
-  let delta;
-  const delay = 60; // in "ms" (higher means lower fidelity )
-  const clear = () => {
-    lastPos = null;
-    delta = 0;
-  };
-  clear();
-  return () => {
-    newPos = window.scrollY;
-    if (lastPos != null)
-      delta = newPos - lastPos;
-    lastPos = newPos;
-    window.clearTimeout(timer);
-    timer = window.setTimeout(clear, delay);
-    return delta;
-  };
-})();
 /**
  * Attempts to find the closes scrolling parental element
  * @param element - the element from which to traverse up the DOM
@@ -641,13 +618,7 @@ const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned,
     extraProps = column.columnProperties(column) || extraProps;
   }
   const baseProps = {
-    class: {
-      ...headerPinClasses('th', headRenderer?.pinned),
-      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
-      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
-      [`${CSSNAMESPACE}__ordered`]: !!column.order,
-      [`${CSSNAMESPACE}__filtered`]: !!column.filter,
-    },
+    class: Object.assign(Object.assign({}, headerPinClasses('th', headRenderer === null || headRenderer === void 0 ? void 0 : headRenderer.pinned)), { [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start', [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end', [`${CSSNAMESPACE}__ordered`]: !!column.order, [`${CSSNAMESPACE}__filtered`]: !!column.filter }),
   };
   let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
   const content = colheadFootRender(column);
@@ -655,31 +626,24 @@ const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned,
     return h(Fragment, null);
   props =
     Number(props.colSpan) > 1
-      ? { ...props, scope: 'colgroup' }
-      : { ...props, scope: 'col' };
+      ? Object.assign(Object.assign({}, props), { scope: 'colgroup' }) : Object.assign(Object.assign({}, props), { scope: 'col' });
   if (isSortable()) {
     const sort = column.order
       ? column.order === 'asc'
         ? 'ascending'
         : 'descending'
       : 'none';
-    props = { ...props, 'aria-sort': sort };
+    props = Object.assign(Object.assign({}, props), { 'aria-sort': sort });
   }
   if (isDraggable()) {
-    props = {
-      ...props,
-      draggable: true,
-      onDragStart: (e) => handleDragStart(e, column),
-      onDragOver: (e) => e.preventDefault(),
-      onDragEnd: () => handleDragEnd(),
-    };
+    props = Object.assign(Object.assign({}, props), { draggable: true, onDragStart: (e) => handleDragStart(e, column), onDragOver: (e) => e.preventDefault(), onDragEnd: () => handleDragEnd() });
   }
-  return (h("th", { ...props, ref: (th) => {
+  return (h("th", Object.assign({}, props, { ref: (th) => {
       if (['end', 'start'].includes(column.pinned))
         addHObserver(th, column.pinned, onColumnPinned);
       if (['top', 'bottom'].includes(headRenderer.pinned))
         addVObserver(th, headRenderer.pinned, onColumnPinned);
-    }, key: column.prop },
+    }, key: column.prop }),
     isDraggable() && [
       h("div", { class: {
           [`${CSSNAMESPACE}__drag-mask`]: true,
@@ -713,9 +677,10 @@ const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned,
  * @returns - a JSX node
  */
 function cellRender(rowIndex, colIndex) {
+  var _a, _b;
   const store = fetchStores();
   const columns = store.config.state.columns;
-  const tpl = columns[colIndex]?.cellTemplate;
+  const tpl = (_a = columns[colIndex]) === null || _a === void 0 ? void 0 : _a.cellTemplate;
   const model = colDataModel(rowIndex, colIndex);
   if (!!model.cellModel && columns[colIndex].type === 'date') {
     const d = new Date(model.cellModel);
@@ -725,7 +690,7 @@ function cellRender(rowIndex, colIndex) {
         : d;
     }
   }
-  return tpl ? (tpl(h, model)) : model.cellModel ? (h(Fragment, null, model.cellModel?.toString())) : ('');
+  return tpl ? (tpl(h, model)) : model.cellModel ? (h(Fragment, null, (_b = model.cellModel) === null || _b === void 0 ? void 0 : _b.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
   const store = fetchStores();
@@ -754,20 +719,19 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
   if (column.rowHeader) {
     props =
       Number(props.rowSpan) > 1
-        ? { ...props, scope: 'rowgroup' }
-        : { ...props, scope: 'row' };
+        ? Object.assign(Object.assign({}, props), { scope: 'rowgroup' }) : Object.assign(Object.assign({}, props), { scope: 'row' });
     CellType = 'th';
   }
-  const ContentWrap = (props) => (h("div", { ...props, class: {
+  const ContentWrap = (props) => (h("div", Object.assign({}, props, { class: {
       [`${CSSNAMESPACE}__cell-content`]: true,
       [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
-    } },
+    } }),
     h(Content, null)));
   return (h(CellType
   // role="gridcell"
-  , { ...props }, column.autoTooltip && !column.wrap ? (h("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+  , Object.assign({}, props), column.autoTooltip && !column.wrap ? (h("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
       e.detail.x) },
-    h("nano-tooltip", { disabled: true, hoist: true },
+    h("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
       h(ContentWrap, null),
       h("span", { slot: "content" },
         h(Content, null))))) : (h(ContentWrap, null))));
@@ -786,20 +750,20 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children,
     const model = rowDataModel(rowIndex);
     rowModel = model.rowModel;
   }
-  if (rowRenderer?.rowProperties) {
+  if (rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.rowProperties) {
     extraProps =
       rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
   }
   let pinned;
-  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
+  if ((rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.pinned) && typeof rowRenderer.pinned === 'function') {
     pinned = rowRenderer.pinned();
   }
   const baseProps = { class: headerPinClasses('tr', pinned) };
   const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  const tpl = rowRenderer?.template;
+  const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
   if (tpl) {
     let toRender = tpl(h, {
-      renderedRow: (h("tr", { ...props, key: rowModel.__uuid }, children)),
+      renderedRow: (h("tr", Object.assign({}, props, { key: rowModel.__uuid }), children)),
       rowModel,
       rowIndex,
     }, TableCell);
@@ -833,7 +797,7 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children,
     }
     return toRender;
   }
-  return (h("tr", { ...props, key: rowModel.__uuid }, children));
+  return (h("tr", Object.assign({}, props, { key: rowModel.__uuid }), children));
 };
 const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
   let extraProps = {};
@@ -850,10 +814,10 @@ const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
   const pinned = rowRenderer.pinned || null;
   const baseProps = { class: headerPinClasses('tr', null) };
   const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  const tpl = rowRenderer?.template;
+  const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
   if (tpl) {
     let toRender = tpl(h, {
-      renderedRow: h("tr", { ...props }, children),
+      renderedRow: h("tr", Object.assign({}, props), children),
     }, TableCell);
     if (Array.isArray(toRender)) {
       toRender = utils.map(toRender, (node) => {
@@ -883,22 +847,22 @@ const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
     }
     return toRender;
   }
-  return h("tr", { ...props }, children);
+  return h("tr", Object.assign({}, props), children);
 };
 
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;width:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250, 250, 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.5rem;--td-padding-bottom:0.4125rem;--th-padding-start:0.625rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__drag-mask{display:none;position:absolute;inset-block:-2px -2px;z-index:10;opacity:0;transition:0.2s ease opacity}.nano-tbl__drag-mask--start{width:calc(50% + 2px);inset-inline-start:-2px;border-inline-start:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--end{width:50%;inset-inline-end:0;border-inline-end:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--active{opacity:1}.nano-tbl__dragging .nano-tbl__drag-mask{display:block}.nano-tbl__drag--start{opacity:0.4}.nano-tbl__dragging .nano-tbl__td,.nano-tbl__dragging .nano-tbl__th{cursor:no-drop}.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content{pointer-events:none}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;scale:0;width:100%;height:0}.nano-tbl__progress-bar--show{scale:1;height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgba(var(--head-bg-rgb), 90%);font-size:var(--thead-font-size);border-block-start:none !important;transition:all 0.2s ease}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgba(var(--foot-bg-rgb), 90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgba(var(--ordered-bg-rgb), 0.8) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity;transform:translateZ(0)}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin{position:sticky}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s ease}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2;max-width:125px !important}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width) !important}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline:auto -1px !important;max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4 !important}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5 !important}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6 !important}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6 !important}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
+const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;width:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250, 250, 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.5rem;--td-padding-bottom:0.4125rem;--th-padding-start:0.625rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__drag-mask{display:none;position:absolute;inset-block:-2px -2px;z-index:10;opacity:0;transition:0.2s ease opacity}.nano-tbl__drag-mask--start{width:calc(50% + 2px);inset-inline-start:-2px;-webkit-border-start:2px dashed var(--border-tint-color);border-inline-start:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--end{width:50%;inset-inline-end:0;-webkit-border-end:2px dashed var(--border-tint-color);border-inline-end:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--active{opacity:1}.nano-tbl__dragging .nano-tbl__drag-mask{display:block}.nano-tbl__drag--start{opacity:0.4}.nano-tbl__dragging .nano-tbl__td,.nano-tbl__dragging .nano-tbl__th{cursor:no-drop}.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content{pointer-events:none}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);width:100%;height:0}.nano-tbl__progress-bar--show{transform:scale(1);height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;-webkit-border-before:var(--border-style);border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{-webkit-border-before:none;border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{-webkit-border-after:var(--border-style);border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--bookend-col-padding);padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--bookend-col-padding);padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--td-padding-start) !important;padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--td-padding-end) !important;padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/90%);font-size:var(--thead-font-size);-webkit-border-before:none !important;border-block-start:none !important;transition:all 0.2s ease}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;-webkit-border-before:none;border-block-start:none;background:rgb(var(--foot-bg-rgb)/90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity;transform:translateZ(0)}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin{position:sticky;transform:translateZ(0)}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s ease}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2;max-width:125px !important}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width) !important}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline:auto -1px !important;max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4 !important}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5 !important}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6 !important}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6 !important}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{-webkit-border-before:none;border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{-webkit-border-before:var(--border-tint-style) !important;border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{-webkit-border-after:none !important;border-block-end:none !important}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
 
 function perMark(name, end = false) {
   if (!Build.isDev || Build.isTesting || !performance)
     return;
   if (end) {
-    performance?.mark('end' + name);
-    performance?.measure(name, 'start' + name, 'end' + name);
-    const entries = performance?.getEntriesByName(name);
+    performance === null || performance === void 0 ? void 0 : performance.mark('end' + name);
+    performance === null || performance === void 0 ? void 0 : performance.measure(name, 'start' + name, 'end' + name);
+    const entries = performance === null || performance === void 0 ? void 0 : performance.getEntriesByName(name);
     console.log(entries[entries.length ? entries.length - 1 : 0]);
   }
   else {
-    performance?.mark('start' + name);
+    performance === null || performance === void 0 ? void 0 : performance.mark('start' + name);
   }
 }
 let id = 0;
@@ -921,12 +885,10 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.filters = [];
     this.currentFilters = '[]';
     this.currentSort = '';
+    this.cacheScrollPosition = 0;
     this.measureHeight = 0;
-    this.blockIos = new WeakMap();
     this.blockHeights = [];
     this.unitHeight = 0;
-    // Scroll / IO used for hiding / showing blocks
-    this.ignoreIO = true;
     this._isReady = false;
     /**
      * Fired when a column is dragged
@@ -1006,52 +968,30 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           this._loading = false;
       }
     };
-    /**
-     * Attaches an intersection observer to each rendered tbody element
-     * shows / hides intersecting blocks' and sets heights for when they're hidden
-     * @param el - the tbody element to observe
-     * @param blockIndex - the rendering tbody we're attaching the IO to
-     */
-    this.setupBlockIO = (el, blockIndex) => {
-      if (!el || this.blockIos.has(el))
-        return;
-      const blockIo = new IntersectionObserver(([ioEntry]) => {
-        if (ioEntry.intersectionRatio === 0)
-          return;
-        // This is a bit gross
-        // The Intersection Observer (IO) fires in an incorrect order when the scrolling is very fast
-        // i.e. we go past blocks 3, 2, 1 and land on 0, but 3 can fire as 'intersecting' after 0.
-        // To fix that, we check - for realzies - if the block IS visible.
-        // BUT that test is not as sensitive to a block being visible via the IO,
-        // so doesn't always fire if scrolling slowly
-        // *sigh*
-        readTask(() => {
-          if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
-            if (!this.ignoreIO) {
-              const potentialBlocks = [
-                blockIndex,
-                blockIndex + 1,
-                Math.max(0, blockIndex - 1),
-              ];
-              if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
-                this.debouncedBlockChange(potentialBlocks);
-              }
+    this.scrollHandler = () => {
+      this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
+      requestAnimationFrame(() => {
+        let cumulativeHeight = 0;
+        let blockIndex = 0;
+        const blockLen = this.blocks.length;
+        while (blockIndex < blockLen &&
+          this.cacheScrollPosition >= cumulativeHeight) {
+          cumulativeHeight += this.getBlockHeight(blockIndex);
+          if (this.cacheScrollPosition < cumulativeHeight) {
+            const potentialBlocks = [
+              blockIndex,
+              blockIndex + 1,
+              Math.max(0, blockIndex - 1),
+            ];
+            if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
+              this.activeBlocks = potentialBlocks;
+              this.setBlockHeight();
             }
-            // fire the event regardless
-            this.nanoTblBlockRendered.emit({
-              block: blockIndex,
-              totalBlocks: this.blockElements.length,
-            });
+            this.primaryBlockIndex = blockIndex;
           }
-        });
-      }, {
-        threshold: [0],
-        root: this.scrollParent === document.scrollingElement
-          ? null
-          : this.scrollParent,
+          blockIndex++;
+        }
       });
-      blockIo.observe(el);
-      this.blockIos.set(el, blockIo);
     };
     this.handleColumnPinned = (positions) => {
       Object.entries(positions).forEach(([key, applied]) => {
@@ -1059,8 +999,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
     };
     this.handleResizeChange = (e) => {
+      var _a;
       this.tableWrapperEle.className = '';
-      this.tableWrapperEle.classList.add(...(e.target.className + ' ' + `${CSSNAMESPACE}__wrap`).split(' '));
+      let classes = [`${CSSNAMESPACE}__wrap`];
+      if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.className)
+        classes = [...e.target.className.split(' '), ...classes];
+      this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
     };
     this.type = 'table';
     this.caption = undefined;
@@ -1074,7 +1018,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.rowRender = undefined;
     this.footRender = { pinned: 'bottom' };
     this.showFooter = false;
-    this.perBlock = 60;
+    this.perBlock = 40;
     this.searchTerm = undefined;
     this.customFilterFn = undefined;
     this.customSortFn = undefined;
@@ -1084,7 +1028,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
     this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
-    this.debouncedBlockChange = debounce(this.debouncedBlockChange.bind(this), 100);
   }
   get _loading() {
     return this.loading !== undefined ? this.loading : this.internalLoading;
@@ -1181,6 +1124,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
+    var _a;
     if (!el)
       return;
     const potentialHeight = el.getBoundingClientRect().height;
@@ -1189,7 +1133,35 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ? this.measureHeight
         : potentialHeight;
     this.unitHeight =
-      el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
+      ((_a = el.querySelector('tr')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || this.unitHeight;
+  }
+  get scrollParent() {
+    return this._scrollParent;
+  }
+  set scrollParent(ele) {
+    if (ele === this._scrollParent)
+      return;
+    if (this._scrollParent) {
+      (this._scrollParent === document.documentElement
+        ? document
+        : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
+    }
+    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
+    this._scrollParent = ele;
+  }
+  // used to fire `nanoTblBlockRendered` on block render change
+  get primaryBlockIndex() {
+    return this._primaryBlockIndex;
+  }
+  set primaryBlockIndex(blockIndex) {
+    if (this._primaryBlockIndex === blockIndex)
+      return;
+    this._primaryBlockIndex = blockIndex;
+    // fire block change event
+    this.nanoTblBlockRendered.emit({
+      block: blockIndex,
+      totalBlocks: this.blockElements.length,
+    });
   }
   // Misc.
   get isReady() {
@@ -1204,18 +1176,15 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   // Private Logic
   // Listeners
-  scrollListener() {
-    // see explanation in `setupBlockIO`
-    const speed = detectScrollSpeed();
-    this.scrollSpeed = speed < 0 ? speed * -1 : speed;
-  }
   handleReady() {
     const hash = window.location.hash;
     if (hash.length > 1) {
-      const idRow = document.querySelector(hash);
-      if (idRow) {
-        idRow.scrollIntoView();
+      try {
+        const idRow = document.querySelector(hash);
+        if (idRow)
+          idRow.scrollIntoView();
       }
+      catch (e) { }
     }
     this.nanoTblReady.emit();
   }
@@ -1227,8 +1196,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   sortComplete(order, column) {
     this.columns = this.columns.map((c) => {
       if (c.prop === column)
-        return { ...c, order };
-      return { ...c, order: null };
+        return Object.assign(Object.assign({}, c), { order });
+      return Object.assign(Object.assign({}, c), { order: null });
     });
     this.nanoTblAfterSort.emit({ column: column, order });
     perMark('sort', true);
@@ -1318,7 +1287,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /** Scrolls to the top immediately - used whilst sorting / filtering */
   scrollToTop(element) {
-    const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
+    var _a;
+    const scrollBehaviour = (_a = this.scrollParent.style) === null || _a === void 0 ? void 0 : _a.scrollBehavior;
     const scrollX = this.scrollParent.scrollLeft;
     this.scrollParent.style.scrollBehavior = 'auto';
     if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {
@@ -1330,10 +1300,11 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.scrollParent.scrollLeft = scrollX;
     if (scrollBehaviour)
       this.scrollParent.style.scrollBehavior = scrollBehaviour;
+    this.scrollHandler();
   }
   setMeasureElement() {
     readTask(() => {
-      this.measureEle = this.blockElements.find((b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`));
+      this.measureEle = this.blockElements.find((b) => { var _a; return !((_a = b === null || b === void 0 ? void 0 : b.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`)); });
     });
   }
   /**
@@ -1342,7 +1313,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * So we just estimate for now
    */
   setInitialBlockDimension() {
-    if (!this.blockElements?.length)
+    var _a;
+    if (!((_a = this.blockElements) === null || _a === void 0 ? void 0 : _a.length))
       return;
     perMark('blockDims');
     const finishResizing = new Promise((resolve) => {
@@ -1352,7 +1324,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         if (!this.measureEle && !this.unitHeight)
           resolve();
         this.blockElements.forEach((el, i) => {
-          if (!el || !el.classList?.contains(`${CSSNAMESPACE}__inactive`)) {
+          var _a;
+          if (!el || !((_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`))) {
             if (i === this.blockElements.length - 1)
               resolve();
             return;
@@ -1401,7 +1374,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
     perMark('setBlocks');
-    this.ignoreIO = true;
+    // this.ignoreIO = true;
     let i = 1;
     const l = this.virtualTotalItems > dRows.length
       ? this.virtualTotalItems
@@ -1435,18 +1408,16 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns a height string (incl px)
    */
   getBlockHeight(blockIndex) {
-    if (this.activeBlocks.includes(blockIndex))
-      return undefined;
     if (this.blockHeights.length) {
       const cachedBlockHeight = this.blockHeights.find((bh) => bh.blockIndex === blockIndex);
       if (cachedBlockHeight)
-        return cachedBlockHeight.height + 'px';
+        return cachedBlockHeight.height;
     }
     const blockLength = this.blocks[blockIndex].rows.length;
     if (blockLength === this.perBlock && this.measureHeight) {
-      return this.measureHeight + 'px';
+      return this.measureHeight;
     }
-    return this.unitHeight ? this.unitHeight * blockLength + 'px' : undefined;
+    return this.unitHeight ? this.unitHeight * blockLength : undefined;
   }
   /** cache the height for all active blocks for later renders */
   setBlockHeight() {
@@ -1467,10 +1438,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
     });
   }
-  debouncedBlockChange(newBlocks) {
-    this.activeBlocks = newBlocks;
-    this.setBlockHeight();
-  }
   /** Process slotted content */
   processSlots() {
     // see if we have slot content
@@ -1500,14 +1467,13 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // but we don't want it to cause renders
     if (['rows', 'columns'].includes(stateName))
       return false;
-    if (Build.isDev)
+    if (Build.isDev && !Build.isTesting)
       console.log(stateName, _newVal, _oldVal);
   }
   componentWillRender() {
     perMark('render');
   }
   componentDidRender() {
-    requestAnimationFrame(() => (this.ignoreIO = false));
     this.setMeasureElement();
     perMark('render', true);
   }
@@ -1526,7 +1492,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         } }),
     ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (h("tr", null, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
-        requestAnimationFrame(() => this.setupBlockIO(tb, blockIndex));
       }, class: {
         [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
         [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
@@ -1534,7 +1499,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
       return (h(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
     })) : (h("tr", null, h("td", { colSpan: this.store.config.state.columns.length, style: {
-        height: this.getBlockHeight(blockIndex),
+        height: this.getBlockHeight(blockIndex) + 'px',
       } })))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
@@ -1582,7 +1547,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "addFilters": [64],
     "removeFilters": [64],
     "updateRow": [64]
-  }, [[9, "scroll", "scrollListener"]]]);
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;