@nanoporetech-digital/components 3.5.1 → 3.7.0

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

@@ -11,7 +11,7 @@ import { CSSNAMESPACE } from './table.constants';
 import { generateStore, storeSearch, storeSetConfig, storeSetData, storeSort, storeFilter, } from './table.store';
 import { arrMove, detectScrollSpeed, findScrollParent, isInViewport, } from './table.utils';
 function perMark(name, end = false) {
-  if (!Build.isDev)
+  if (!Build.isDev || Build.isTesting || !performance)
     return;
   if (end) {
     performance?.mark('end' + name);
@@ -41,22 +41,29 @@ let id = 0;
  */
 export class Table {
   constructor() {
-    this.debounceSetLoading = (l) => {
-      this._loading = l;
-    };
     this.renderId = 'tbl-' + id++;
     this.filters = [];
     this.currentFilters = '[]';
     this.currentSort = '';
+    this.measureHeight = 0;
     this.blockIos = new WeakMap();
     this.blockHeights = [];
     this.unitHeight = 0;
     // Scroll / IO used for hiding / showing blocks
     this.ignoreIO = true;
     this._isReady = false;
+    /**
+     * Fired when a column is dragged
+     * @param column
+     */
     this.colDrag = (column) => {
       this.nanoTblColDrag.emit({ column });
     };
+    /**
+     * Fired when a column is dropped after being dragged
+     * @param fromCol
+     * @param toCol
+     */
     this.colDrop = (fromCol, toCol) => {
       const cols = this.store.config.state.columns;
       const toIndex = cols.findIndex((col) => col.prop === toCol);
@@ -69,7 +76,7 @@ export class Table {
       });
       if (dropEvent.defaultPrevented)
         return;
-      this.store.config.state.columns = arrMove(fromIndex, toIndex, cols);
+      this.columns = arrMove(fromIndex, toIndex, cols);
     };
     /**
      * Start a sort - can be cancelled by `preventDefault`
@@ -81,7 +88,7 @@ export class Table {
       // did order change?
       if (this.currentSort === order + ':' + column)
         return;
-      this.loading = true;
+      this._loading = true;
       const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
       if (sortEvent.defaultPrevented)
         return;
@@ -91,13 +98,24 @@ export class Table {
       this.scrollToTop(element);
       if (this.customSortFn) {
         try {
-          await this.customSortFn(column, order);
-          this.sortComplete(order, column);
+          const res = await this.customSortFn(column, order);
+          // if the response is 'true', the custom sort did it's thing
+          // handover to finish and stop loading state.
+          // if response is falsey, carry on to do a FE sort
+          if (res === true) {
+            this.sortComplete(order, column);
+            this._loading = false;
+            return;
+          }
         }
         catch (e) {
+          // if response errored, stop loading state
+          // clear current sort cache
           console.warn('custom sort failed', e);
+          this.currentSort = '';
+          this._loading = false;
+          return;
         }
-        return;
       }
       try {
         await storeSort(this.host, column, order);
@@ -108,7 +126,8 @@ export class Table {
         this.currentSort = '';
       }
       finally {
-        this.loading = false;
+        if (this.blocks.length)
+          this._loading = false;
       }
     };
     /**
@@ -121,31 +140,34 @@ export class Table {
       if (!el || this.blockIos.has(el))
         return;
       const blockIo = new IntersectionObserver(([ioEntry]) => {
-        if (this.ignoreIO)
+        if (ioEntry.intersectionRatio === 0)
           return;
-        if (ioEntry.isIntersecting) {
-          // This is a bit gross
-          // The Intersection Observer (IO) fires in an incorrect order when the scrolling is very fast
-          // i.e. we go past blocks 3, 2, 1 and land on 0, but 3 can fire as 'intersecting' after 0.
-          // To fix that, we check - for realzies - if the block IS visible.
-          // BUT that test is not as sensitive to a block being visible via the IO,
-          // so doesn't always fire if scrolling slowly
-          // *sigh*
-          readTask(() => {
-            if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
-              this.activeBlocks = [
+        // This is a bit gross
+        // The Intersection Observer (IO) fires in an incorrect order when the scrolling is very fast
+        // i.e. we go past blocks 3, 2, 1 and land on 0, but 3 can fire as 'intersecting' after 0.
+        // To fix that, we check - for realzies - if the block IS visible.
+        // BUT that test is not as sensitive to a block being visible via the IO,
+        // so doesn't always fire if scrolling slowly
+        // *sigh*
+        readTask(() => {
+          if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
+            if (!this.ignoreIO) {
+              const potentialBlocks = [
                 blockIndex,
                 blockIndex + 1,
                 Math.max(0, blockIndex - 1),
               ];
-              this.nanoTblBlockRendered.emit({
-                block: blockIndex,
-                totalBlocks: this.blockElements.length,
-              });
-              requestAnimationFrame(() => this.setBlockHeight());
+              if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
+                this.debouncedBlockChange(potentialBlocks);
+              }
             }
-          });
-        }
+            // fire the event regardless
+            this.nanoTblBlockRendered.emit({
+              block: blockIndex,
+              totalBlocks: this.blockElements.length,
+            });
+          }
+        });
       }, {
         threshold: [0],
         root: this.scrollParent === document.scrollingElement
@@ -167,7 +189,8 @@ export class Table {
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
-    this._loading = false;
+    this.loading = undefined;
+    this.internalLoading = false;
     this.placeholderSize = 5;
     this.rows = undefined;
     this.columns = [];
@@ -181,26 +204,29 @@ export class Table {
     this.customSortFn = undefined;
     this.defaultSort = true;
     this.defaultColDraggable = false;
+    this.virtualTotalItems = 0;
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
-    this.measureHeight = 0;
     this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
+    this.debouncedBlockChange = debounce(this.debouncedBlockChange.bind(this), 100);
   }
-  /** Will show a loading state when true.
-   * Will be shown automatically if `rows` is a promise waiting to resolve
-   * or when performing custom filtering or sorting  */
-  get loading() {
-    return this._loading;
+  get _loading() {
+    return this.loading !== undefined ? this.loading : this.internalLoading;
   }
-  set loading(l) {
+  set _loading(l) {
+    if (this.loading !== undefined)
+      return;
     this.debounceSetLoading(l);
   }
+  debounceSetLoading(l) {
+    this.internalLoading = l;
+  }
   handleRowsChange() {
     if (!this.rows) {
-      this.loading = true;
+      this._loading = true;
       return;
     }
-    this.loading = true;
+    this._loading = true;
     Promise.resolve(this.rows).then(async (rows) => {
       await storeSetData(this.host, rows);
       // reset everything
@@ -209,7 +235,7 @@ export class Table {
       await this.columnInit();
       if (!this.isReady)
         this.setInitialBlockDimension();
-      this.loading = false;
+      this._loading = false;
     });
   }
   async handleColsChange() {
@@ -224,6 +250,9 @@ export class Table {
   handleSearchTermChange() {
     this.searchStart();
   }
+  virtualTotalItemsChangeHandler() {
+    this.setBlocks();
+  }
   /** Remove any column sorts currently applied
    * @returns a promise which resolves when complete */
   async resetSorting() {
@@ -264,11 +293,25 @@ export class Table {
     this.filters = this.filters.filter((f) => !columnNames.includes(f.prop));
     return this.filterStart();
   }
+  /** Updates a row model at a given index
+   * @param row - the row to update.
+   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property
+   * - rows are augmented with certain properties to aid with efficient rendering
+   * @param rowIndex - the row index to insert this row
+   */
+  async updateRow(row, rowIndex) {
+    this.rows.splice(rowIndex, 1, row);
+    this.handleRowsChange();
+  }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
     if (!el)
       return;
-    this.measureHeight = el.getBoundingClientRect().height;
+    const potentialHeight = el.getBoundingClientRect().height;
+    this.measureHeight =
+      Math.abs(this.measureHeight - potentialHeight) < 5
+        ? this.measureHeight
+        : potentialHeight;
     this.unitHeight =
       el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
   }
@@ -315,7 +358,7 @@ export class Table {
     perMark('sort', true);
   }
   async searchStart() {
-    this.loading = true;
+    this._loading = true;
     const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
     if (sortEvent.defaultPrevented)
       return;
@@ -331,7 +374,7 @@ export class Table {
       console.warn('search failed', e);
     }
     finally {
-      this.loading = false;
+      this._loading = false;
     }
   }
   async filterStart(filters, additive = true) {
@@ -348,7 +391,7 @@ export class Table {
     }
     if (this.currentFilters === JSON.stringify(this.filters))
       return;
-    this.loading = true;
+    this._loading = true;
     const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
     if (sortEvent.defaultPrevented)
       return;
@@ -358,12 +401,21 @@ export class Table {
     this.scrollToTop();
     if (this.customFilterFn) {
       try {
-        await this.customFilterFn(this.filters);
-        this.filterComplete();
+        const res = await this.customFilterFn(this.filters);
+        // if the response is 'true', the custom filter did it's thing
+        // handover to finish and stop loading state.
+        // if response is falsey, carry on to do a FE filter
+        if (res === true) {
+          this.filterComplete();
+          this._loading = false;
+        }
       }
       catch (e) {
+        // if response errored, stop loading state
+        // clear current sort cache
         console.warn('custom filter failed', e);
         this.currentFilters = '';
+        this._loading = false;
       }
       return;
     }
@@ -375,7 +427,7 @@ export class Table {
       console.warn('filter failed', e);
     }
     finally {
-      this.loading = false;
+      this._loading = false;
     }
   }
   filterComplete() {
@@ -467,24 +519,34 @@ export class Table {
    * These can then be hidden / shown to improve performance.
    */
   setBlocks() {
+    const dRows = this.store.data.state.rows;
+    if (!dRows.length) {
+      this.blocks = [];
+      return;
+    }
     perMark('setBlocks');
-    this.activeBlocks = [0, 1, 2];
     this.ignoreIO = true;
     let i = 1;
-    const l = this.store.data.state.rows.length;
+    const l = this.virtualTotalItems > dRows.length
+      ? this.virtualTotalItems
+      : dRows.length;
     let rows = [];
     const blocks = [];
     this.blockHeights = [];
     // old skool loop for perf
     for (i; i <= l; i++) {
-      rows.push(this.store.data.state.rows[i - 1]);
+      rows.push(this.store.data.state.rows[i - 1] || { __uuid: '' });
       if (i % this.perBlock === 0) {
+        // assign a UUID for the whole block
+        // for block diffing
         blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
         rows = [];
       }
     }
-    if (rows.length)
+    // any leftover rows
+    if (rows.length) {
       blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
+    }
     this.blocks = blocks;
     perMark('setBlocks', true);
   }
@@ -512,11 +574,11 @@ export class Table {
   }
   /** cache the height for all active blocks for later renders */
   setBlockHeight() {
-    readTask(() => {
-      this.activeBlocks.forEach((blockIndex) => {
-        const el = this.blockElements[blockIndex];
-        if (!el)
-          return;
+    this.activeBlocks.forEach((blockIndex) => {
+      const el = this.blockElements[blockIndex];
+      if (!el)
+        return;
+      readTask(() => {
         const height = el.getBoundingClientRect().height;
         // cache height to our block heights array
         // for subsequent renders
@@ -529,6 +591,10 @@ export class Table {
       });
     });
   }
+  debouncedBlockChange(newBlocks) {
+    this.activeBlocks = newBlocks;
+    this.setBlockHeight();
+  }
   /** Process slotted content */
   processSlots() {
     // see if we have slot content
@@ -558,6 +624,8 @@ export class Table {
     // but we don't want it to cause renders
     if (['rows', 'columns'].includes(stateName))
       return false;
+    if (Build.isDev)
+      console.log(stateName, _newVal, _oldVal);
   }
   componentWillRender() {
     perMark('render');
@@ -580,18 +648,18 @@ export class Table {
           sortable: this.defaultSort,
           draggable: this.defaultColDraggable,
         } }),
-    ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (h("tr", null, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+    ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (h("tr", null, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
-        this.setupBlockIO(tb, blockIndex);
+        requestAnimationFrame(() => this.setupBlockIO(tb, blockIndex));
       }, class: {
         [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
         [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
       } }, this.activeBlocks.includes(blockIndex) ? (block.rows.map((row, i) => {
       const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
-      return (h(TableRow, { rowRenderer: this.rowRender, row: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
-    })) : (h("td", { colSpan: this.store.config.state.columns.length, style: {
+      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: {
         height: this.getBlockHeight(blockIndex),
-      } }))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+      } })))))), 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: {
           sortable: this.defaultSort,
           draggable: this.defaultColDraggable,
@@ -685,13 +753,13 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Will show a loading state when true.\nWill be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting"
+          "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."
         },
-        "getter": true,
-        "setter": true,
+        "getter": false,
+        "setter": false,
         "attribute": "loading",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "undefined"
       },
       "placeholderSize": {
         "type": "number",
@@ -715,10 +783,10 @@ export class Table {
       },
       "rows": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "| TableTypes.NanoTable['rows']\n    | Promise<TableTypes.NanoTable['rows']>",
-          "resolved": "Promise<RowData[]> | RowData[]",
+          "resolved": "Promise<RowGeneric[]> | RowGeneric[]",
           "references": {
             "TableTypes": {
               "location": "import",
@@ -743,7 +811,7 @@ export class Table {
         "mutable": true,
         "complexType": {
           "original": "TableTypes.NanoTable['columns']",
-          "resolved": "ColumnConfig<RowData>[]",
+          "resolved": "ColumnConfig<RowGeneric>[]",
           "references": {
             "TableTypes": {
               "location": "import",
@@ -755,7 +823,7 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The column config used to generate present the rows of data"
+          "text": "The column config used to present the rows of data"
         },
         "getter": false,
         "setter": false,
@@ -789,7 +857,7 @@ export class Table {
         "mutable": false,
         "complexType": {
           "original": "TableTypes.RowRenderer",
-          "resolved": "RowRenderer",
+          "resolved": "RowRenderer<RowData<RowGeneric>>",
           "references": {
             "TableTypes": {
               "location": "import",
@@ -911,8 +979,8 @@ export class Table {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(filters: TableTypes.Filter[]) => Promise<void>",
-          "resolved": "(filters: Filter[]) => Promise<void>",
+          "original": "(\n    filters: TableTypes.Filter[]\n  ) => Promise<true | TableTypes.Falsy>",
+          "resolved": "(filters: Filter[]) => Promise<true | Falsy>",
           "references": {
             "TableTypes": {
               "location": "import",
@@ -927,7 +995,7 @@ export class Table {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "A custom filtering function. Should return a promise.\nOn successful completion the column UI will be updated.\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 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"
         },
         "getter": false,
         "setter": false
@@ -936,8 +1004,8 @@ export class Table {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(\n    property: TableTypes.Prop,\n    order: TableTypes.Order\n  ) => Promise<void>",
-          "resolved": "(property: keyof RowData, order: Order) => Promise<void>",
+          "original": "(\n    property: TableTypes.Prop,\n    order: TableTypes.Order\n  ) => Promise<true | TableTypes.Falsy>",
+          "resolved": "(property: keyof RowGeneric, order: Order) => Promise<true | Falsy>",
           "references": {
             "TableTypes": {
               "location": "import",
@@ -952,7 +1020,7 @@ export class Table {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "A custom sorting function. Should return a promise.\nOn successful completion the column UI will be updated.\nA good use-case would be performing the sort on a server / via fetch.\nThen on success, updating the table's data via the `rows` property"
+          "text": "A custom sorting 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 sort on a server / via fetch.\nThen on success, updating the table's data via the `rows` property"
         },
         "getter": false,
         "setter": false
@@ -996,46 +1064,65 @@ export class Table {
         "attribute": "default-col-draggable",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "virtualTotalItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this to render the table with roughly the correct dimensions.\na use-case might be; fetch a small initial dataset to minimise load-time,\nrender the table with the correct dimensions, the table becomes interactive,\nload the rest of the data"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "virtual-total-items",
+        "reflect": false,
+        "defaultValue": "0"
       }
     };
   }
   static get states() {
     return {
-      "_loading": {},
+      "internalLoading": {},
       "blocks": {},
-      "activeBlocks": {},
-      "measureHeight": {}
+      "activeBlocks": {}
     };
   }
   static get events() {
     return [{
-        "method": "nanoTblBlockRendered",
-        "name": "nanoTblBlockRendered",
+        "method": "nanoTblReady",
+        "name": "nanoTblReady",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired whenever a block is activated by scrolling into view / becoming visible\nThis could be leveraged for infinite scrolling / to fetch more data."
+          "text": "Fired when the table has done it's first complete render"
         },
         "complexType": {
-          "original": "{\n    block: number;\n    totalBlocks: number;\n  }",
-          "resolved": "{ block: number; totalBlocks: number; }",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         }
       }, {
-        "method": "nanoTblReady",
-        "name": "nanoTblReady",
+        "method": "nanoTblBlockRendered",
+        "name": "nanoTblBlockRendered",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired when the table has done it's first complete render"
+          "text": "Fired whenever a block is activated by scrolling into view / becoming visible\nThis could be leveraged for infinite scrolling / to fetch more data."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "{\n    block: number;\n    totalBlocks: number;\n  }",
+          "resolved": "{ block: number; totalBlocks: number; }",
           "references": {}
         }
       }, {
@@ -1050,7 +1137,7 @@ export class Table {
         },
         "complexType": {
           "original": "{\n    column: TableTypes.Prop;\n    order: TableTypes.Order;\n  }",
-          "resolved": "{ column: keyof RowData; order: Order; }",
+          "resolved": "{ column: keyof RowGeneric; order: Order; }",
           "references": {
             "TableTypes": {
               "location": "import",
@@ -1070,7 +1157,7 @@ export class Table {
         },
         "complexType": {
           "original": "{\n    column: TableTypes.Prop;\n    order: TableTypes.Order;\n  }",
-          "resolved": "{ column: keyof RowData; order: Order; }",
+          "resolved": "{ column: keyof RowGeneric; order: Order; }",
           "references": {
             "TableTypes": {
               "location": "import",
@@ -1090,7 +1177,7 @@ export class Table {
         },
         "complexType": {
           "original": "{\n    column: TableTypes.Prop;\n  }",
-          "resolved": "{ column: keyof RowData; }",
+          "resolved": "{ column: keyof RowGeneric; }",
           "references": {
             "TableTypes": {
               "location": "import",
@@ -1110,7 +1197,7 @@ export class Table {
         },
         "complexType": {
           "original": "{\n    fromCol: TableTypes.Prop;\n    toCol: TableTypes.Prop;\n    fromIndex: number;\n    toIndex: number;\n  }",
-          "resolved": "{ fromCol: keyof RowData; toCol: keyof RowData; fromIndex: number; toIndex: number; }",
+          "resolved": "{ fromCol: keyof RowGeneric; toCol: keyof RowGeneric; fromIndex: number; toIndex: number; }",
           "references": {
             "TableTypes": {
               "location": "import",
@@ -1188,6 +1275,21 @@ export class Table {
           "resolved": "{ term: string; }",
           "references": {}
         }
+      }, {
+        "method": "nanoTblBeforeEdit",
+        "name": "nanoTblBeforeEdit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired before a general search.\n`event.preventDefault()` to stop searching."
+        },
+        "complexType": {
+          "original": "{ term: string }",
+          "resolved": "{ term: string; }",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -1331,6 +1433,44 @@ export class Table {
               "text": "a promise which resolves when complete"
             }]
         }
+      },
+      "updateRow": {
+        "complexType": {
+          "signature": "(row: TableTypes.RowData, rowIndex: number) => Promise<void>",
+          "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": "- 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"
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "rowIndex - the row index to insert this row"
+                }],
+              "text": "- the row index to insert this row"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "TableTypes": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "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"
+            }, {
+              "name": "param",
+              "text": "rowIndex - the row index to insert this row"
+            }]
+        }
       }
     };
   }
@@ -1345,6 +1485,9 @@ export class Table {
       }, {
         "propName": "searchTerm",
         "methodName": "handleSearchTermChange"
+      }, {
+        "propName": "virtualTotalItems",
+        "methodName": "virtualTotalItemsChangeHandler"
       }];
   }
   static get listeners() {