@nanoporetech-digital/components 5.1.3 → 5.2.1

package/dist/components/table.js

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { consoleError, h, Fragment, getElement, getRenderingRef, proxyCustomElement, HTMLElement, createEvent, readTask, Build, Host } from '@stencil/core/internal/client';
+import { consoleError, h, Fragment, getElement, getRenderingRef, writeTask, readTask, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { a as cyrb53 } from './math.js';
 import { d as debounce } from './throttle.js';
 import { c as createStore } from './index2.js';
@@ -367,92 +367,6 @@ function colheadFootRender(col) {
   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();
-const stickyVIOs = new WeakMap();
-/**
- * Adds element to Intersection Observer. Fires when element changes on the x axis
- * @param el - an element to observe
- * @param pos - the edge to watch (start or end)
- * @param cb - callback when an intersection state changes.
- */
-function addHObserver(el, pos, cb) {
-  if (stickyHIOs.get(el))
-    return;
-  const store = fetchStores();
-  const root = store.general.state.scrollParent;
-  const observer = new IntersectionObserver(([e]) => {
-    const rootBounds = e.rootBounds || document.scrollingElement.getBoundingClientRect();
-    const positions = {};
-    if (pos === 'start') {
-      positions.start =
-        e.boundingClientRect.x - (rootBounds.x + root.scrollLeft) < 0 &&
-          !e.isIntersecting;
-    }
-    if (pos === 'end') {
-      // TODO - sort these out for RtL
-      positions.end =
-        e.boundingClientRect.right > e.boundingClientRect.width &&
-          !e.isIntersecting;
-    }
-    if (!!cb)
-      cb(positions);
-  }, {
-    threshold: [1],
-    rootMargin: '1px 0px 100px 0px',
-    root: root === document.scrollingElement ? null : root,
-  });
-  stickyHIOs.set(el, observer);
-  if (store.general.state.isReady) {
-    observer.observe(el);
-  }
-  else {
-    store.general.state.host.addEventListener('nanoTblReady', () => {
-      observer.observe(el);
-    }, { once: true });
-  }
-}
-/**
- * Adds element to Intersection Observer. Fires when element changes on the y axis
- * @param el - an element to observe
- * @param pos - the edge to watch (start or end)
- * @param cb - callback when an intersection state changes.
- */
-function addVObserver(el, pos, cb) {
-  if (stickyVIOs.get(el))
-    return;
-  const store = fetchStores();
-  const root = store.general.state.scrollParent;
-  const observer = new IntersectionObserver(([e]) => {
-    const rootBounds = e.rootBounds || document.scrollingElement.getBoundingClientRect();
-    const positions = {};
-    if (pos === 'top') {
-      positions.top =
-        e.boundingClientRect.y - (rootBounds.y + root.scrollTop) < 0 &&
-          !e.isIntersecting;
-    }
-    if (pos === 'bottom') {
-      const boundingClientRect = e.target.getBoundingClientRect();
-      positions.bottom =
-        boundingClientRect.height + boundingClientRect.y >
-          rootBounds.height && !e.isIntersecting;
-    }
-    if (!!cb)
-      cb(positions);
-  }, {
-    threshold: [1],
-    rootMargin: '0px 100px 0px 100px',
-    root: root === document.scrollingElement ? null : root,
-  });
-  stickyVIOs.set(el, observer);
-  if (store.general.state.isReady) {
-    observer.observe(el);
-  }
-  else {
-    store.general.state.host.addEventListener('nanoTblReady', () => {
-      observer.observe(el);
-    }, { once: true });
-  }
-}
 function headerPinClasses(type, vPinned, toString = false) {
   const classes = {
     [`${CSSNAMESPACE}__${type}`]: true,
@@ -522,7 +436,7 @@ function isInViewport(el, percentVisible = 100) {
       percentVisible);
 }
 
-const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, defaults, }) => {
+const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
   // Sort handling
   function handleColumnSortClick(e) {
     let order;
@@ -547,7 +461,7 @@ const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned,
     extraProps = column.columnProperties(column) || extraProps;
   }
   const baseProps = {
-    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 !== undefined && column.filter !== null }),
+    class: Object.assign(Object.assign({}, headerPinClasses('th', column.pinned)), { [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start', [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end', [`${CSSNAMESPACE}__ordered`]: !!column.order, [`${CSSNAMESPACE}__filtered`]: column.filter !== undefined && column.filter !== null }),
   };
   let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
   const content = colheadFootRender(column);
@@ -564,12 +478,7 @@ const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned,
       : 'none';
     props = Object.assign(Object.assign({}, props), { 'aria-sort': sort });
   }
