@nanoporetech-digital/components 3.4.0 → 3.5.0

package/dist/custom-elements/index.js

@@ -2283,6 +2283,7 @@ const proxyCustomElement = (Cstr, compactMeta) => {
     Cstr.is = cmpMeta.$tagName$;
     return proxyComponent(Cstr, cmpMeta);
 };
+const Fragment$1 = (_, children) => children;
 const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
     if (listeners) {
         listeners.map(([flags, name, method]) => {
@@ -10510,6 +10511,287 @@ const DatePicker = class extends H {
   static get style() { return datePickerCss; }
 };
 
+function capitalise(value) {
+  if (!value)
+    return '';
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function mediumDate(date) {
+  if (!date)
+    return undefined;
+  return new Date(date).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+function currency(amount = 0, currencyCode = 'USD') {
+  currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currencyCode,
+  }).format(amount);
+}
+const Demo = class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.order = {
+      checks: [
+        {
+          name: 'Compliance',
+          external_id: 'CO',
+          status: 'complete',
+          account_info: {
+            name: 'Jeongmin Song',
+            email: 'js2957@cornell.edu',
+            address_line_1: '930 Campus Road',
+            address_line_2: 'Veterinary Medical Center C4 109',
+            address_postcode: '14853',
+            address_city: 'Ithaca',
+            address_region: 'New York',
+            address_country: 'US',
+          },
+          individual_name_compliance_information: {
+            table: {
+              names: [],
+              addresses: [],
+              match: false,
+              false_positive: null,
+            },
+          },
+          organization_compliance_information: {
+            table: {
+              names: [],
+              addresses: [],
+              match: false,
+              false_positive: null,
+            },
+          },
+          checks: [
+            {
+              label: 'Compliance check',
+              external_id: 'compliance_check',
+              item_type: 'pass/fail/escalate',
+              answer: 'pass',
+            },
+          ],
+          further_information: [],
+          attachments: [],
+          notes: [],
+        },
+      ],
+      orderId: '00886434',
+      createdAt: '2022-12-09T15:57:50',
+      updatedAt: '2022-12-09T16:02:29',
+      status: 'Processing',
+      subStatus: null,
+      currency: 'USD',
+      customerPaymentMethod: 'CC-USD',
+      paymentPlatform: 'Shop',
+      dataAreaId: 'OXUS',
+      defaultShippingWarehouse: null,
+      deliveryContact: 'Jeongmin Song',
+      deliveryMode: null,
+      deliveryName: 'Cornell University',
+      deliveryTerms: null,
+      invoiceAccountNumber: 'C038330',
+      orderAccountNumber: 'C038330',
+      orderAccountName: 'Cornell University',
+      originalLeadTime: null,
+      salesDate: '2022-12-09T15:57:50',
+      salesName: 'Cornell University',
+      salesOrigin: 'Shop',
+      salesOriginName: 'Main USD Store View',
+      customerReference: '',
+      purchaseOrder: null,
+      additionalDocuments: [],
+      total: 860,
+      shippingAmount: 50,
+      taxAmount: 0,
+      projectId: null,
+      deliveryPhoneNumber: '+16072533722',
+      invoicePhoneNumber: '+16072533722',
+      quoteNumber: null,
+      customerType: 'N/A',
+      invoiceAccountEmail: 'js2957@cornell.edu',
+      partnerReference: null,
+      sentToD365: false,
+      sentToD365Status: 'unsent',
+      orderAccountEmail: 'js2957@cornell.edu',
+      controllingAccountNumber: 'C038330',
+      controllingAccountEmail: 'js2957@cornell.edu',
+      deliveryAddress: {
+        street: ['930 Campus Road, Veterinary Medical Center C4 109'],
+        city: 'Ithaca',
+        postcode: '14853',
+        region: 'New York',
+        regionCode: 'NY',
+        countryCode: 'US',
+      },
+      invoiceAddress: {
+        street: ['930 Campus Road, Veterinary Medical Center C4 109'],
+        city: 'Ithaca',
+        postcode: '14853',
+        region: 'New York',
+        regionCode: 'NY',
+        countryCode: 'US',
+      },
+      shopOrderLines: [
+        {
+          name: 'Flongle Flow Cell (R9.4.1)',
+          sku: 'FLO-FLG001',
+          quantity: 1,
+          price: 810,
+          total: 810,
+          createdAt: '2022-12-09T15:57:50',
+          updatedAt: '2022-12-09T15:57:50',
+          maskSku: 'FLO-FLG001',
+          productType: 'bundle',
+          salesTag: 'FLGExpSP',
+          requestedShippingDate: null,
+          discount: 0,
+          discountPercentage: 0,
+          get finalSku() {
+            return this.maskSku || this.sku;
+          },
+          includedItems: [
+            {
+              name: 'Flongle Flow Cell (R9.4.1)',
+              sku: 'FLO-FLG001D',
+              quantity: 12,
+              price: 66,
+              total: 792,
+              createdAt: '2022-12-09T15:57:50',
+              updatedAt: '2022-12-09T15:57:50',
+              maskSku: 'FLO-FLG001',
+              productType: 'simple',
+              salesTag: 'FLGExpSP',
+              requestedShippingDate: '2022-12-27T00:00:00',
+              discount: 0,
+              discountPercentage: 0,
+            },
+            {
+              name: 'Flongle Flow Cell Priming Kit',
+              sku: 'EXP-FSE001',
+              quantity: 1,
+              price: 18,
+              total: 18,
+              createdAt: '2022-12-09T15:57:50',
+              updatedAt: '2022-12-09T15:57:50',
+              maskSku: '',
+              productType: 'simple',
+              salesTag: 'FLGExpSP',
+              requestedShippingDate: '2022-12-27T00:00:00',
+              discount: 0,
+              discountPercentage: 0,
+            },
+          ],
+        },
+        {
+          name: 'Carriage - Device shipment',
+          sku: 'FREIGHT',
+          quantity: 1,
+          price: 50,
+          total: 50,
+          createdAt: '2022-12-09T15:57:50',
+          updatedAt: '2022-12-09T15:57:50',
+          maskSku: '',
+          productType: 'virtual',
+          salesTag: null,
+          requestedShippingDate: '2022-12-27T00:00:00',
+          discount: 0,
+          discountPercentage: 0,
+          get finalSku() {
+            return this.maskSku || this.sku;
+          },
+        },
+      ],
+      orderLines: [],
+      pickedItems: [],
+      packedItems: [],
+      trackingNumbers: [],
+      trackingUpdates: [],
+      ecoOrder: false,
+      revenueOrder: false,
+    };
+  }
+  lineItemTotal(order) {
+    if (!order || !order.shopOrderLines?.length)
+      return;
+    let total = 0;
+    order.shopOrderLines.forEach((itm) => {
+      if (itm.status !== 'cancelled')
+        total += itm.total;
+    });
+    return total;
+  }
+  render() {
+    return (h$1(Host$1, null, h$1("nano-table", { rowRender: {
+        template: (_, c, TableCell) => [
+          c.renderedRow,
+          c.row.includedItems?.length ? (c.row.includedItems?.map((item) => {
+            return (h$1("tr", { class: "child-row" }, h$1(TableCell, { header: true }, item.name), h$1(TableCell, null, capitalise(c.row.status || this.order.status)), h$1(TableCell, null, capitalise(item.sku)), h$1(TableCell, null, capitalise(item.salesTag)), h$1(TableCell, null, mediumDate(item.requestedShippingDate))));
+          })) : (h$1(Fragment$1, null)),
+        ].flat(1),
+      }, columns: [
+        {
+          title: 'Name',
+          prop: 'name',
+          pinned: 'start',
+          rowHeader: true,
+        },
+        {
+          title: 'Status',
+          prop: 'status',
+          cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),
+        },
+        {
+          title: 'SKU',
+          prop: 'finalSku',
+        },
+        {
+          title: 'Sales tag',
+          prop: 'salesTag',
+          cellTemplate: (_, c) => c.cellModel || 'None',
+        },
+        {
+          title: 'Requested ship date',
+          prop: 'requestedShippingDate',
+          cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',
+        },
+        {
+          title: 'Quantity',
+          prop: 'quantity',
+        },
+        {
+          title: 'Unit price',
+          prop: 'price',
+          cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
+        },
+        {
+          title: 'Discount %',
+          prop: 'discountPercentage',
+          cellTemplate: (_, c) => c.cellModel || 0,
+        },
+        {
+          title: 'Line value',
+          prop: 'total',
+          cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
+        },
+      ], rows: this.order.shopOrderLines, caption: `List of order line items found within order ${this.order.orderId}`, showFooter: true, footRender: {
+        pinned: 'bottom',
+        template: () => [
+          h$1("tr", null, h$1("td", { colSpan: 6 }, "\u00A0"), h$1("th", { scope: "row", class: "tbl__pin nano-tbl__pin--end", colSpan: 3 }, h$1("div", { class: "nano-tbl__cell-content order-lines__total" }, h$1("span", { class: "order-lines__total--label" }, "Sub total:"), h$1("span", { class: "order-lines__total--num" }, currency(this.lineItemTotal(this.order), this.order.currency))))),
+          h$1("tr", null, h$1("td", { colSpan: 6 }, "\u00A0"), h$1("th", { scope: "row", class: "tbl__pin nano-tbl__pin--end", colSpan: 3 }, h$1("div", { class: "nano-tbl__cell-content order-lines__total" }, h$1("span", { class: "order-lines__total--label" }, "Total order tax:"), h$1("span", { class: "order-lines__total--num" }, currency(this.order.taxAmount, this.order.currency))))),
+          h$1("tr", null, h$1("td", { colSpan: 6 }, "\u00A0"), h$1("th", { scope: "row", class: "tbl__pin nano-tbl__pin--end", colSpan: 3 }, h$1("div", { class: "nano-tbl__cell-content order-lines__total" }, h$1("span", { class: "order-lines__total--label" }, "Total on order placement:"), h$1("span", { class: "order-lines__total--num" }, currency(this.order.total, this.order.currency))))),
+        ],
+      } })));
+  }
+  static get style() { return ":host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }"; }
+};
+
 /**
  * Quality of life for transition handling.
  * Adds / removes transitionend events. Resolves on complete
@@ -25162,16 +25444,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);
@@ -25192,7 +25511,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) {
@@ -25203,7 +25522,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) {
@@ -25214,7 +25533,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);
   }
 }
 
@@ -25311,19 +25630,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
@@ -25333,26 +25639,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;
@@ -25367,13 +25661,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',
@@ -25383,6 +25677,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;
@@ -25396,11 +25696,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',
@@ -25409,64 +25712,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;
-  }
-  let pinned;
-  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
-    pinned = rowRenderer.pinned();
+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;
   }
-  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() || {};
+  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);
+  }
+  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':
@@ -25478,7 +25900,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) {
@@ -25486,7 +25916,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,
@@ -25498,60 +25928,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/bars-filter" }))));
+      !!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" })))));
+};
+
+// 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';
@@ -25562,62 +26038,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$1 = 0;
 const Table = class extends H {
@@ -25628,16 +26155,18 @@ const Table = class extends H {
     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$1++;
     this.filters = [];
-    this.currentFilters = '';
+    this.currentFilters = '[]';
     this.currentSort = '';
     this.blockIos = new WeakMap();
     this.blockHeights = [];
@@ -25645,6 +26174,23 @@ const Table = class extends H {
     // 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
@@ -25700,7 +26246,7 @@ const Table = class extends H {
           // 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*
@@ -25733,6 +26279,10 @@ const Table = class extends H {
         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;
@@ -25748,6 +26298,8 @@ const Table = class extends H {
     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;
@@ -25774,9 +26326,8 @@ const Table = class extends H {
       this.currentFilters = '';
       this.currentSort = '';
       await this.columnInit();
-      if (!this.isReady) {
+      if (!this.isReady)
         this.setInitialBlockDimension();
-      }
       this.loading = false;
     });
   }
@@ -25824,6 +26375,14 @@ const Table = class extends H {
       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)
@@ -25843,13 +26402,13 @@ const Table = class extends H {
     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) {
@@ -26083,19 +26642,20 @@ const Table = class extends H {
   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();
@@ -26115,15 +26675,18 @@ const Table = class extends H {
   }
   render() {
     this.blockElements = [];
-    return (h$1(Host$1, null, h$1("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h$1("nano-resize-observe", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md", class: "sm md" }, h$1("div", { class: `${CSSNAMESPACE}__wrap` }, h$1("nano-progress-bar", { indeterminate: true, class: {
+    return (h$1(Host$1, null, h$1("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h$1("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$1("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div) }, h$1("nano-progress-bar", { indeterminate: true, class: {
         [`${CSSNAMESPACE}__progress-bar`]: true,
         [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
       } }), h$1("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$1("caption", { class: {
         [`${CSSNAMESPACE}__caption`]: true,
         [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
       }, id: 'table-caption-' + this.renderId }, h$1("slot", { name: "caption" }, this.caption)), h$1("thead", null, h$1(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
-      h$1(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnOrderClick: this.sortStart, onColumnPinned: this.handleColumnPinned }),
-    ]))), this._loading && !this.blocks.length && (h$1("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h$1("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h$1("nano-skeleton", null) })))))))), this.blocks.map((block, blockIndex) => (h$1("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+      h$1(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$1("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h$1("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h$1("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (h$1("tr", null, h$1("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h$1("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h$1("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (h$1("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
         this.setupBlockIO(tb, blockIndex);
       }, class: {
@@ -26131,15 +26694,18 @@ const Table = class extends H {
         [`${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$1(TableRow, { rowRenderer: this.rowRender, row: row }, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+      return (h$1(TableRow, { rowRenderer: this.rowRender, row: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
     })) : (h$1("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex),
       } }))))), this.showFooter && (h$1("tfoot", null, h$1(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
-      h$1(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnOrderClick: this.sortStart }),
+      h$1(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnSortClick: this.sortStart, defaults: {
+          sortable: this.defaultSort,
+          draggable: this.defaultColDraggable,
+        } }),
     ]))))), !!this.blocks.length && (h$1("nano-spinner", { type: "circle", class: {
         [`${CSSNAMESPACE}__spinner`]: true,
         [`${CSSNAMESPACE}__spinner--show`]: this._loading,
-      } }))))));
+      } })))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -26332,6 +26898,7 @@ const NanoCheckboxGroup = /*@__PURE__*/proxyCustomElement(CheckboxGroup, [6,"nan
 const NanoDatalist = /*@__PURE__*/proxyCustomElement(DataList, [1,"nano-datalist",{"selected":[1040],"dropDownConfig":[6160],"options":[16],"input":[1],"type":[1],"activeOptions":[2064],"open":[1028],"disableFilter":[4,"disable-filter"],"disabled":[4],"actvOptEles":[32],"connectedInput":[32],"inputLabel":[32],"hasNoResult":[32],"shouldOpen":[32],"canOpen":[32],"optionIds":[32]}]);
 const NanoDateInput = /*@__PURE__*/proxyCustomElement(DateInput, [6,"nano-date-input",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"helperText":[4,"helper-text"],"helperTextFormat":[16],"floatLabel":[4,"float-label"],"name":[1],"readonly":[4],"size":[2],"form":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"disabled":[4],"color":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"label":[1],"placeholder":[1025],"value":[1537],"validateOn":[1,"validate-on"],"showInlineError":[516,"show-inline-error"],"dateOrder":[1,"date-order"],"required":[4],"min":[1],"max":[1],"hideLabel":[4,"hide-label"],"picker":[4],"initialPickerDate":[1,"initial-picker-date"],"pickerOpen":[1540,"picker-open"],"closeAfterPicked":[4,"close-after-picked"],"dropDownConfig":[6160],"dateValue":[2064],"isDateDisabled":[16],"pattern":[32],"inputValue":[32],"_invalid":[32]}]);
 const NanoDatePicker = /*@__PURE__*/proxyCustomElement(DatePicker, [1,"nano-date-picker",{"selectedDate":[1025,"selected-date"],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"color":[1],"isDateDisabled":[16],"isModal":[4,"is-modal"],"firstFocusEle":[16],"activeFocus":[32],"focusedDay":[32]}]);
+const NanoDemo = /*@__PURE__*/proxyCustomElement(Demo, [1,"nano-demo"]);
 const NanoDetails = /*@__PURE__*/proxyCustomElement(Details, [1,"nano-details",{"label":[1],"open":[1540],"noHandle":[4,"no-handle"],"iconRotation":[2,"icon-rotation"],"color":[1],"isLoading":[32]}]);
 const NanoDialog = /*@__PURE__*/proxyCustomElement(Dialog, [1,"nano-dialog",{"showRibbon":[4,"show-ribbon"],"open":[1540],"label":[1],"noHeader":[4,"no-header"],"noFooter":[4,"no-footer"],"noUserDismiss":[4,"no-user-dismiss"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"hoist":[4],"isVisible":[32],"noDismiss":[32],"hasFooter":[32]}]);
 const NanoDrawer = /*@__PURE__*/proxyCustomElement(Drawer, [1,"nano-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"type":[1],"contentSelector":[1,"content-selector"],"hasFooter":[32],"isVisible":[32]}]);
@@ -26366,7 +26933,7 @@ const NanoSticker = /*@__PURE__*/proxyCustomElement(Sticker, [1,"nano-sticker",{
 const NanoTab = /*@__PURE__*/proxyCustomElement(Tab, [1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4]}]);
 const NanoTabContent = /*@__PURE__*/proxyCustomElement(TabPanel, [1,"nano-tab-content",{"name":[513],"active":[516]}]);
 const NanoTabGroup = /*@__PURE__*/proxyCustomElement(TabGroup, [1,"nano-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"color":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"disableSwipe":[4,"disable-swipe"],"hasScrollControls":[32],"hideControlRight":[32],"hideControlLeft":[32],"tab":[32]},[[0,"nanoTabClose","handleTabClose"]]]);
-const NanoTable = /*@__PURE__*/proxyCustomElement(Table, [4,"nano-table",{"type":[1],"caption":[1],"showCaption":[4,"show-caption"],"loading":[6148],"placeholderSize":[2,"placeholder-size"],"rows":[16],"columns":[1040],"headRender":[16],"rowRender":[16],"footRender":[16],"showFooter":[4,"show-footer"],"perBlock":[2,"per-block"],"blocksLength":[2050,"blocks-length"],"searchTerm":[1,"search-term"],"customFilterFn":[16],"customSortFn":[16],"_loading":[32],"blocks":[32],"activeBlocks":[32],"measureHeight":[32]},[[9,"scroll","scrollListener"]]]);
+const NanoTable = /*@__PURE__*/proxyCustomElement(Table, [4,"nano-table",{"type":[1],"caption":[1],"showCaption":[4,"show-caption"],"loading":[6148],"placeholderSize":[2,"placeholder-size"],"rows":[16],"columns":[1040],"headRender":[16],"rowRender":[16],"footRender":[16],"showFooter":[4,"show-footer"],"perBlock":[2,"per-block"],"blocksLength":[2050,"blocks-length"],"searchTerm":[1,"search-term"],"customFilterFn":[16],"customSortFn":[16],"defaultSort":[4,"default-sort"],"defaultColDraggable":[4,"default-col-draggable"],"_loading":[32],"blocks":[32],"activeBlocks":[32],"measureHeight":[32]},[[9,"scroll","scrollListener"]]]);
 const NanoTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1]}]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
@@ -26384,6 +26951,7 @@ const defineCustomElements = (opts) => {
   NanoDatalist,
   NanoDateInput,
   NanoDatePicker,
+  NanoDemo,
   NanoDetails,
   NanoDialog,
   NanoDrawer,
@@ -28515,7 +29083,7 @@ const index = /*#__PURE__*/Object.freeze({
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';
-const workerPath = /*@__PURE__*/new URL('./assets/table.worker-1fd13775.js', import.meta.url).href;
+const workerPath = /*@__PURE__*/new URL('./assets/table.worker-e9fb087e.js', import.meta.url).href;
 const blob = new Blob(['importScripts("' + workerPath + '")'], { type: 'text/javascript' });
 const url = URL.createObjectURL(blob);
 const worker = /*@__PURE__*/createWorker(url, workerName, workerMsgId);
@@ -28529,6 +29097,6 @@ const table_worker = /*#__PURE__*/Object.freeze({
   worker: worker
 });
 
-export { NanoAccordion, NanoAlert, NanoAlgolia, NanoAlgoliaFilter, NanoAlgoliaInput, NanoAlgoliaPagination, NanoAlgoliaResults, NanoAspectRatio, NanoCheckbox, NanoCheckboxGroup, NanoDatalist, NanoDateInput, NanoDatePicker, NanoDetails, NanoDialog, NanoDrawer, NanoDropdown, NanoFieldValidator, NanoFileUpload, NanoGlobalNav, NanoGlobalNavUserProfile, NanoGlobalSearchResults, NanoGrid, NanoGridItem, NanoHero, NanoIcon, NanoIconButton, NanoImg, NanoInput, NanoMenu, NanoMenuDrawer, NanoNavItem, NanoOption, NanoProgressBar, NanoRange, NanoRating, NanoResizeObserve, NanoSelect, NanoSkeleton, NanoSlide, NanoSlides, NanoSpinner, NanoSplitPane, NanoSticker, NanoTab, NanoTabContent, NanoTabGroup, NanoTable, NanoTooltip, defineCustomElements, nanoCreateDialog, debounce$2 as nanoDebounce, getTabbableElements as nanoGetTabElements, nanoShowAlert, nanoShowToast, throttle as nanoThrottle, setAssetPath, setPlatformOptions };
+export { NanoAccordion, NanoAlert, NanoAlgolia, NanoAlgoliaFilter, NanoAlgoliaInput, NanoAlgoliaPagination, NanoAlgoliaResults, NanoAspectRatio, NanoCheckbox, NanoCheckboxGroup, NanoDatalist, NanoDateInput, NanoDatePicker, NanoDemo, NanoDetails, NanoDialog, NanoDrawer, NanoDropdown, NanoFieldValidator, NanoFileUpload, NanoGlobalNav, NanoGlobalNavUserProfile, NanoGlobalSearchResults, NanoGrid, NanoGridItem, NanoHero, NanoIcon, NanoIconButton, NanoImg, NanoInput, NanoMenu, NanoMenuDrawer, NanoNavItem, NanoOption, NanoProgressBar, NanoRange, NanoRating, NanoResizeObserve, NanoSelect, NanoSkeleton, NanoSlide, NanoSlides, NanoSpinner, NanoSplitPane, NanoSticker, NanoTab, NanoTabContent, NanoTabGroup, NanoTable, NanoTooltip, defineCustomElements, nanoCreateDialog, debounce$2 as nanoDebounce, getTabbableElements as nanoGetTabElements, nanoShowAlert, nanoShowToast, throttle as nanoThrottle, setAssetPath, setPlatformOptions };
 
 //# sourceMappingURL=index.js.map