@nanoporetech-digital/components 3.5.0 → 3.6.0

package/dist/cjs/{nano-table-83e46f68.js → nano-table-b031ec24.js}

@@ -112,7 +112,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
   })
 );
 
-const workerPromise = Promise.resolve().then(function () { return require('./table.worker-525ec230.js'); }).then(m => m.worker);
+const workerPromise = Promise.resolve().then(function () { return require('./table.worker-dadd1eb0.js'); }).then(m => m.worker);
 const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
 const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
 const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
@@ -210,7 +210,7 @@ function storeSetData(host, rows) {
         row[colName] = Number(coerceDate);
     });
     row['__index'] = i;
-    row['__uuid'] = math.cyrb53(Object.values(row).join());
+    row['__uuid'] = math.cyrb53(cols.map((c) => row[c.prop]).join());
     return row;
   });
   store.data.state.rows = rows;
@@ -272,7 +272,7 @@ function colDataModel(rowIndex, colIndex) {
   const column = columns[colIndex];
   const prop = column?.prop;
   const rowModel = rows[rowIndex];
-  const cellModel = rowModel[columns[colIndex].prop];
+  const cellModel = rowModel ? rowModel[columns[colIndex].prop] : '';
   return {
     prop,
     cellModel,
@@ -289,9 +289,9 @@ function colDataModel(rowIndex, colIndex) {
 function rowDataModel(rowIndex) {
   const store = fetchStores();
   const rows = store.data.state.rows;
-  const row = rows[rowIndex];
+  const rowModel = rows[rowIndex];
   return {
-    row,
+    rowModel,
     rowIndex,
   };
 }
@@ -358,7 +358,7 @@ function mergeCellProperties(rowIndex, colIndex, defaultProps) {
  * @returns - a JSX node
  */
 function colheadFootRender(col) {
-  const tpl = col?.colTemplate;
+  const tpl = col?.columnTemplate;
   return tpl ? (tpl(index.h, col)) : (index.h(index.Fragment, null, col.title));
 }
 const stickyHIOs = new WeakMap();
@@ -721,7 +721,7 @@ function cellRender(rowIndex, colIndex) {
         : d;
     }
   }
-  return tpl ? (tpl(index.h, model)) : (index.h(index.Fragment, null, model.cellModel?.toString()));
+  return tpl ? (tpl(index.h, model)) : model.cellModel ? (index.h(index.Fragment, null, model.cellModel?.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
   const store = fetchStores();
@@ -738,9 +738,9 @@ const baseCellClasses = (colIndex, toString = false) => {
   return classes;
 };
 const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
-  const content = nestedContent || cellRender(rowIndex, colIndex);
-  if (!content)
-    return index.h(index.Fragment, null);
+  const Content = () => nestedContent
+    ? nestedContent()
+    : cellRender(rowIndex, colIndex) || (index.h("span", { class: "placeholder" }, "\u00A0"));
   let CellType = 'td';
   const store = fetchStores();
   const column = store.config.state.columns[colIndex];
@@ -754,24 +754,37 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
         : { ...props, scope: 'row' };
     CellType = 'th';
   }
+  const ContentWrap = (props) => (index.h("div", { ...props, class: {
+      [`${CSSNAMESPACE}__cell-content`]: true,
+      [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
+    } },
+    index.h(Content, null)));
   return (index.h(CellType
   // role="gridcell"
-  , { ...props },
-    index.h("div", { class: `${CSSNAMESPACE}__cell-content` }, content)));
+  , { ...props }, column.autoTooltip && !column.wrap ? (index.h("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+      e.detail.x) },
+    index.h("nano-tooltip", { disabled: true, hoist: true },
+      index.h(ContentWrap, null),
+      index.h("span", { slot: "content" },
+        index.h(Content, null))))) : (index.h(ContentWrap, null))));
 };
 
-const TableRow = ({ rowRenderer, rowIndex, row, onColumnPinned }, children, utils) => {
+const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children, utils) => {
   let extraProps = {};
-  const TableCell = ({ header }, children) => {
-    const cell = index.h("div", { class: CSSNAMESPACE + '__cell-content' }, children);
+  const TableCell = ({ header, wrap }, children) => {
+    const cell = (index.h("div", { class: {
+        [`${CSSNAMESPACE}__cell-content`]: true,
+        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
+      } }, children));
     return header ? index.h("th", { scope: "row" }, cell) : index.h("td", null, cell);
   };
-  if (!row) {
+  if (!rowModel) {
     const model = rowDataModel(rowIndex);
-    row = model.row;
+    rowModel = model.rowModel;
   }
   if (rowRenderer?.rowProperties) {
-    extraProps = rowRenderer.rowProperties({ row, rowIndex }) || extraProps;
+    extraProps =
+      rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
   }
   let pinned;
   if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
@@ -782,15 +795,15 @@ const TableRow = ({ rowRenderer, rowIndex, row, onColumnPinned }, children, util
   const tpl = rowRenderer?.template;
   if (tpl) {
     let toRender = tpl(index.h, {
-      renderedRow: (index.h("tr", { ...props, key: row.__uuid }, children)),
-      row,
+      renderedRow: (index.h("tr", { ...props, key: rowModel.__uuid }, children)),
+      rowModel,
       rowIndex,
     }, TableCell);
     if (Array.isArray(toRender)) {
       toRender = utils.map(toRender, (node, i) => {
         if (node.vtag === 'tr') {
           if (!node.vkey)
-            node.vkey = `${row.__uuid}_${i}`;
+            node.vkey = `${rowModel.__uuid}_${i}`;
           node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
           if (!!node.vchildren) {
             node.vchildren = utils.map(node.vchildren, (cNode, i) => {
@@ -816,15 +829,18 @@ const TableRow = ({ rowRenderer, rowIndex, row, onColumnPinned }, children, util
     }
     return toRender;
   }
-  return (index.h("tr", { ...props, key: row.__uuid }, children));
+  return (index.h("tr", { ...props, key: rowModel.__uuid }, children));
 };
 const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
   let extraProps = {};
   if (rowRenderer.rowProperties) {
     extraProps = rowRenderer.rowProperties() || {};
   }
-  const TableCell = ({ header }, children) => {
-    const cell = index.h("div", { class: CSSNAMESPACE + '__cell-content' }, children);
+  const TableCell = ({ header, wrap }, children) => {
+    const cell = (index.h("div", { class: {
+        [`${CSSNAMESPACE}__cell-content`]: true,
+        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
+      } }, children));
     return header !== false ? index.h("th", { scope: "col" }, cell) : index.h("td", null, cell);
   };
   const pinned = rowRenderer.pinned || null;
@@ -866,14 +882,14 @@ const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
   return index.h("tr", { ...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, 30%, 20vw);--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 tbody{will-change:scroll-position;visibility:visible}.nano-tbl tbody.nano-tbl__inactive{visibility:hidden}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin{position:sticky;z-index:1}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s ease;z-index:2}.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{z-index:2;}.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{z-index:3}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto;z-index:3}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4 !important}.nano-tbl__pin--bottom{inset-block:auto -1px;z-index:3}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5 !important}.nano-tbl__pin--top.nano-tbl__pin--start{z-index:4}.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__pin--top.nano-tbl__pin--end{z-index:4}.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__pin--bottom.nano-tbl__pin--start{z-index:4}.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__pin--bottom.nano-tbl__pin--end{z-index:4}.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));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)}";
 
 let id = 0;
 const Table = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.nanoTblBlockRendered = index.createEvent(this, "nanoTblBlockRendered", 7);
     this.nanoTblReady = index.createEvent(this, "nanoTblReady", 7);
+    this.nanoTblBlockRendered = index.createEvent(this, "nanoTblBlockRendered", 7);
     this.nanoTblBeforeSort = index.createEvent(this, "nanoTblBeforeSort", 7);
     this.nanoTblAfterSort = index.createEvent(this, "nanoTblAfterSort", 7);
     this.nanoTblColDrag = index.createEvent(this, "nanoTblColDrag", 7);
@@ -882,22 +898,33 @@ const Table = class {
     this.nanoTblAfterFilter = index.createEvent(this, "nanoTblAfterFilter", 7);
     this.nanoTblBeforeSearch = index.createEvent(this, "nanoTblBeforeSearch", 7);
     this.nanoTblAfterSearch = index.createEvent(this, "nanoTblAfterSearch", 7);
+    this.nanoTblBeforeEdit = index.createEvent(this, "nanoTblBeforeEdit", 7);
     this.debounceSetLoading = (l) => {
-      this._loading = l;
+      this.internalLoading = l;
     };
     this.renderId = 'tbl-' + id++;
     this.filters = [];
     this.currentFilters = '[]';
     this.currentSort = '';
+    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
+     * @param column
+     */
     this.colDrag = (column) => {
       this.nanoTblColDrag.emit({ column });
     };
+    /**
+     * Fired when a column is dropped after being dragged
+     * @param fromCol
+     * @param toCol
+     */
     this.colDrop = (fromCol, toCol) => {
       const cols = this.store.config.state.columns;
       const toIndex = cols.findIndex((col) => col.prop === toCol);
@@ -910,7 +937,7 @@ const Table = class {
       });
       if (dropEvent.defaultPrevented)
         return;
-      this.store.config.state.columns = arrMove(fromIndex, toIndex, cols);
+      this.columns = arrMove(fromIndex, toIndex, cols);
     };
     /**
      * Start a sort - can be cancelled by `preventDefault`
@@ -922,7 +949,7 @@ const Table = class {
       // did order change?
       if (this.currentSort === order + ':' + column)
         return;
-      this.loading = true;
+      this._loading = true;
       const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
       if (sortEvent.defaultPrevented)
         return;
@@ -931,13 +958,24 @@ const Table = class {
       this.scrollToTop(element);
       if (this.customSortFn) {
         try {
-          await this.customSortFn(column, order);
-          this.sortComplete(order, column);
+          const res = await this.customSortFn(column, order);
+          // if the response is 'true', the custom sort did it's thing
+          // handover to finish and stop loading state.
+          // if response is falsey, carry on to do a FE sort
+          if (res === true) {
+            this.sortComplete(order, column);
+            this._loading = false;
+            return;
+          }
         }
         catch (e) {
+          // if response errored, stop loading state
+          // clear current sort cache
           console.warn('custom sort failed', e);
+          this.currentSort = '';
+          this._loading = false;
+          return;
         }
-        return;
       }
       try {
         await storeSort(this.host, column, order);
@@ -948,7 +986,8 @@ const Table = class {
         this.currentSort = '';
       }
       finally {
-        this.loading = false;
+        if (this.blocks.length)
+          this._loading = false;
       }
     };
     /**
@@ -961,31 +1000,35 @@ const Table = class {
       if (!el || this.blockIos.has(el))
         return;
       const blockIo = new IntersectionObserver(([ioEntry]) => {
-        if (this.ignoreIO)
+        if (ioEntry.intersectionRatio === 0)
           return;
-        if (ioEntry.isIntersecting) {
-          // 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*
-          index.readTask(() => {
-            if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
-              this.activeBlocks = [
+        // 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*
+        index.readTask(() => {
+          if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
+            if (!this.ignoreIO) {
+              const potentialBlocks = [
                 blockIndex,
                 blockIndex + 1,
                 Math.max(0, blockIndex - 1),
               ];
-              this.nanoTblBlockRendered.emit({
-                block: blockIndex,
-                totalBlocks: this.blockElements.length,
-              });
-              requestAnimationFrame(() => this.setBlockHeight());
+              if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
+                this.activeBlocks = potentialBlocks;
+                this.setBlockHeight();
+              }
             }
-          });
-        }
+            // fire the event regardless
+            this.nanoTblBlockRendered.emit({
+              block: blockIndex,
+              totalBlocks: this.blockElements.length,
+            });
+          }
+        });
       }, {
         threshold: [0],
         root: this.scrollParent === document.scrollingElement
@@ -1007,7 +1050,8 @@ const Table = class {
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
-    this._loading = false;
+    this.loading = undefined;
+    this.internalLoading = false;
     this.placeholderSize = 5;
     this.rows = undefined;
     this.columns = [];
@@ -1021,26 +1065,25 @@ const Table = class {
     this.customSortFn = undefined;
     this.defaultSort = true;
     this.defaultColDraggable = false;
+    this.virtualTotalItems = 0;
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
-    this.measureHeight = 0;
     this.debounceSetLoading = throttle.debounce(this.debounceSetLoading.bind(this), 50);
   }
-  /** Will show a loading state when true.
-   * Will be shown automatically if `rows` is a promise waiting to resolve
-   * or when performing custom filtering or sorting  */
-  get loading() {
-    return this._loading;
+  get _loading() {
+    return this.loading !== undefined ? this.loading : this.internalLoading;
   }
-  set loading(l) {
+  set _loading(l) {
+    if (this.loading !== undefined)
+      return;
     this.debounceSetLoading(l);
   }
   handleRowsChange() {
     if (!this.rows) {
-      this.loading = true;
+      this._loading = true;
       return;
     }
-    this.loading = true;
+    this._loading = true;
     Promise.resolve(this.rows).then(async (rows) => {
       await storeSetData(this.host, rows);
       // reset everything
@@ -1049,7 +1092,7 @@ const Table = class {
       await this.columnInit();
       if (!this.isReady)
         this.setInitialBlockDimension();
-      this.loading = false;
+      this._loading = false;
     });
   }
   async handleColsChange() {
@@ -1064,6 +1107,9 @@ const Table = class {
   handleSearchTermChange() {
     this.searchStart();
   }
+  virtualTotalItemsChangeHandler() {
+    this.setBlocks();
+  }
   /** Remove any column sorts currently applied
    * @returns a promise which resolves when complete */
   async resetSorting() {
@@ -1104,11 +1150,25 @@ const Table = class {
     this.filters = this.filters.filter((f) => !columnNames.includes(f.prop));
     return this.filterStart();
   }
+  /** Updates a row model at a given index
+   * @param row - the row to update.
+   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property
+   * - rows are augmented with certain properties to aid with efficient rendering
+   * @param rowIndex - the row index to insert this row
+   */
+  async updateRow(row, rowIndex) {
+    this.rows.splice(rowIndex, 1, row);
+    this.handleRowsChange();
+  }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
     if (!el)
       return;
-    this.measureHeight = el.getBoundingClientRect().height;
+    const potentialHeight = el.getBoundingClientRect().height;
+    this.measureHeight =
+      Math.abs(this.measureHeight - potentialHeight) < 5
+        ? this.measureHeight
+        : potentialHeight;
     this.unitHeight =
       el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
   }
@@ -1154,7 +1214,7 @@ const Table = class {
     this.nanoTblAfterSort.emit({ column: column, order });
   }
   async searchStart() {
-    this.loading = true;
+    this._loading = true;
     const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
     if (sortEvent.defaultPrevented)
       return;
@@ -1168,7 +1228,7 @@ const Table = class {
       console.warn('search failed', e);
     }
     finally {
-      this.loading = false;
+      this._loading = false;
     }
   }
   async filterStart(filters, additive = true) {
@@ -1185,7 +1245,7 @@ const Table = class {
     }
     if (this.currentFilters === JSON.stringify(this.filters))
       return;
-    this.loading = true;
+    this._loading = true;
     const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
     if (sortEvent.defaultPrevented)
       return;
@@ -1194,12 +1254,21 @@ const Table = class {
     this.scrollToTop();
     if (this.customFilterFn) {
       try {
-        await this.customFilterFn(this.filters);
-        this.filterComplete();
+        const res = await this.customFilterFn(this.filters);
+        // if the response is 'true', the custom filter did it's thing
+        // handover to finish and stop loading state.
+        // if response is falsey, carry on to do a FE filter
+        if (res === true) {
+          this.filterComplete();
+          this._loading = false;
+        }
       }
       catch (e) {
+        // if response errored, stop loading state
+        // clear current sort cache
         console.warn('custom filter failed', e);
         this.currentFilters = '';
+        this._loading = false;
       }
       return;
     }
@@ -1211,7 +1280,7 @@ const Table = class {
       console.warn('filter failed', e);
     }
     finally {
-      this.loading = false;
+      this._loading = false;
     }
   }
   filterComplete() {
@@ -1299,23 +1368,33 @@ const Table = class {
    * These can then be hidden / shown to improve performance.
    */
   setBlocks() {
-    this.activeBlocks = [0, 1, 2];
+    const dRows = this.store.data.state.rows;
+    if (!dRows.length) {
+      this.blocks = [];
+      return;
+    }
     this.ignoreIO = true;
     let i = 1;
-    const l = this.store.data.state.rows.length;
+    const l = this.virtualTotalItems > dRows.length
+      ? this.virtualTotalItems
+      : dRows.length;
     let rows = [];
     const blocks = [];
     this.blockHeights = [];
     // old skool loop for perf
     for (i; i <= l; i++) {
-      rows.push(this.store.data.state.rows[i - 1]);
+      rows.push(this.store.data.state.rows[i - 1] || { __uuid: '' });
       if (i % this.perBlock === 0) {
+        // assign a UUID for the whole block
+        // for block diffing
         blocks.push({ rows, __uuid: math.cyrb53(rows.map((b) => b.__uuid).join()) });
         rows = [];
       }
     }
-    if (rows.length)
+    // any leftover rows
+    if (rows.length) {
       blocks.push({ rows, __uuid: math.cyrb53(rows.map((b) => b.__uuid).join()) });
+    }
     this.blocks = blocks;
   }
   /**
@@ -1342,11 +1421,11 @@ const Table = class {
   }
   /** cache the height for all active blocks for later renders */
   setBlockHeight() {
-    index.readTask(() => {
-      this.activeBlocks.forEach((blockIndex) => {
-        const el = this.blockElements[blockIndex];
-        if (!el)
-          return;
+    this.activeBlocks.forEach((blockIndex) => {
+      const el = this.blockElements[blockIndex];
+      if (!el)
+        return;
+      index.readTask(() => {
         const height = el.getBoundingClientRect().height;
         // cache height to our block heights array
         // for subsequent renders
@@ -1407,15 +1486,15 @@ const Table = class {
           sortable: this.defaultSort,
           draggable: this.defaultColDraggable,
         } }),
-    ]))), this._loading && !this.blocks.length && (index.h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (index.h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (index.h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: index.h("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (index.h("tr", null, index.h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, index.h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, index.h("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (index.h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+    ]))), this._loading && !this.blocks.length && (index.h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (index.h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (index.h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => index.h("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (index.h("tr", null, index.h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, index.h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, index.h("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (index.h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
-        this.setupBlockIO(tb, blockIndex);
+        requestAnimationFrame(() => this.setupBlockIO(tb, blockIndex));
       }, class: {
         [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
         [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
       } }, this.activeBlocks.includes(blockIndex) ? (block.rows.map((row, i) => {
       const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
-      return (index.h(TableRow, { rowRenderer: this.rowRender, row: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (index.h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+      return (index.h(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (index.h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
     })) : (index.h("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex),
       } }))))), this.showFooter && (index.h("tfoot", null, index.h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
@@ -1432,7 +1511,8 @@ const Table = class {
   static get watchers() { return {
     "rows": ["handleRowsChange"],
     "columns": ["handleColsChange"],
-    "searchTerm": ["handleSearchTermChange"]
+    "searchTerm": ["handleSearchTermChange"],
+    "virtualTotalItems": ["virtualTotalItemsChangeHandler"]
   }; }
 };
 Table.style = tableCss;
@@ -1440,4 +1520,4 @@ Table.style = tableCss;
 exports.Table = Table;
 exports.createWorker = createWorker;
 
-//# sourceMappingURL=nano-table-83e46f68.js.map
+//# sourceMappingURL=nano-table-b031ec24.js.map