-  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 }), isSortable() ? (h("button", { class: {
+  return (h("th", Object.assign({}, props, { key: column.prop }), isSortable() ? (h("button", { class: {
       [`${CSSNAMESPACE}__order-btn`]: true,
       [`${CSSNAMESPACE}__cell-content`]: true,
     }, onClick: handleColumnSortClick },
@@ -597,6 +506,7 @@ function cellRender(rowIndex, colIndex) {
   const columns = store.config.state.columns;
   const tpl = (_a = columns[colIndex]) === null || _a === void 0 ? void 0 : _a.cellTemplate;
   const model = colDataModel(rowIndex, colIndex);
+  const tableInstance = getRenderingRef();
   if (!!model.cellModel && columns[colIndex].type === 'date') {
     const d = new Date(model.cellModel);
     if (d instanceof Date && !isNaN(d)) {
@@ -605,7 +515,28 @@ function cellRender(rowIndex, colIndex) {
         : d;
     }
   }
-  return tpl ? (tpl(h, model)) : model.cellModel !== undefined && model.cellModel !== null ? (h(Fragment, null, (_b = model.cellModel) === null || _b === void 0 ? void 0 : _b.toString())) : ('');
+  // Wrap the h pragma, then we can know if we're using Stencil's
+  // jsx renderer or a different one
+  let hCalled = false;
+  const hWrap = (...args) => {
+    hCalled = true;
+    return h(...args);
+  };
+  let tplResult = tpl ? tpl(hWrap, model) : undefined;
+  if (tplResult &&
+    tableInstance.customRenderer &&
+    tplResult['$attrs$'] === undefined &&
+    !(tplResult instanceof Element) &&
+    typeof tplResult !== 'string' &&
+    !hCalled) {
+    // template result is jsx *not* from Stencil.
+    // Render it now and output it later.
+    const templateEle = document.createElement('template');
+    // @ts-expect-error
+    tableInstance.customRenderer(tplResult, templateEle.content);
+    tplResult = templateEle;
+  }
+  return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (h(Fragment, null, (_b = model.cellModel) === null || _b === void 0 ? void 0 : _b.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
   const store = fetchStores();
@@ -621,11 +552,12 @@ const baseCellClasses = (colIndex, toString = false) => {
     return classListToStr(classes);
   return classes;
 };
-const TableCell$1 = ({ rowIndex, colIndex, nestedContent, }) => {
+const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
   const Content = () => nestedContent
     ? nestedContent()
     : cellRender(rowIndex, colIndex) || (h("span", { class: "placeholder" }, "\u00A0"));
   let CellType = 'td';
+  const tableInstance = getRenderingRef();
   const store = fetchStores();
   const column = store.config.state.columns[colIndex];
   let props = mergeCellProperties(rowIndex, colIndex, {
@@ -637,14 +569,23 @@ const TableCell$1 = ({ rowIndex, colIndex, nestedContent, }) => {
         ? Object.assign(Object.assign({}, props), { scope: 'rowgroup' }) : Object.assign(Object.assign({}, props), { scope: 'row' });
     CellType = 'th';
   }
-  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"
-  , Object.assign({}, props), column.autoTooltip && !column.wrap ? (h("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+  const ContentWrap = (props) => {
+    const content = Content();
+    return (h("div", Object.assign({ ref: (d) => {
+        if (d && content instanceof Element) {
+          d.replaceChildren();
+          d.append(content['content'] || content);
+        }
+      } }, props, { class: {
+        [`${CSSNAMESPACE}__cell-content`]: true,
+        [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
+      }, innerHTML: typeof content === 'string' && content.includes('<')
+        ? content
+        : undefined }), (typeof content !== 'string' || !content.includes('<')) &&
+      !(content instanceof Element) &&
+      content));
+  };
+  return (h(CellType, Object.assign({ role: tableInstance.type === 'grid' ? 'gridcell' : undefined }, 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, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
       h(ContentWrap, null),
@@ -652,14 +593,18 @@ const TableCell$1 = ({ rowIndex, colIndex, nestedContent, }) => {
         h(Content, null))))) : (h(ContentWrap, null))));
 };
 
-const TableCell = ({ header, wrap }, children) => {
-  const cell = (h("div", { class: {
+const tableCellContent = (props, children, ctx) => {
+  const cell = (h("div", Object.assign({}, props.wrapperProps, { class: {
       [`${CSSNAMESPACE}__cell-content`]: true,
-      [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
-    } }, children));
-  return header ? h("th", { scope: "row" }, cell) : h("td", null, cell);
+      [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,
+    } }), children));
+  return props.header ? (h("th", Object.assign({ scope: ctx }, props.cellProps), cell)) : (h("td", Object.assign({}, props.cellProps), cell));
 };
-const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children, utils) => {
+const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
+  // helper, generates <td> or <th>
+  const TableCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
+    return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'row');
+  };
   let extraProps = {};
   if (!rowModel) {
     const model = rowDataModel(rowIndex);
@@ -669,13 +614,28 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children,
     extraProps =
       rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
   }
-  let pinned;
+  let rowPinned;
   if ((rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.pinned) && typeof rowRenderer.pinned === 'function') {
-    pinned = rowRenderer.pinned();
+    rowPinned = rowRenderer.pinned({ rowModel, rowIndex });
   }
-  const baseProps = { class: headerPinClasses('tr', pinned) };
-  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+  const props = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, extraProps);
   const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
+  /**
+   * Applies appropriate classes to td / th VNodes;
+   * which can be supplied by user defined templates
+   * @param children virtual / jsx node array
+   * @returns virtual / jsx node array
+   */
+  const applyCellClasses = (children) => {
+    return utils.map(children, (cNode, i) => {
+      if (['td', 'th'].includes(cNode.vtag.toString())) {
+        cNode.vattrs = mergeProperties({
+          class: baseCellClasses(i, true),
+        }, cNode.vattrs);
+      }
+      return cNode;
+    });
+  };
   if (tpl) {
     let toRender = tpl(h, {
       renderedRow: (h("tr", Object.assign({}, props, { key: rowModel.__uuid }), children)),
@@ -687,24 +647,9 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children,
         if (node.vtag === 'tr') {
           if (!node.vkey)
             node.vkey = `${rowModel.__uuid}_${i}`;
-          node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
+          node.vattrs = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, node.vattrs);
           if (!!node.vchildren) {
-            node.vchildren = utils.map(node.vchildren, (cNode, i) => {
-              if (['td', 'th'].includes(cNode.vtag.toString())) {
-                cNode.vattrs = mergeProperties({
-                  class: headerPinClasses(cNode.vtag.toString(), pinned, true) + baseCellClasses(i, true),
-                  ref: (th) => {
-                    if ((!!th && pinned === 'top') || pinned === 'bottom')
-                      addVObserver(th, pinned, onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--end'))
-                      addHObserver(th, 'end', onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--start'))
-                      addHObserver(th, 'start', onColumnPinned);
-                  },
-                }, cNode.vattrs);
-              }
-              return cNode;
-            });
+            node.vchildren = applyCellClasses(node.vchildren);
           }
         }
         return node;
@@ -712,28 +657,25 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children,
     }
     return toRender;
   }
-  return (h("tr", Object.assign({}, props, { key: rowModel.__uuid }), children));
+  return (h("tr", Object.assign({}, props, { key: rowModel.__uuid }), applyCellClasses(children)));
 };
-const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
+const TableHeadFootRow = ({ rowRenderer }, // onRowPinned, onColPinned
+children, utils) => {
   let extraProps = {};
   if (rowRenderer.rowProperties) {
     extraProps = rowRenderer.rowProperties() || {};
   }
-  const TableCell = ({ header, wrap }, children) => {
-    const cell = (h("div", { class: {
-        [`${CSSNAMESPACE}__cell-content`]: true,
-        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
-      } }, children));
-    return header !== false ? h("th", { scope: "col" }, cell) : h("td", null, cell);
+  const TableHeadFootCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
+    return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'col');
   };
   const pinned = rowRenderer.pinned || null;
-  const baseProps = { class: headerPinClasses('tr', null) };
+  const baseProps = { class: headerPinClasses('tr', pinned) };
   const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
   const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
   if (tpl) {
     let toRender = tpl(h, {
       renderedRow: h("tr", Object.assign({}, props), children),
-    }, TableCell);
+    }, TableHeadFootCell);
     if (Array.isArray(toRender)) {
       toRender = utils.map(toRender, (node) => {
         if (node.vtag === 'tr') {
@@ -743,14 +685,6 @@ const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
               if (['td', 'th'].includes(cNode.vtag.toString())) {
                 cNode.vattrs = mergeProperties({
                   class: headerPinClasses(cNode.vtag.toString(), pinned, true),
-                  ref: (th) => {
-                    if ((!!th && pinned === 'top') || pinned === 'bottom')
-                      addVObserver(th, pinned, onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--end'))
-                      addHObserver(th, 'end', onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--start'))
-                      addHObserver(th, 'start', onColumnPinned);
-                  },
                 }, cNode.vattrs);
               }
               return cNode;
@@ -765,11 +699,388 @@ const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
   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));-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__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__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.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}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)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}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 tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.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 addStyleSheet(id, css) {
+  const styleSheet = document.getElementById(id) ||
+    document.createElement('style');
+  styleSheet.id = id;
+  styleSheet.innerHTML = css;
+  if (!styleSheet.isConnected)
+    document.head.append(styleSheet);
+}
+/**
+ * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.
+ *
+ * *knowing* when an element is pinned is tricky.
+ * Managing the display of multiple, side-by-side pinned elements is trickier still.
+ *
+ * Pinning table columns are very different from pinning table rows:
+ * - Rows are actual elements we can select, measure and apply styles to.
+ * - Columns are disparate collections of elements that are much harder to select, measure and apply styles to.
+ *
+ * With this in mind, how columns and rows are pinned is different:
+ * Rows can have changes applied directly, Columns have changes applied via dynamic stylesheets.
+ *
+ * The service is slightly opinionated on how it pins rows and columns (with some room for override):
+ * - Pinned columns are stuck consecutively, without overlapping.
+ * e.g. If column 'name' and 'surname' are both `pin: 'start'`; 'surname' will display **next** to name.
+ * Both columns are important for context
+ *
+ * - Pinned rows are set to overlap *when* they have the same ancestor,
+ * and stuck consecutively when they have a different ancestor.
+ * e.g. `tbody > tr.pin ~ tr.pin` the second row will **overlap** the first; it's unlikely both rows will be important for context.
+ * `thead > tr.pin`, `tbody > tr.pin`. Both rows are required for context so will require next to each other.
+ *
+ * Devs can override this behaviour by setting `--pin-start`, `--pin-end`, `--pin-top`, `--pin-bottom` custom vars.
+ */
+class TablePinService {
+  constructor(table, scrollElement) {
+    // Private state
+    this.cachedColMeta = new WeakMap();
+    this._pinnedStart = [];
+    this._pinnedEnd = [];
+    this._cssColDimensionCacheKey = '';
+    this.cacheX = 0;
+    this.cacheY = 0;
+    this.tableEle = table;
+    this.tableId = this.tableEle.id;
+    this.scrollElement = scrollElement;
+    // Secret sauce - `getElementsByClassName` is a live collection.
+    // An HTMLCollection will keep itself up-to-date as elements come and go
+    // So we can keep assessing on scroll
+    this.startColumns = table
+      .querySelector('thead')
+      .getElementsByClassName(`${CSSNAMESPACE}__pin--start`);
+    this.endColumns = table
+      .querySelector('thead')
+      .getElementsByClassName(`${CSSNAMESPACE}__pin--end`);
+    this.topRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--top`);
+    this.bottomRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--bottom`);
+    this.onResize();
+  }
+  // Pinned cols & change detection
+  get pinnedStart() {
+    return this._pinnedStart;
+  }
+  set pinnedStart(cols) {
+    this._pinnedStart = cols;
+    this.handlePinnedStartChange();
+  }
+  /**
+   * Called when columns are either pinned or unpinned.
+   * Attaches a tiny stylesheet to target the 'last' start column.
+   * (e.g. We only want to apply drop shadow on last pinned start column - not all pinned columns)
+   */
+  handlePinnedStartChange() {
+    writeTask(() => {
+      if (this.pinnedStart.length) {
+        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--start`);
+        const lastActiveCol = this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length - 1]);
+        addStyleSheet(`${this.tableId}-col-start-active-style`, 
+        /* css */ `
+          #${this.tableId} tr > :nth-child(${lastActiveCol.idx + 1}) {
+            --pin-start-active: 1;
+          }
+        `);
+      }
+      else {
+        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--start`);
+        addStyleSheet(`${this.tableId}-col-start-active-style`, ``);
+      }
+    });
+  }
+  get pinnedEnd() {
+    return this._pinnedEnd;
+  }
+  set pinnedEnd(cols) {
+    this._pinnedEnd = cols;
+    this.handlePinnedEndChange();
+  }
+  /**
+   * Called when columns are either pinned or unpinned.
+   * Attaches a tiny stylesheet to target the 'first' end column.
+   * (e.g. We only want to apply drop shadow on first pinned end column - not all pinned columns)
+   */
+  handlePinnedEndChange() {
+    writeTask(() => {
+      if (this.pinnedEnd.length) {
+        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--end`);
+        const firstActiveCol = this.cachedColMeta.get(this.pinnedEnd[0]);
+        addStyleSheet(`${this.tableId}-col-end-active-style`, 
+        /* css */ `
+          #${this.tableId} tr > :nth-child(${firstActiveCol.idx + 1}) { --pin-end-active: 1; }
+        `);
+      }
+      else {
+        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--end`);
+        addStyleSheet(`${this.tableId}-col-end-active-style`, ``);
+      }
+    });
+  }
+  get cssColDimensionCacheKey() {
+    return this._cssColDimensionCacheKey;
+  }
+  set cssColDimensionCacheKey(key) {
+    if (key === this._cssColDimensionCacheKey)
+      return;
+    this._cssColDimensionCacheKey = key;
+    this.createPinnedColDimensionStyles();
+  }
+  /**
+   * To only generate column dimension styles when necessary we
+   * maintain a cache key string via serialised column meta.
+   * Only when this key changes do we generate a new stylesheet
+   */
+  generateCssCacheKey() {
+    let key = '';
+    for (const col of this.startColumns) {
+      const colMeta = this.cachedColMeta.get(col);
+      key += `${colMeta.idx}-start-${colMeta.width}`;
+    }
+    for (const col of this.endColumns) {
+      const colMeta = this.cachedColMeta.get(col);
+      key += `${colMeta.idx}-start-${colMeta.width}`;
+    }
+    this.cssColDimensionCacheKey = key;
+  }
+  /**
+   * Generates pinned column width offset styles
+   * so pinned columns can appear stuck together,
+   * then attaches a stylesheet.
+   */
+  createPinnedColDimensionStyles() {
+    let widthS = 0;
+    let widthE = 0;
+    const startCols = Array.from(this.startColumns);
+    const endCols = Array.from(this.endColumns).reverse();
+    const css = /* css */ `
+      ${startCols
+      .map((col) => {
+      const colMeta = this.cachedColMeta.get(col);
+      widthS += colMeta.width || 0;
+      return /* css */ `
+            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ td,
+            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ th {
+              --pin-start: ${widthS - 1}px;
+            }
+          `;
+    })
+      .join('')}
+      ${endCols
+      .map((col) => {
+      const colMeta = this.cachedColMeta.get(col);
+      widthE += colMeta.width;
+      return /* css */ `
+            #${this.tableId} tr > td:has(~ :nth-child(${colMeta.idx + 1})),
+            #${this.tableId} tr > th:has(~ :nth-child(${colMeta.idx + 1})) {
+              --pin-end: ${widthE - 1}px;
+            }
+          `;
+    })
+      .join('')}
+    `;
+    addStyleSheet(`${this.tableId}-dimension-style`, css);
+  }
+  getParentOffsets() {
+    const { x, y } = this.scrollElement.getBoundingClientRect();
+    let offsetX = x;
+    let offsetY = y;
+    if (this.scrollElement === document.documentElement) {
+      offsetX = this.scrollElement.offsetLeft;
+      offsetY = this.scrollElement.offsetTop;
+    }
+    return { offsetX, offsetY };
+  }
+  /**
+   * Loops through all 'top' & 'bottom' rows (on scroll or resize)
+   * Manages their visual state by applying classes on stuck / unstuck
+   * And their pinned offset / distance
+   */
+  assessRows() {
+    if (!this.topRows.length && !this.bottomRows.length)
+      return;
+    // top rows
+    if (this.topRows.length) {
+      readTask(async () => {
+        let heightAggregate = 0;
+        let cacheParent;
+        const { offsetY } = this.getParentOffsets();
+        for (const topRow of this.topRows) {
+          const { y, height } = topRow.getBoundingClientRect();
+          const currParent = topRow.parentElement;
+          // we'll use the applied `--pin-top` css var to decide row offset.
+          // This allows devs to override this behaviour through selector specificity
+          const pinTop = getComputedStyle(topRow).getPropertyValue('--pin-top');
+          const offset = pinTop !== '' ? parseFloat(pinTop) : heightAggregate;
+          // we need to wait for the row to finish sticking
+          // and generating it's offset (`--pin-top`) so we can see, on
+          // subsequent rows *if* the offset was applied
+          await new Promise((resolve) => writeTask(() => {
+            if (y - offsetY <= offset) {
+              topRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
+            }
+            else {
+              topRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
+            }
+            // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
+            // so only aggregate height / offset when cacheParent is different from current parent.
+            // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
+            if (cacheParent !== currParent) {
+              currParent.style.setProperty('--pin-top', `${heightAggregate}px`);
+              heightAggregate += height;
+              cacheParent = currParent;
+            }
+            resolve();
+          }));
+        }
+      });
+    }
+    // bottom rows
+    if (this.bottomRows.length) {
+      const bottomRows = Array.from(this.bottomRows).reverse();
+      readTask(async () => {
+        let cacheParent;
+        let heightAggregate = 0;
+        const { offsetY } = this.getParentOffsets();
+        for (const bottomRow of bottomRows) {
+          if (!bottomRow.isConnected)
+            continue;
+          const { y, height } = bottomRow.getBoundingClientRect();
+          const currParent = bottomRow.parentElement;
+          // we'll use the applied `--pin-bottom` css var to decide row offset.
+          // This allows devs to override this behaviour through selector specificity
+          const pinBottom = getComputedStyle(bottomRow).getPropertyValue('--pin-bottom');
+          const offset = pinBottom !== '' ? parseFloat(pinBottom) : heightAggregate;
+          // we need to wait for the row to finish sticking
+          // and generating it's offset (`--pin-bottom`) to we can see, on
+          // subsequent rows *if* the offset was applied
+          await new Promise((resolve) => writeTask(() => {
+            if (this.tableDims.height + offsetY - (y + height) <= offset) {
+              bottomRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
+            }
+            else {
+              bottomRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
+            }
+            // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
+            // so only aggregate height / offset when cacheParent is different from current parent.
+            // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
+            if (cacheParent !== currParent) {
+              currParent.style.setProperty('--pin-bottom', `${heightAggregate}px`);
+              heightAggregate += height;
+              cacheParent = currParent;
+            }
+            resolve();
+          }));
+        }
+      });
+    }
+  }
+  /**
+   * Loops through all 'start' & 'end' columns (on scroll or resize)
+   * Caches meta about each column (e.g. size, position-index)
+   * and decides which columns are pinned
+   */
+  async assessCols() {
+    if (!this.startColumns.length && !this.endColumns.length)
+      return;
+    let boundBox;
+    let currPinned;
+    let parentEles;
+    const done = new Promise((resolve) => {
+      // start cols
+      if (this.startColumns.length) {
+        readTask(() => {
+          const { offsetX } = this.getParentOffsets();
+          // cumulatively add widths of columns together
+          // 'cos columns stick together
+          let widthAggregate = offsetX;
+          parentEles = Array.from(this.startColumns[0].parentElement.children);
+          for (const startCol of this.startColumns) {
+            boundBox = startCol.getBoundingClientRect();
+            // cache meta for later
+            this.cachedColMeta.set(startCol, {
+              width: boundBox.width,
+              idx: parentEles.indexOf(startCol),
+            });
+            currPinned = this.pinnedStart.find((c) => c === startCol);
+            if (boundBox.x < widthAggregate) {
+              // this column is pinned
+              if (!currPinned)
+                this.pinnedStart = [
+                  ...this.pinnedStart,
+                  startCol,
+                ];
+            }
+            else if (currPinned) {
+              // this column is unpinned
+              this.pinnedStart = this.pinnedStart.filter((c) => c !== startCol);
+            }
+            widthAggregate += boundBox.width;
+          }
+          if (!this.endColumns.length)
+            resolve();
+        });
+      }
+      // end cols
+      if (this.endColumns.length) {
+        readTask(() => {
+          const endCols = Array.from(this.endColumns).reverse();
+          parentEles = Array.from(this.endColumns[0].parentElement.children);
+          const { offsetX } = this.getParentOffsets();
+          // cumulatively add widths of columns together
+          // 'cos columns stick together
+          let widthAggregate = 0;
+          for (const endCol of endCols) {
+            boundBox = endCol.getBoundingClientRect();
+            // cache meta for later
+            this.cachedColMeta.set(endCol, {
+              width: boundBox.width,
+              idx: parentEles.indexOf(endCol),
+            });
+            currPinned = this.pinnedEnd.find((c) => c === endCol);
+            if (this.tableDims.width + offsetX - boundBox.right <=
+              widthAggregate) {
+              // this column is pinned
+              if (!currPinned)
+                this.pinnedEnd = [endCol, ...this.pinnedEnd];
+            }
+            else if (currPinned) {
+              // this column is unpinned
+              this.pinnedEnd = this.pinnedEnd.filter((c) => c !== endCol);
+            }
+            widthAggregate += boundBox.width;
+          }
+          resolve();
+        });
+      }
+    });
+    await done;
+    // potentially generate a new css stylesheet if anything changed
+    this.generateCssCacheKey();
+  }
+  onScroll(pos) {
+    if (this.cacheX !== pos.x) {
+      this.cacheX = pos.x;
+      this.assessCols();
+    }
+    if (this.cacheY !== pos.y) {
+      this.cacheY = pos.y;
+      this.assessRows();
+    }
+  }
+  onResize() {
+    const width = this.scrollElement.clientWidth;
+    const height = this.scrollElement.clientHeight;
+    this.tableDims = { width, height };
+    this.assessCols();
+    this.assessRows();
+  }
+}
+
+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.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--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__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__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.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)/100%);font-size:var(--thead-font-size);-webkit-border-before:none !important;border-block-start:none !important}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)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}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)/100%);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}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{z-index:3}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,.nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{z-index:4 !important}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__pin--start{z-index:6 !important}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,.nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{z-index:5 !important}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(~.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__th,.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(~.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__td{z-index:6 !important}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__pin--start{z-index:6 !important}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.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-before:var(--border-style);border-block-start:var(--border-style);-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)}";
 
 const measurePerf = false;
 function perMark(name, end = false) {
-  if (!Build.isDev || Build.isTesting || !performance || !measurePerf)
+  if (!performance || !measurePerf)
     return;
   if (end) {
     performance === null || performance === void 0 ? void 0 : performance.mark('end' + name);
@@ -799,7 +1110,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.filters = [];
     this.currentFilters = '[]';
     this.currentSort = '';
-    this.cacheScrollPosition = 0;
     this.measureHeight = 0;
     this.blockHeights = [];
     this.unitHeight = 0;
@@ -862,25 +1172,40 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * stop loop - it's on the current active block.
      */
     this.scrollHandler = () => {
+      var _a;
+      let scrollPos = 0;
+      perMark('scrollHandler');
       // don't listen if this table isn't in the viewport
-      if (!this.store.general.state.isActive || !this.rows)
+      if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.general.state.isActive) || !this.rows)
         return;
       if (this.primaryBlockIndex === undefined)
         this.primaryBlockIndex = 0;
       readTask(() => {
-        this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
+        scrollPos =
+          typeof this.scrollParent.scrollTop !== 'undefined'
+            ? this.scrollParent.scrollTop
+            : window.scrollY;
+        scrollPos += this.host.offsetTop;
+        if (this.tablePinnedService) {
+          this.tablePinnedService.onScroll({
+            x: typeof this.scrollParent.scrollLeft !== 'undefined'
+              ? this.scrollParent.scrollLeft
+              : window.scrollX,
+            y: scrollPos,
+          });
+        }
         let cumulativeHeight = this.host.offsetTop;
         let blockIndex = 0;
         const blockLen = this.blocks.length;
-        while (blockIndex < blockLen &&
-          this.cacheScrollPosition >= cumulativeHeight) {
+        while (blockIndex < blockLen && scrollPos >= cumulativeHeight) {
           cumulativeHeight += this.getBlockHeight(blockIndex);
-          if (this.cacheScrollPosition < cumulativeHeight) {
+          if (scrollPos < cumulativeHeight) {
             const potentialBlocks = [
               blockIndex,
               blockIndex + 1,
-              Math.max(0, blockIndex - 1),
+              // Math.max(0, blockIndex - 1),
             ];
+            console.log(potentialBlocks);
             if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
               this.activeBlocks = potentialBlocks;
             }
@@ -888,11 +1213,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           }
           blockIndex++;
         }
-      });
-    };
-    this.handleColumnPinned = (positions) => {
-      Object.entries(positions).forEach(([key, applied]) => {
-        this.tableEle.classList.toggle(`${CSSNAMESPACE}__pinned--${key}`, applied);
+        perMark('scrollHandler', true);
       });
     };
     this.handleResizeChange = (e) => {
@@ -903,12 +1224,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         classes = [...e.target.className.split(' '), ...classes];
       this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
     };
-    this.jsxRenderer = undefined;
+    this.customRenderer = undefined;
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
     this.loading = undefined;
-    this.internalLoading = false;
+    this.internalLoading = true;
     this.placeholderSize = 5;
     this.rows = undefined;
     this.columns = [];
@@ -916,14 +1237,14 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.rowRender = undefined;
     this.footRender = { pinned: 'bottom' };
     this.showFooter = false;
-    this.perBlock = 40;
+    this.perBlock = 50;
     this.searchTerm = undefined;
     this.customFilterFn = undefined;
     this.customSortFn = undefined;
     this.defaultSort = true;
     this.virtualTotalItems = 0;
     this.blocks = [];
-    this.activeBlocks = [0, 1, 2];
+    this.activeBlocks = [0, 1];
     this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
   }
   get _loading() {
@@ -952,6 +1273,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (!this.isReady)
         requestAnimationFrame(() => this.setInitialBlockDimension());
       this._loading = false;
+      if (this.tablePinnedService)
+        this.tablePinnedService.assessRows();
     });
   }
   async handleColsChange() {
@@ -969,6 +1292,10 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   virtualTotalItemsChangeHandler() {
     this.setBlocks();
   }
+  /** @readonly - shows the currently applied filters */
+  get appliedFilters() {
+    return this.filters;
+  }
   /** Remove any column sorts currently applied
    * @returns a promise which resolves when complete */
   async resetSorting() {
@@ -1011,8 +1338,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /** 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) {
@@ -1043,7 +1368,9 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ? document
         : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
     }
-    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
+    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler
+    // {passive: true}
+    );
     this._scrollParent = ele;
   }
   // used to fire `nanoTblBlockRendered` on block render change
@@ -1146,10 +1473,11 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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 response is falsy, carry on to do a FE filter
         if (res === true) {
           this.filterComplete();
           this._loading = false;
+          return;
         }
       }
       catch (e) {
@@ -1158,8 +1486,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         console.warn('custom filter failed', e);
         this.currentFilters = '';
         this._loading = false;
+        return;
       }
-      return;
     }
     try {
       await storeFilter(this.host, this.filters);
@@ -1175,9 +1503,17 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   filterComplete() {
     this.columns = this.columns.map((c) => {
       const cFilter = this.filters.find((f) => f.prop === c.prop);
-      if (cFilter)
+      // if we found a filter AND
+      // it isn't true / false and has a length OR
+      // it is true or false
+      if (cFilter &&
+        ((typeof cFilter.filter !== 'boolean' && cFilter.filter.length) ||
+          typeof cFilter.filter === 'boolean'))
         c.filter = cFilter.filter;
-      else if (c.filter !== null && c.filter !== undefined)
+      // if a filter value is not set OR
+      // it isn't true / false and has no length
+      else if ((c.filter !== null && c.filter !== undefined) ||
+        (!!c.filter && typeof c.filter !== 'boolean' && !c.filter.length))
         c.filter = undefined;
       return c;
     });
@@ -1266,6 +1602,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!!col) {
       await this.sortStart(col.order, col.prop);
     }
+    if (this.tablePinnedService)
+      this.tablePinnedService.assessCols();
   }
   /** Split up all incoming rows into 'blocks' split amongst tbody elements.
    * These can then be hidden / shown to improve performance.
@@ -1388,6 +1726,9 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     this.setInitialBlockDimension();
+    if (!this.tablePinnedService) {
+      this.tablePinnedService = new TablePinService(this.tableEle, this.scrollParent);
+    }
   }
   componentShouldUpdate(_newVal, _oldVal, stateName) {
     // stop double rendering - we use the store for rendering internally
@@ -1395,8 +1736,6 @@ 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 && !Build.isTesting && measurePerf)
-      console.log(stateName, _newVal, _oldVal);
   }
   componentWillRender() {
     perMark('render');
@@ -1416,28 +1755,31 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     this.blockElements = [];
-    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange }), h("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("nano-progress-bar", { indeterminate: true, class: {
+    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange, onNanoResize: () => {
+        if (this.tablePinnedService)
+          this.tablePinnedService.onResize();
+      } }), h("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'nano-table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("nano-progress-bar", { indeterminate: true, class: {
         [`${CSSNAMESPACE}__progress-bar`]: true,
         [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
-      } }), h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, h("caption", { class: {
+      } }), h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-table-' + this.renderId }, h("caption", { class: {
         [`${CSSNAMESPACE}__caption`]: true,
         [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
-      }, id: 'table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
-      h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, onColumnPinned: this.handleColumnPinned, defaults: {
+      }, id: 'nano-table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
+      h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
         } }),
-    ]))), 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$1, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, 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._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...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) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, 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);
       }, 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 (h(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell$1, { rowIndex: rowIndex, colIndex: colIndex })))));
-    })) : (h("tr", null, h("td", { colSpan: this.store.config.state.columns.length, style: {
+      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", { class: `${CSSNAMESPACE}__tr--placeholder` }, h("td", { colSpan: this.store.config.state.columns.length, style: {
         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: {
+      } })))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender }, this.store.config.state.columns.map((colModel) => [
+      h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
         } }),
     ]))))), !!this.blocks.length && (h("nano-spinner", { type: "circle", class: {
@@ -1454,7 +1796,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return tableCss; }
 }, [4, "nano-table", {
-    "jsxRenderer": [16],
+    "customRenderer": [16],
     "type": [1],
     "caption": [1],
     "showCaption": [4, "show-caption"],
@@ -1473,6 +1815,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "customSortFn": [16],
     "defaultSort": [4, "default-sort"],
     "virtualTotalItems": [2, "virtual-total-items"],
+    "appliedFilters": [2064],
     "internalLoading": [32],
     "blocks": [32],
     "activeBlocks": [32],