@nanoporetech-digital/components 5.1.2 → 5.2.0

package/dist/collection/components/table/table.header.js

@@ -3,8 +3,8 @@
  */
 import { Fragment, h } from '@stencil/core';
 import { CSSNAMESPACE } from './table.constants';
-import { addHObserver, addVObserver, colheadFootRender, headerPinClasses, mergeProperties, } from './table.utils';
-export const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, defaults, }) => {
+import { colheadFootRender, headerPinClasses, mergeProperties, } from './table.utils';
+export const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
   // Sort handling
   function handleColumnSortClick(e) {
     let order;
@@ -29,7 +29,7 @@ export const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumn
     extraProps = column.columnProperties(column) || extraProps;
   }
   const baseProps = {
-    class: Object.assign(Object.assign({}, headerPinClasses('th', headRenderer === null || headRenderer === void 0 ? void 0 : headRenderer.pinned)), { [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start', [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end', [`${CSSNAMESPACE}__ordered`]: !!column.order, [`${CSSNAMESPACE}__filtered`]: column.filter !== undefined && column.filter !== null }),
+    class: Object.assign(Object.assign({}, headerPinClasses('th', column.pinned)), { [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start', [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end', [`${CSSNAMESPACE}__ordered`]: !!column.order, [`${CSSNAMESPACE}__filtered`]: column.filter !== undefined && column.filter !== null }),
   };
   let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
   const content = colheadFootRender(column);
@@ -46,12 +46,7 @@ export const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumn
       : 'none';
     props = Object.assign(Object.assign({}, props), { 'aria-sort': sort });
   }
-  return (h("th", Object.assign({}, props, { ref: (th) => {
-      if (['end', 'start'].includes(column.pinned))
-        addHObserver(th, column.pinned, onColumnPinned);
-      if (['top', 'bottom'].includes(headRenderer.pinned))
-        addVObserver(th, headRenderer.pinned, onColumnPinned);
-    }, key: column.prop }), isSortable() ? (h("button", { class: {
+  return (h("th", Object.assign({}, props, { key: column.prop }), isSortable() ? (h("button", { class: {
       [`${CSSNAMESPACE}__order-btn`]: true,
       [`${CSSNAMESPACE}__cell-content`]: true,
     }, onClick: handleColumnSortClick }, colheadFootRender(column), column.filter !== undefined && column.filter !== null && (h("nano-icon", { name: "light/filter" })), !!column.order &&

package/dist/collection/components/table/table.header.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.header.js","sourceRoot":"","sources":["../../../src/components/table/table.header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  addHObserver,\n  addVObserver,\n  colheadFootRender,\n  headerPinClasses,\n  mergeProperties,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\n// TABLE HEADERS\n// (thead > tr > th, tfoot > tr > th)\n\ntype TableColHeadProps = {\n  column: TableTypes.ColumnConfig;\n  headRenderer: TableTypes.HeadFootRenderer;\n  onColumnSortClick?: (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  onColumnPinned?: TableTypes.PinnedCb;\n  defaults: { sortable?: boolean };\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n  column,\n  headRenderer,\n  onColumnSortClick,\n  onColumnPinned,\n  defaults,\n}) => {\n  // Sort handling\n\n  function handleColumnSortClick(e: MouseEvent & { target: HTMLElement }) {\n    let order;\n    switch (column.order) {\n      case 'asc':\n        order = 'desc';\n        break;\n      case 'desc':\n        order = null;\n        break;\n      default:\n        order = 'asc';\n    }\n    onColumnSortClick(order, column.prop, e.target.closest('th'));\n  }\n\n  function isSortable() {\n    return (\n      (!!defaults.sortable && column.sortable !== false) ||\n      (!defaults.sortable && column.sortable === true)\n    );\n  }\n\n  let extraProps = {};\n  if (column.columnProperties) {\n    extraProps = column.columnProperties(column) || extraProps;\n  }\n\n  const baseProps = {\n    class: {\n      ...headerPinClasses('th', headRenderer?.pinned),\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__filtered`]:\n        column.filter !== undefined && column.filter !== null,\n    },\n  };\n  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const content = colheadFootRender(column);\n\n  if (!content) return <Fragment></Fragment>;\n\n  props =\n    Number((props as TableTypes.CellProps).colSpan) > 1\n      ? { ...props, scope: 'colgroup' }\n      : { ...props, scope: 'col' };\n\n  if (isSortable()) {\n    const sort = column.order\n      ? column.order === 'asc'\n        ? 'ascending'\n        : 'descending'\n      : 'none';\n\n    props = { ...props, 'aria-sort': sort };\n  }\n\n  return (\n    <th\n      {...props}\n      ref={(th) => {\n        if (['end', 'start'].includes(column.pinned))\n          addHObserver(th, column.pinned, onColumnPinned);\n        if (['top', 'bottom'].includes(headRenderer.pinned))\n          addVObserver(th, headRenderer.pinned, onColumnPinned);\n      }}\n      key={column.prop}\n    >\n      {isSortable() ? (\n        <button\n          class={{\n            [`${CSSNAMESPACE}__order-btn`]: true,\n            [`${CSSNAMESPACE}__cell-content`]: true,\n          }}\n          onClick={handleColumnSortClick}\n        >\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/filter\" />\n          )}\n          {!!column.order &&\n            (column.order === 'desc' ? (\n              <nano-icon name=\"solid/long-arrow-down\" />\n            ) : (\n              <nano-icon name=\"solid/long-arrow-up\" />\n            ))}\n          <div class={`${CSSNAMESPACE}__status-icons`}>\n            <nano-icon name=\"light/chevron-down\" />\n          </div>\n        </button>\n      ) : (\n        <div class={`${CSSNAMESPACE}__cell-content`}>\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/bars-filter\" />\n          )}\n        </div>\n      )}\n    </th>\n  );\n};\n"]}
+{"version":3,"file":"table.header.js","sourceRoot":"","sources":["../../../src/components/table/table.header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  colheadFootRender,\n  headerPinClasses,\n  mergeProperties,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\n// TABLE HEADERS\n// (thead > tr > th, tfoot > tr > th)\n\ntype TableColHeadProps = {\n  column: TableTypes.ColumnConfig;\n  headRenderer: TableTypes.HeadFootRenderer;\n  onColumnSortClick?: (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  defaults: { sortable?: boolean };\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n  column,\n  onColumnSortClick,\n  defaults,\n}) => {\n  // Sort handling\n\n  function handleColumnSortClick(e: MouseEvent & { target: HTMLElement }) {\n    let order;\n    switch (column.order) {\n      case 'asc':\n        order = 'desc';\n        break;\n      case 'desc':\n        order = null;\n        break;\n      default:\n        order = 'asc';\n    }\n    onColumnSortClick(order, column.prop, e.target.closest('th'));\n  }\n\n  function isSortable() {\n    return (\n      (!!defaults.sortable && column.sortable !== false) ||\n      (!defaults.sortable && column.sortable === true)\n    );\n  }\n\n  let extraProps = {};\n  if (column.columnProperties) {\n    extraProps = column.columnProperties(column) || extraProps;\n  }\n\n  const baseProps = {\n    class: {\n      ...headerPinClasses('th', column.pinned),\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__filtered`]:\n        column.filter !== undefined && column.filter !== null,\n    },\n  };\n  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const content = colheadFootRender(column);\n\n  if (!content) return <Fragment></Fragment>;\n\n  props =\n    Number((props as TableTypes.CellProps).colSpan) > 1\n      ? { ...props, scope: 'colgroup' }\n      : { ...props, scope: 'col' };\n\n  if (isSortable()) {\n    const sort = column.order\n      ? column.order === 'asc'\n        ? 'ascending'\n        : 'descending'\n      : 'none';\n\n    props = { ...props, 'aria-sort': sort };\n  }\n\n  return (\n    <th {...props} key={column.prop}>\n      {isSortable() ? (\n        <button\n          class={{\n            [`${CSSNAMESPACE}__order-btn`]: true,\n            [`${CSSNAMESPACE}__cell-content`]: true,\n          }}\n          onClick={handleColumnSortClick}\n        >\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/filter\" />\n          )}\n          {!!column.order &&\n            (column.order === 'desc' ? (\n              <nano-icon name=\"solid/long-arrow-down\" />\n            ) : (\n              <nano-icon name=\"solid/long-arrow-up\" />\n            ))}\n          <div class={`${CSSNAMESPACE}__status-icons`}>\n            <nano-icon name=\"light/chevron-down\" />\n          </div>\n        </button>\n      ) : (\n        <div class={`${CSSNAMESPACE}__cell-content`}>\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/bars-filter\" />\n          )}\n        </div>\n      )}\n    </th>\n  );\n};\n"]}

package/dist/collection/components/table/table.js

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, readTask, Build, } from '@stencil/core';
+import { h, Host, readTask, } from '@stencil/core';
 import { cyrb53 } from '../../utils/math';
 import { debounce } from '../../utils/throttle';
 import { TableColHead } from './table.header';
@@ -10,9 +10,10 @@ import { TableCell } from './table.cell';
 import { CSSNAMESPACE } from './table.constants';
 import { generateStore, storeSearch, storeSetConfig, storeSetData, storeSort, storeFilter, } from './table.store';
 import { findScrollParent, isInViewport } from './table.utils';
+import { TablePinService } from './table.pin-service';
 const measurePerf = false;
 function perMark(name, end = false) {
-  if (!Build.isDev || Build.isTesting || !performance || !measurePerf)
+  if (!performance || !measurePerf)
     return;
   if (end) {
     performance === null || performance === void 0 ? void 0 : performance.mark('end' + name);
@@ -108,11 +109,24 @@ export class Table {
      * stop loop - it's on the current active block.
      */
     this.scrollHandler = () => {
+      var _a;
+      perMark('scrollHandler');
       // don't listen if this table isn't in the viewport
-      if (!this.store.general.state.isActive)
+      if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.general.state.isActive) || !this.rows)
         return;
+      if (this.primaryBlockIndex === undefined)
+        this.primaryBlockIndex = 0;
       readTask(() => {
-        this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
+        this.cacheScrollPosition =
+          typeof this.scrollParent.scrollTop !== 'undefined'
+            ? this.scrollParent.scrollTop
+            : window.scrollY;
+        if (this.tablePinnedService) {
+          this.tablePinnedService.onScroll({
+            x: this.scrollParent.scrollLeft || window.scrollX,
+            y: this.cacheScrollPosition,
+          });
+        }
         let cumulativeHeight = this.host.offsetTop;
         let blockIndex = 0;
         const blockLen = this.blocks.length;
@@ -123,21 +137,18 @@ export class Table {
             const potentialBlocks = [
               blockIndex,
               blockIndex + 1,
-              Math.max(0, blockIndex - 1),
+              this.cacheScrollPosition,
+              cumulativeHeight,
+              // Math.max(0, blockIndex - 1),
             ];
             if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
               this.activeBlocks = potentialBlocks;
-              this.setBlockHeight();
             }
             this.primaryBlockIndex = blockIndex;
           }
           blockIndex++;
         }
-      });
-    };
-    this.handleColumnPinned = (positions) => {
-      Object.entries(positions).forEach(([key, applied]) => {
-        this.tableEle.classList.toggle(`${CSSNAMESPACE}__pinned--${key}`, applied);
+        perMark('scrollHandler', true);
       });
     };
     this.handleResizeChange = (e) => {
@@ -148,12 +159,12 @@ export class Table {
         classes = [...e.target.className.split(' '), ...classes];
       this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
     };
-    this.jsxRenderer = undefined;
+    this.customRenderer = undefined;
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
     this.loading = undefined;
-    this.internalLoading = false;
+    this.internalLoading = true;
     this.placeholderSize = 5;
     this.rows = undefined;
     this.columns = [];
@@ -161,14 +172,14 @@ export class Table {
     this.rowRender = undefined;
     this.footRender = { pinned: 'bottom' };
     this.showFooter = false;
-    this.perBlock = 40;
+    this.perBlock = 50;
     this.searchTerm = undefined;
     this.customFilterFn = undefined;
     this.customSortFn = undefined;
     this.defaultSort = true;
     this.virtualTotalItems = 0;
     this.blocks = [];
-    this.activeBlocks = [0, 1, 2];
+    this.activeBlocks = [0, 1];
     this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
   }
   get _loading() {
@@ -197,6 +208,8 @@ export class Table {
       if (!this.isReady)
         requestAnimationFrame(() => this.setInitialBlockDimension());
       this._loading = false;
+      if (this.tablePinnedService)
+        this.tablePinnedService.assessRows();
     });
   }
   async handleColsChange() {
@@ -214,6 +227,10 @@ export class Table {
   virtualTotalItemsChangeHandler() {
     this.setBlocks();
   }
+  /** @readonly - shows the currently applied filters */
+  get appliedFilters() {
+    return this.filters;
+  }
   /** Remove any column sorts currently applied
    * @returns a promise which resolves when complete */
   async resetSorting() {
@@ -256,8 +273,6 @@ export class Table {
   }
   /** Updates a row model at a given index
    * @param row - the row to update.
-   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property
-   * - rows are augmented with certain properties to aid with efficient rendering
    * @param rowIndex - the row index to insert this row
    */
   async updateRow(row, rowIndex) {
@@ -288,7 +303,9 @@ export class Table {
         ? document
         : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
     }
-    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
+    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler
+    // {passive: true}
+    );
     this._scrollParent = ele;
   }
   // used to fire `nanoTblBlockRendered` on block render change
@@ -391,10 +408,11 @@ export class Table {
         const res = await this.customFilterFn(this.filters);
         // if the response is 'true', the custom filter did it's thing
         // handover to finish and stop loading state.
-        // if response is falsey, carry on to do a FE filter
+        // if response is falsy, carry on to do a FE filter
         if (res === true) {
           this.filterComplete();
           this._loading = false;
+          return;
         }
       }
       catch (e) {
@@ -403,8 +421,8 @@ export class Table {
         console.warn('custom filter failed', e);
         this.currentFilters = '';
         this._loading = false;
+        return;
       }
-      return;
     }
     try {
       await storeFilter(this.host, this.filters);
@@ -420,9 +438,17 @@ export class Table {
   filterComplete() {
     this.columns = this.columns.map((c) => {
       const cFilter = this.filters.find((f) => f.prop === c.prop);
-      if (cFilter)
+      // if we found a filter AND
+      // it isn't true / false and has a length OR
+      // it is true or false
+      if (cFilter &&
+        ((typeof cFilter.filter !== 'boolean' && cFilter.filter.length) ||
+          typeof cFilter.filter === 'boolean'))
         c.filter = cFilter.filter;
-      else if (c.filter !== null && c.filter !== undefined)
+      // if a filter value is not set OR
+      // it isn't true / false and has no length
+      else if ((c.filter !== null && c.filter !== undefined) ||
+        (!!c.filter && typeof c.filter !== 'boolean' && !c.filter.length))
         c.filter = undefined;
       return c;
     });
@@ -511,6 +537,8 @@ export class Table {
     if (!!col) {
       await this.sortStart(col.order, col.prop);
     }
+    if (this.tablePinnedService)
+      this.tablePinnedService.assessCols();
   }
   /** Split up all incoming rows into 'blocks' split amongst tbody elements.
    * These can then be hidden / shown to improve performance.
@@ -557,14 +585,14 @@ export class Table {
   getBlockHeight(blockIndex) {
     if (this.blockHeights.length) {
       const cachedBlockHeight = this.blockHeights.find((bh) => bh.blockIndex === blockIndex);
-      if (cachedBlockHeight)
+      if (cachedBlockHeight && cachedBlockHeight.height)
         return cachedBlockHeight.height;
     }
     const blockLength = this.blocks[blockIndex].rows.length;
     if (blockLength === this.perBlock && this.measureHeight) {
       return this.measureHeight;
     }
-    return this.unitHeight ? this.unitHeight * blockLength : undefined;
+    return this.unitHeight ? this.unitHeight * blockLength : 100;
   }
   /** cache the height for all active blocks for later renders */
   setBlockHeight() {
@@ -617,7 +645,9 @@ export class Table {
     // setup stores
     this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
     await this.handleRowsChange();
-    this.store.general.onChange('isActive', this.scrollHandler);
+    this.store.general.onChange('isActive', () => {
+      this.scrollHandler();
+    });
     this.store.data.onChange('rows', () => this.setBlocks());
     // setup dom and attach listeners
     this.processSlots();
@@ -631,6 +661,9 @@ export class Table {
   }
   componentDidLoad() {
     this.setInitialBlockDimension();
+    if (!this.tablePinnedService) {
+      this.tablePinnedService = new TablePinService(this.tableEle, this.scrollParent);
+    }
   }
   componentShouldUpdate(_newVal, _oldVal, stateName) {
     // stop double rendering - we use the store for rendering internally
@@ -638,14 +671,14 @@ export class Table {
     // but we don't want it to cause renders
     if (['rows', 'columns'].includes(stateName))
       return false;
-    if (Build.isDev && !Build.isTesting && measurePerf)
+    if (measurePerf)
       console.log(stateName, _newVal, _oldVal);
   }
   componentWillRender() {
     perMark('render');
   }
   componentDidRender() {
-    this.setMeasureElement();
+    this.setMeasureElement().then(() => this.setBlockHeight());
     perMark('render', true);
   }
   disconnectedCallback() {
@@ -659,17 +692,20 @@ export class Table {
   }
   render() {
     this.blockElements = [];
-    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange }), h("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("nano-progress-bar", { indeterminate: true, class: {
+    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange, onNanoResize: () => {
+        if (this.tablePinnedService)
+          this.tablePinnedService.onResize();
+      } }), h("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'nano-table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("nano-progress-bar", { indeterminate: true, class: {
         [`${CSSNAMESPACE}__progress-bar`]: true,
         [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
-      } }), h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, h("caption", { class: {
+      } }), h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-table-' + this.renderId }, h("caption", { class: {
         [`${CSSNAMESPACE}__caption`]: true,
         [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
-      }, id: 'table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
-      h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, onColumnPinned: this.handleColumnPinned, defaults: {
+      }, id: 'nano-table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
+      h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
         } }),
-    ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+    ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
       }, class: {
         [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
@@ -677,10 +713,10 @@ export class Table {
       } }, this.activeBlocks.includes(blockIndex) ? (block.rows.map((row, i) => {
       const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
       return (h(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
-    })) : (h("tr", null, h("td", { colSpan: this.store.config.state.columns.length, style: {
+    })) : (h("tr", { class: `${CSSNAMESPACE}__tr--placeholder` }, h("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex) + 'px',
-      } })))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
-      h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnSortClick: this.sortStart, defaults: {
+      } })))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender }, this.store.config.state.columns.map((colModel) => [
+      h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
         } }),
     ]))))), !!this.blocks.length && (h("nano-spinner", { type: "circle", class: {
@@ -701,16 +737,15 @@ export class Table {
   }
   static get properties() {
     return {
-      "jsxRenderer": {
+      "customRenderer": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "TableTypes.HFunc<any>",
-          "resolved": "HFunc<any>",
+          "original": "(node: any, cell: HTMLElement) => void",
+          "resolved": "(node: any, cell: HTMLElement) => void",
           "references": {
-            "TableTypes": {
-              "location": "import",
-              "path": "../../interface"
+            "HTMLElement": {
+              "location": "global"
             }
           }
         },
@@ -718,7 +753,7 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Function called whenever `col.cellTemplate` renders an unknown object.\nThe function should render a valid HTMLElement to the cell arg.\nExample usage - render JSX from a 3rd party lib and append the result to the cell element."
         },
         "getter": false,
         "setter": false
@@ -794,7 +829,7 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Will show a loading state when set to true.\nBy default, will be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting.\n*Note* when set manually, will overwrite any internal loading state.\nSet to 'undefined' to revert to default behaviour."
+          "text": "Will show a loading state when set to true.\nBy default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy\n*or* when performing custom filtering or sorting.\n*Note* when set manually, will overwrite any internal loading state.\nSet to 'undefined' to revert to default behaviour."
         },
         "getter": false,
         "setter": false,
@@ -976,7 +1011,7 @@ export class Table {
         "setter": false,
         "attribute": "per-block",
         "reflect": false,
-        "defaultValue": "40"
+        "defaultValue": "50"
       },
       "blocksLength": {
         "type": "number",
@@ -1036,7 +1071,7 @@ export class Table {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "A custom filtering function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsey, the sort will be performed by the component.\nA good use-case would be performing the filter on a server / via fetch.\nThen on success, updating the table's data via the `rows` property"
+          "text": "A custom filtering function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsy, the sort will be performed by the component.\nA good use-case would be performing the filter on a server / via fetch.\nThen on success, updating the table's data via the `rows` property"
         },
         "getter": false,
         "setter": false
@@ -1105,6 +1140,27 @@ export class Table {
         "attribute": "virtual-total-items",
         "reflect": false,
         "defaultValue": "0"
+      },
+      "appliedFilters": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Filter[]",
+          "resolved": "Filter[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": "- shows the currently applied filters"
+            }],
+          "text": ""
+        },
+        "getter": true,
+        "setter": false,
+        "defaultValue": "[]"
       }
     };
   }
@@ -1425,9 +1481,9 @@ export class Table {
           "parameters": [{
               "tags": [{
                   "name": "param",
-                  "text": "row - the row to update.\n*Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property\n- rows are augmented with certain properties to aid with efficient rendering"
+                  "text": "row - the row to update."
                 }],
-              "text": "- the row to update.\n*Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property\n- rows are augmented with certain properties to aid with efficient rendering"
+              "text": "- the row to update."
             }, {
               "tags": [{
                   "name": "param",
@@ -1450,7 +1506,7 @@ export class Table {
           "text": "Updates a row model at a given index",
           "tags": [{
               "name": "param",
-              "text": "row - the row to update.\n*Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property\n- rows are augmented with certain properties to aid with efficient rendering"
+              "text": "row - the row to update."
             }, {
               "name": "param",
               "text": "rowIndex - the row index to insert this row"