@nanoporetech-digital/components 3.4.0 → 3.5.0

package/dist/esm/{nano-table-c8ef2276.js → nano-table-e2405350.js}

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { j as consoleError, h, F as Fragment, g as getElement, e as getRenderingRef, r as registerInstance, c as createEvent, d as readTask, a as Host } from './index-3c280603.js';
+import { j as consoleError, g as getElement, e as getRenderingRef, h, F as Fragment, r as registerInstance, c as createEvent, d as readTask, a as Host } from './index-3c280603.js';
 import { a as cyrb53 } from './math-c02ddfda.js';
 import { d as debounce } from './throttle-7836544e.js';
 import { c as createStore } from './index-c752dae1.js';
@@ -110,7 +110,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
   })
 );
 
-const workerPromise = import('./table.worker-65438fa0.js').then(m => m.worker);
+const workerPromise = import('./table.worker-739c193f.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');
@@ -164,16 +164,53 @@ async function generateStore(host, columns, scrollParent) {
 function getStore(host) {
   return stores.get(host);
 }
+function getDataType(value) {
+  if (value instanceof Date) {
+    return 'date';
+  }
+  if (['number', 'string'].includes(typeof value)) {
+    return typeof value;
+  }
+  return 'unknown';
+}
 function storeSetData(host, rows) {
   const store = stores.get(host);
   if (!store)
     return;
-  // augment data with some internal props
-  rows = rows.map((row, i) => ({
-    ...row,
-    __index: i,
-    __uuid: cyrb53(Object.values(row).join()),
-  }));
+  const cols = store.config.state.columns;
+  const dateCols = cols
+    .filter((col) => col.type === 'date')
+    .reduce((prev, curr) => {
+    return [...prev, curr.prop];
+  }, []);
+  const unknownCols = cols.filter((col) => !col.type);
+  // augments data with some internal.
+  // discern unknown column types
+  // convert dates to numbers for worker
+  rows = rows.map((row, i) => {
+    // try our best to discern the column type (from first row) if unset
+    if (unknownCols.length && i === 0) {
+      store.config.state.columns = cols.map((col) => {
+        if (unknownCols.includes(col) && row[col.prop] && !col.type) {
+          col.type = getDataType(row[col.prop]);
+          if (col.type === 'date')
+            dateCols.push(col.prop);
+        }
+        return col;
+      });
+    }
+    // convert date columns into numbers to send to our worker
+    dateCols.forEach((colName) => {
+      // coerce any date type;
+      // Date(), timestamp, valid date string
+      const coerceDate = new Date(row[colName]) ?? null;
+      if (!!coerceDate && Number(coerceDate))
+        row[colName] = Number(coerceDate);
+    });
+    row['__index'] = i;
+    row['__uuid'] = cyrb53(Object.values(row).join());
+    return row;
+  });
   store.data.state.rows = rows;
   if (store.general.state.workerId)
     return syncDataToWorker(store.general.state.workerId, rows);
@@ -194,7 +231,7 @@ async function storeSearch(host, term) {
     store.data.state.rows = await workerSearch(store.general.state.workerId, term);
   }
   catch (e) {
-    console.log(e);
+    console.warn(e);
   }
 }
 async function storeFilter(host, filters) {
@@ -205,7 +242,7 @@ async function storeFilter(host, filters) {
     store.data.state.rows = await workerFilter(store.general.state.workerId, filters);
   }
   catch (e) {
-    console.log(e);
+    console.warn(e);
   }
 }
 async function storeSort(host, prop, order) {
@@ -216,7 +253,7 @@ async function storeSort(host, prop, order) {
     store.data.state.rows = await workerSort(store.general.state.workerId, prop, order);
   }
   catch (e) {
-    console.log(e);
+    console.warn(e);
   }
 }
 
@@ -313,19 +350,6 @@ function mergeCellProperties(rowIndex, colIndex, defaultProps) {
     return props;
   return mergeProperties(props, extra);
 }
-/**
- * Renders a cell using a custom renderer if set.
- * @param rowIndex - the current row index being rendered
- * @param colIndex - the current column index being rendered
- * @returns - a JSX node
- */
-function cellRender(rowIndex, colIndex) {
-  const store = fetchStores();
-  const columns = store.config.state.columns;
-  const tpl = columns[colIndex]?.cellTemplate;
-  const model = colDataModel(rowIndex, colIndex);
-  return tpl ? (tpl(h, model)) : (h(Fragment, null, model.cellModel.toString()));
-}
 /**
  * Renders a table header (within a thead) using a custom template if set.
  * @param col - the current column config object
@@ -335,26 +359,14 @@ function colheadFootRender(col) {
   const tpl = col?.colTemplate;
   return tpl ? (tpl(h, col)) : (h(Fragment, null, col.title));
 }
-
-function baseClasses(type, vPinned, toString = false) {
-  const classes = {
-    [`${CSSNAMESPACE}__${type}`]: true,
-    [`${CSSNAMESPACE}__pin`]: !!vPinned,
-    [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',
-    [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',
-  };
-  if (toString) {
-    let classString = '';
-    Object.entries(classes).forEach(([className, on]) => {
-      if (on)
-        classString += className + ' ';
-    });
-    return classString;
-  }
-  return classes;
-}
 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;
@@ -369,13 +381,13 @@ function addHObserver(el, pos, cb) {
           !e.isIntersecting;
     }
     if (pos === 'end') {
-      // console.log('refe', store.general.state.host)
       // TODO - sort these out for RtL
       positions.end =
         e.boundingClientRect.right > e.boundingClientRect.width &&
           !e.isIntersecting;
     }
-    cb(positions);
+    if (!!cb)
+      cb(positions);
   }, {
     threshold: [1],
     rootMargin: '1px 0px 100px 0px',
@@ -385,6 +397,12 @@ function addHObserver(el, pos, cb) {
   // dirty fix - wait a tick 'cos nano-size-observer isn't always ready in-time
   setTimeout(() => observer.observe(el), 300);
 }
+/**
+ * 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;
@@ -398,11 +416,14 @@ function addVObserver(el, pos, cb) {
         e.boundingClientRect.y - (rootBounds.y + root.scrollTop) < 0 &&
           !e.isIntersecting;
     }
-    if (pos === 'bottom')
+    if (pos === 'bottom') {
+      const boundingClientRect = e.target.getBoundingClientRect();
       positions.bottom =
-        e.boundingClientRect.height > e.intersectionRect.height &&
-          !e.isIntersecting;
-    cb(positions);
+        boundingClientRect.height + boundingClientRect.y >
+          rootBounds.height && !e.isIntersecting;
+    }
+    if (!!cb)
+      cb(positions);
   }, {
     threshold: [1],
     rootMargin: '0px 100px 0px 100px',
@@ -411,64 +432,183 @@ function addVObserver(el, pos, cb) {
   stickyVIOs.set(el, observer);
   requestAnimationFrame(() => observer.observe(el));
 }
-const TableRow = ({ rowRenderer, rowIndex, row }, children) => {
-  let extraProps = {};
-  if (!row) {
-    const model = rowDataModel(rowIndex);
-    row = model.row;
-  }
-  if (rowRenderer?.rowProperties) {
-    extraProps =
-      rowRenderer.rowProperties({ row: row, rowIndex }) || extraProps;
+function headerPinClasses(type, vPinned, toString = false) {
+  const classes = {
+    [`${CSSNAMESPACE}__${type}`]: true,
+    [`${CSSNAMESPACE}__pin`]: !!vPinned,
+    [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',
+    [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',
+  };
+  if (toString)
+    return classListToStr(classes);
+  return classes;
+}
+/**
+ * Turns a class map {'string': boolean} to class string
+ * @param classes - the class map to convert
+ * @returns a class string
+ */
+function classListToStr(classes) {
+  let classString = '';
+  Object.entries(classes).forEach(([className, on]) => {
+    if (on)
+      classString += className + ' ';
+  });
+  return classString;
+}
+/**
+ * Detects the current scroll speed as a number.
+ * Use within a scroll listener
+ */
+const detectScrollSpeed = (() => {
+  let lastPos;
+  let newPos;
+  let timer;
+  let delta;
+  const delay = 60; // in "ms" (higher means lower fidelity )
+  const clear = () => {
+    lastPos = null;
+    delta = 0;
+  };
+  clear();
+  return () => {
+    newPos = window.scrollY;
+    if (lastPos != null)
+      delta = newPos - lastPos;
+    lastPos = newPos;
+    window.clearTimeout(timer);
+    timer = window.setTimeout(clear, delay);
+    return delta;
+  };
+})();
+/**
+ * Attempts to find the closes scrolling parental element
+ * @param element - the element from which to traverse up the DOM
+ * @returns - the closest scrolling parental element
+ */
+function findScrollParent(element) {
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = /(auto|scroll)/;
+  if (style.position === 'fixed')
+    return document.documentElement;
+  for (let parent = element; (parent = parent.parentElement);) {
+    style = getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
+      return parent;
   }
-  let pinned;
-  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
-    pinned = rowRenderer.pinned();
+  return document.documentElement;
+}
+/**
+ * Checks whether an element is currently viewable within the viewport
+ * @param el - element to check
+ * @param percentVisible - the percentage of the element that should be within the viewport
+ * @returns true if the element's area percentage is visible
+ */
+function isInViewport(el, percentVisible = 100) {
+  const r = el.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  if (!r.bottom &&
+    !r.top &&
+    !r.left &&
+    !r.right &&
+    !r.height &&
+    !r.width &&
+    !r.x &&
+    !r.y)
+    return false;
+  return !(Math.floor(100 - ((r.top >= 0 ? 0 : r.top) / +-r.height) * 100) <
+    percentVisible ||
+    Math.floor(100 - ((r.bottom - windowHeight) / r.height) * 100) <
+      percentVisible);
+}
+/**
+ * Immutable array re-order
+ * @param from - the index to move from
+ * @param to - the index to move to
+ * @param arr - the array to re-order
+ * @returns - a new, re-orderd array
+ */
+function arrMove(from, to, arr) {
+  const newArr = [...arr];
+  const item = newArr.splice(from, 1)[0];
+  newArr.splice(to, 0, item);
+  return newArr;
+}
+
+// TABLE HEADERS
+// (thead > tr > th, tfoot > tr > th)
+let draggingCol;
+let draggingColEle;
+let dragEnterEle;
+let draggingParent;
+const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, onColumnDrag, onColumnDrop, defaults, }) => {
+  const store = fetchStores();
+  // Drag to re-order columns handling
+  function handleDragStart(e, column) {
+    draggingCol = column;
+    draggingColEle = dragEnterEle = e.target;
+    draggingParent = draggingColEle.closest('.' + `${CSSNAMESPACE}__tr`);
+    draggingParent.classList.add(`${CSSNAMESPACE}__dragging`);
+    draggingColEle.classList.add(`${CSSNAMESPACE}__drag--start`);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', draggingColEle.innerHTML);
+    onColumnDrag(column.prop, draggingColEle);
   }
-  const baseProps = { class: baseClasses('tr', pinned) };
-  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  return (h("tr", { ...props, key: row.__uuid }, children));
-};
-const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
-  let extraProps = {};
-  if (rowRenderer.rowProperties) {
-    extraProps = rowRenderer.rowProperties() || {};
+  function handleDragEnd() {
+    draggingParent.classList.remove(`${CSSNAMESPACE}__dragging`);
+    draggingColEle.classList.remove(`${CSSNAMESPACE}__drag--start`);
+    draggingParent
+      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
+      .forEach((el) => {
+      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
+    });
+    draggingColEle = null;
+    draggingCol = null;
+    draggingParent = null;
+    dragEnterEle = null;
   }
-  const pinned = rowRenderer.pinned || null;
-  const baseProps = { class: baseClasses('tr', null) };
-  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  const tpl = rowRenderer?.template;
-  if (tpl) {
-    let toRender = tpl(h, {
-      renderedRow: h("tr", { ...props }, children),
+  function handleDragEnter(e) {
+    if (dragEnterEle === e.target)
+      return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    e.dataTransfer.dropEffect = 'move';
+    draggingParent
+      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
+      .forEach((el) => {
+      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
     });
-    if (Array.isArray(toRender)) {
-      toRender = utils.map(toRender, (node) => {
-        if (node.vtag === 'tr') {
-          node.vattrs = mergeProperties({ class: baseClasses('tr', null, true) }, node.vattrs);
-          if (!!node.vchildren) {
-            node.vchildren = utils.map(node.vchildren, (cNode) => {
-              if (['td', 'th'].includes(cNode.vtag.toString())) {
-                cNode.vattrs = mergeProperties({
-                  class: baseClasses(cNode.vtag.toString(), pinned, true),
-                  ref: (th) => {
-                    addVObserver(th, pinned, onColumnPinned);
-                  },
-                }, cNode.vattrs);
-              }
-              return cNode;
-            });
-          }
-        }
-        return node;
-      });
+    dragEnterEle = e.target;
+    if (!dragEnterEle.classList.contains(`${CSSNAMESPACE}__drag-mask`)) {
+      e.dataTransfer.dropEffect = 'none';
+      return;
     }
-    return toRender;
+    dragEnterEle.classList.add(`${CSSNAMESPACE}__drag-mask--active`);
   }
-  return h("tr", { ...props }, children);
-};
-const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned, }) => {
-  function handleColumnOrderClick(e) {
+  function handleDrop(e) {
+    e.stopPropagation();
+    const { colName } = this.dataset;
+    if (colName === draggingCol.prop)
+      return;
+    const cols = store.config.state.columns;
+    let toIndex = cols.findIndex((col) => col.prop === colName);
+    const fromIndex = cols.findIndex((col) => col === draggingCol);
+    if (toIndex < fromIndex &&
+      this.classList.contains(`${CSSNAMESPACE}__drag-mask--end`))
+      toIndex++;
+    if (toIndex > fromIndex &&
+      this.classList.contains(`${CSSNAMESPACE}__drag-mask--start`))
+      toIndex--;
+    if (toIndex === fromIndex)
+      return;
+    onColumnDrop(draggingCol.prop, store.config.state.columns[toIndex].prop, draggingColEle);
+  }
+  // Sort handling
+  function handleColumnSortClick(e) {
     let order;
     switch (column.order) {
       case 'asc':
@@ -480,7 +620,15 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
       default:
         order = 'asc';
     }
-    onColumnOrderClick(order, column.prop, e.target.closest('th'));
+    onColumnSortClick(order, column.prop, e.target.closest('th'));
+  }
+  function isSortable() {
+    return ((!!defaults.sortable && column.sortable !== false) ||
+      (!defaults.sortable && column.sortable === true));
+  }
+  function isDraggable() {
+    return ((!!defaults.draggable && column.draggable !== false) ||
+      (!defaults.draggable && column.draggable === true));
   }
   let extraProps = {};
   if (column.columnProperties) {
@@ -488,7 +636,7 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
   }
   const baseProps = {
     class: {
-      ...baseClasses('th', headRenderer?.pinned),
+      ...headerPinClasses('th', headRenderer?.pinned),
       [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
       [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
       [`${CSSNAMESPACE}__ordered`]: !!column.order,
@@ -500,60 +648,106 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
   if (!content)
     return h(Fragment, null);
   props =
-    Number(props.colspan) > 1
+    Number(props.colSpan) > 1
       ? { ...props, scope: 'colgroup' }
       : { ...props, scope: 'col' };
-  if (column.sortable !== false) {
-    return (h("th", { ...props, "aria-sort": column.order
-        ? column.order === 'asc'
-          ? 'ascending'
-          : 'descending'
-        : 'none', ref: (th) => {
-        if (['end', 'start'].includes(column.pinned))
-          addHObserver(th, column.pinned, onColumnPinned);
-        if (['top', 'bottom'].includes(headRenderer.pinned))
-          addVObserver(th, headRenderer.pinned, onColumnPinned);
-      } },
-      h("button", { class: {
-          [`${CSSNAMESPACE}__order-btn`]: true,
-          [`${CSSNAMESPACE}__cell-content`]: true,
-        }, onClick: handleColumnOrderClick },
-        colheadFootRender(column),
-        !!column.filter && h("nano-icon", { name: "light/filter" }),
-        !!column.order &&
-          (column.order === 'desc' ? (h("nano-icon", { name: "solid/long-arrow-down" })) : (h("nano-icon", { name: "solid/long-arrow-up" }))),
-        h("div", { class: `${CSSNAMESPACE}__status-icons` },
-          h("nano-icon", { name: "light/chevron-down" })))));
+  if (isSortable()) {
+    const sort = column.order
+      ? column.order === 'asc'
+        ? 'ascending'
+        : 'descending'
+      : 'none';
+    props = { ...props, 'aria-sort': sort };
+  }
+  if (isDraggable()) {
+    props = {
+      ...props,
+      draggable: true,
+      onDragStart: (e) => handleDragStart(e, column),
+      onDragOver: (e) => e.preventDefault(),
+      onDragEnd: () => handleDragEnd(),
+    };
   }
   return (h("th", { ...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);
-    } },
-    h("div", { class: `${CSSNAMESPACE}__cell-content` },
+    }, key: column.prop },
+    isDraggable() && [
+      h("div", { class: {
+          [`${CSSNAMESPACE}__drag-mask`]: true,
+          [`${CSSNAMESPACE}__drag-mask--start`]: true,
+        }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
+      h("div", { class: {
+          [`${CSSNAMESPACE}__drag-mask`]: true,
+          [`${CSSNAMESPACE}__drag-mask--end`]: true,
+        }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
+    ],
+    isSortable() ? (h("button", { class: {
+        [`${CSSNAMESPACE}__order-btn`]: true,
+        [`${CSSNAMESPACE}__cell-content`]: true,
+      }, onClick: handleColumnSortClick },
+      colheadFootRender(column),
+      !!column.filter && h("nano-icon", { name: "light/filter" }),
+      !!column.order &&
+        (column.order === 'desc' ? (h("nano-icon", { name: "solid/long-arrow-down" })) : (h("nano-icon", { name: "solid/long-arrow-up" }))),
+      h("div", { class: `${CSSNAMESPACE}__status-icons` },
+        h("nano-icon", { name: "light/chevron-down" })))) : (h("div", { class: `${CSSNAMESPACE}__cell-content` },
       colheadFootRender(column),
-      !!column.filter && h("nano-icon", { name: "light/bars-filter" }))));
+      !!column.filter && h("nano-icon", { name: "light/bars-filter" })))));
+};
+
+// TABLE CELL
+// (tbody > tr > td, tbody > tr > th)
+/**
+ * Renders a cell using a custom renderer if set.
+ * @param rowIndex - the current row index being rendered
+ * @param colIndex - the current column index being rendered
+ * @returns - a JSX node
+ */
+function cellRender(rowIndex, colIndex) {
+  const store = fetchStores();
+  const columns = store.config.state.columns;
+  const tpl = columns[colIndex]?.cellTemplate;
+  const model = colDataModel(rowIndex, colIndex);
+  if (!!model.cellModel && columns[colIndex].type === 'date') {
+    const d = new Date(model.cellModel);
+    if (d instanceof Date && !isNaN(d)) {
+      model.cellModel = !tpl
+        ? `${new Date(model.cellModel).toLocaleDateString()} ${new Date(model.cellModel).toLocaleTimeString()}`
+        : d;
+    }
+  }
+  return tpl ? (tpl(h, model)) : (h(Fragment, null, model.cellModel?.toString()));
+}
+const baseCellClasses = (colIndex, toString = false) => {
+  const store = fetchStores();
+  const column = store.config.state.columns[colIndex];
+  const classes = {
+    [`${CSSNAMESPACE}__td`]: true,
+    [`${CSSNAMESPACE}__ordered`]: !!column.order,
+    [`${CSSNAMESPACE}__pin`]: !!column.pinned,
+    [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
+    [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
+  };
+  if (toString)
+    return classListToStr(classes);
+  return classes;
 };
 const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
   const content = nestedContent || cellRender(rowIndex, colIndex);
   if (!content)
     return h(Fragment, null);
+  let CellType = 'td';
   const store = fetchStores();
   const column = store.config.state.columns[colIndex];
-  let CellType = 'td';
   let props = mergeCellProperties(rowIndex, colIndex, {
-    class: {
-      [`${CSSNAMESPACE}__td`]: true,
-      [`${CSSNAMESPACE}__ordered`]: !!column.order,
-      [`${CSSNAMESPACE}__pin`]: !!column.pinned,
-      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
-      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
-    },
+    class: baseCellClasses(colIndex),
   });
   if (column.rowHeader) {
     props =
-      Number(props.rowspan) > 1
+      Number(props.rowSpan) > 1
         ? { ...props, scope: 'rowgroup' }
         : { ...props, scope: 'row' };
     CellType = 'th';
@@ -564,62 +758,113 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
     h("div", { class: `${CSSNAMESPACE}__cell-content` }, content)));
 };
 
-const detectScrollSpeed = (() => {
-  let lastPos;
-  let newPos;
-  let timer;
-  let delta;
-  const delay = 60; // in "ms" (higher means lower fidelity )
-  const clear = () => {
-    lastPos = null;
-    delta = 0;
+const TableRow = ({ rowRenderer, rowIndex, row, onColumnPinned }, children, utils) => {
+  let extraProps = {};
+  const TableCell = ({ header }, children) => {
+    const cell = h("div", { class: CSSNAMESPACE + '__cell-content' }, children);
+    return header ? h("th", { scope: "row" }, cell) : h("td", null, cell);
   };
-  clear();
-  return () => {
-    newPos = window.scrollY;
-    if (lastPos != null)
-      delta = newPos - lastPos;
-    lastPos = newPos;
-    window.clearTimeout(timer);
-    timer = window.setTimeout(clear, delay);
-    return delta;
+  if (!row) {
+    const model = rowDataModel(rowIndex);
+    row = model.row;
+  }
+  if (rowRenderer?.rowProperties) {
+    extraProps = rowRenderer.rowProperties({ row, rowIndex }) || extraProps;
+  }
+  let pinned;
+  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
+    pinned = rowRenderer.pinned();
+  }
+  const baseProps = { class: headerPinClasses('tr', pinned) };
+  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+  const tpl = rowRenderer?.template;
+  if (tpl) {
+    let toRender = tpl(h, {
+      renderedRow: (h("tr", { ...props, key: row.__uuid }, children)),
+      row,
+      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.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, 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;
+            });
+          }
+        }
+        return node;
+      });
+    }
+    return toRender;
+  }
+  return (h("tr", { ...props, key: row.__uuid }, children));
+};
+const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
+  let extraProps = {};
+  if (rowRenderer.rowProperties) {
+    extraProps = rowRenderer.rowProperties() || {};
+  }
+  const TableCell = ({ header }, children) => {
+    const cell = h("div", { class: CSSNAMESPACE + '__cell-content' }, children);
+    return header !== false ? h("th", { scope: "col" }, cell) : h("td", null, cell);
   };
-})();
-function findScrollParent(element) {
-  let style = getComputedStyle(element);
-  const excludeStaticParent = style.position === 'absolute';
-  const overflowRegex = /(auto|scroll)/;
-  if (style.position === 'fixed')
-    return document.documentElement;
-  for (let parent = element; (parent = parent.parentElement);) {
-    style = getComputedStyle(parent);
-    if (excludeStaticParent && style.position === 'static') {
-      continue;
+  const pinned = rowRenderer.pinned || null;
+  const baseProps = { class: headerPinClasses('tr', null) };
+  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+  const tpl = rowRenderer?.template;
+  if (tpl) {
+    let toRender = tpl(h, {
+      renderedRow: h("tr", { ...props }, children),
+    }, TableCell);
+    if (Array.isArray(toRender)) {
+      toRender = utils.map(toRender, (node) => {
+        if (node.vtag === 'tr') {
+          node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
+          if (!!node.vchildren) {
+            node.vchildren = utils.map(node.vchildren, (cNode) => {
+              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;
+            });
+          }
+        }
+        return node;
+      });
     }
-    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
-      return parent;
+    return toRender;
   }
-  return document.documentElement;
-}
-function isInViewport(el, percentVisible = 100) {
-  const r = el.getBoundingClientRect();
-  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
-  if (!r.bottom &&
-    !r.top &&
-    !r.left &&
-    !r.right &&
-    !r.height &&
-    !r.width &&
-    !r.x &&
-    !r.y)
-    return false;
-  return !(Math.floor(100 - ((r.top >= 0 ? 0 : r.top) / +-r.height) * 100) <
-    percentVisible ||
-    Math.floor(100 - ((r.bottom - windowHeight) / r.height) * 100) <
-      percentVisible);
-}
+  return h("tr", { ...props }, children);
+};
 
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@charset \"UTF-8\";nano-table{display:block;width:100%;--max-col-width:200px;--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--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(--th-padding-top) var(--th-padding-bottom);--foot-th-padding-h:var(--th-padding-start) var(--th-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__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{font-weight:800;background:rgba(var(--head-bg-rgb), 90%);font-size:var(--thead-font-size);border-block-start:none}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{font-weight:800;border-block-end: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 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}.sm .nano-tbl th[scope=row]{max-width:65vw !important}.nano-tbl__pin{position:sticky;z-index:1}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s}.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}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width)}.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{z-index:3}.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}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5;border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6}.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 .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, 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)}";
 
 let id = 0;
 const Table = class {
@@ -629,16 +874,18 @@ const Table = class {
     this.nanoTblReady = createEvent(this, "nanoTblReady", 7);
     this.nanoTblBeforeSort = createEvent(this, "nanoTblBeforeSort", 7);
     this.nanoTblAfterSort = createEvent(this, "nanoTblAfterSort", 7);
+    this.nanoTblColDrag = createEvent(this, "nanoTblColDrag", 7);
+    this.nanoTblColDrop = createEvent(this, "nanoTblColDrop", 7);
     this.nanoTblBeforeFilter = createEvent(this, "nanoTblBeforeFilter", 7);
     this.nanoTblAfterFilter = createEvent(this, "nanoTblAfterFilter", 7);
     this.nanoTblBeforeSearch = createEvent(this, "nanoTblBeforeSearch", 7);
     this.nanoTblAfterSearch = createEvent(this, "nanoTblAfterSearch", 7);
     this.debounceSetLoading = (l) => {
-      this._loading = !!this.store.data.state.rows.length ? l : true;
+      this._loading = l;
     };
     this.renderId = 'tbl-' + id++;
     this.filters = [];
-    this.currentFilters = '';
+    this.currentFilters = '[]';
     this.currentSort = '';
     this.blockIos = new WeakMap();
     this.blockHeights = [];
@@ -646,6 +893,23 @@ const Table = class {
     // Scroll / IO used for hiding / showing blocks
     this.ignoreIO = true;
     this._isReady = false;
+    this.colDrag = (column) => {
+      this.nanoTblColDrag.emit({ column });
+    };
+    this.colDrop = (fromCol, toCol) => {
+      const cols = this.store.config.state.columns;
+      const toIndex = cols.findIndex((col) => col.prop === toCol);
+      const fromIndex = cols.findIndex((col) => col.prop === fromCol);
+      const dropEvent = this.nanoTblColDrop.emit({
+        fromCol,
+        toCol,
+        fromIndex,
+        toIndex,
+      });
+      if (dropEvent.defaultPrevented)
+        return;
+      this.store.config.state.columns = arrMove(fromIndex, toIndex, cols);
+    };
     /**
      * Start a sort - can be cancelled by `preventDefault`
      * @param order - column order
@@ -701,7 +965,7 @@ const Table = class {
           // 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 realsies - if the block IS visible.
+          // 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*
@@ -734,6 +998,10 @@ const Table = class {
         this.tableEle.classList.toggle(`${CSSNAMESPACE}__pinned--${key}`, applied);
       });
     };
+    this.handleResizeChange = (e) => {
+      this.tableWrapperEle.className = '';
+      this.tableWrapperEle.classList.add(...(e.target.className + ' ' + `${CSSNAMESPACE}__wrap`).split(' '));
+    };
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
@@ -749,6 +1017,8 @@ const Table = class {
     this.searchTerm = undefined;
     this.customFilterFn = undefined;
     this.customSortFn = undefined;
+    this.defaultSort = true;
+    this.defaultColDraggable = false;
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
     this.measureHeight = 0;
@@ -775,9 +1045,8 @@ const Table = class {
       this.currentFilters = '';
       this.currentSort = '';
       await this.columnInit();
-      if (!this.isReady) {
+      if (!this.isReady)
         this.setInitialBlockDimension();
-      }
       this.loading = false;
     });
   }
@@ -825,6 +1094,14 @@ const Table = class {
       this.filters = [];
     return this.filterStart(filters, additive);
   }
+  /** Remove filters from a column
+   * @param columnNames - the filters to apply
+   * @returns a promise which resolves when complete
+   */
+  async removeFilters(columnNames) {
+    this.filters = this.filters.filter((f) => !columnNames.includes(f.prop));
+    return this.filterStart();
+  }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
     if (!el)
@@ -844,13 +1121,13 @@ const Table = class {
     if (this.isReady)
       requestAnimationFrame(() => this.handleReady());
   }
+  // Private Logic
   // Listeners
   scrollListener() {
     // see explanation in `setupBlockIO`
     const speed = detectScrollSpeed();
     this.scrollSpeed = speed < 0 ? speed * -1 : speed;
   }
-  // Logic
   handleReady() {
     const hash = window.location.hash;
     if (hash.length > 1) {
@@ -1084,19 +1361,20 @@ const Table = class {
   processSlots() {
     // see if we have slot content
     if (!this.caption && !this.host.querySelector('[slot="caption"]')) {
-      console.error('For accessibility you must set a `title` prop or use the `caption` slot');
+      console.error('For accessibility you must set a `caption` prop or use the `caption` slot');
     }
   }
   // Component lifecycle
   async componentWillLoad() {
+    this.scrollParent = findScrollParent(this.host);
     this.store = await generateStore(this.host, this.columns, this.scrollParent);
     await this.handleRowsChange();
     this.processSlots();
-    this.setBlocks();
     this.store.data.onChange('rows', () => this.setBlocks());
+    this.setBlocks();
   }
   connectedCallback() {
-    readTask(() => (this.scrollParent = findScrollParent(this.host)));
+    this.scrollParent = findScrollParent(this.host);
   }
   componentDidLoad() {
     this.setInitialBlockDimension();
@@ -1116,15 +1394,18 @@ const Table = class {
   }
   render() {
     this.blockElements = [];
-    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md", class: "sm md" }, h("div", { class: `${CSSNAMESPACE}__wrap` }, 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", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange }), h("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div) }, 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-readonly": this.type === 'table' ? 'true' : 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: {
         [`${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, onColumnOrderClick: this.sortStart, onColumnPinned: this.handleColumnPinned }),
-    ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h("nano-skeleton", null) })))))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+      h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, onColumnPinned: this.handleColumnPinned, onColumnDrag: this.colDrag, onColumnDrop: this.colDrop, defaults: {
+          sortable: this.defaultSort,
+          draggable: this.defaultColDraggable,
+        } }),
+    ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (h("tr", null, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
         this.setupBlockIO(tb, blockIndex);
       }, class: {
@@ -1132,15 +1413,18 @@ const Table = class {
         [`${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, row: row }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+      return (h(TableRow, { rowRenderer: this.rowRender, row: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
     })) : (h("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex),
       } }))))), 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, onColumnOrderClick: this.sortStart }),
+      h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnSortClick: this.sortStart, defaults: {
+          sortable: this.defaultSort,
+          draggable: this.defaultColDraggable,
+        } }),
     ]))))), !!this.blocks.length && (h("nano-spinner", { type: "circle", class: {
         [`${CSSNAMESPACE}__spinner`]: true,
         [`${CSSNAMESPACE}__spinner--show`]: this._loading,
-      } }))))));
+      } })))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
@@ -1153,4 +1437,4 @@ Table.style = tableCss;
 
 export { Table as T, createWorker as c };
 
-//# sourceMappingURL=nano-table-c8ef2276.js.map
+//# sourceMappingURL=nano-table-e2405350.js.map