@nanoporetech-digital/components 3.0.0 → 3.1.1

package/dist/collection/components/table/table.css

@@ -10,8 +10,10 @@
 [hidden] {
   display: none !important;
 }
+@charset "UTF-8";
 nano-table {
-  display: block;
+  display: table;
+  width: 100%;
   --max-col-width: 200px;
   --color: var(--nano-color-mediumgrey, #68767e);
   --font-size: 0.87rem;
@@ -20,11 +22,11 @@ nano-table {
   --border-style: 1px solid var(--border-color);
   --border-tint-color: var(--nano-color-blue, #90c6e7);
   --border-tint-style: 2px solid var(--border-tint-color);
-  --cell-bg-rgb: var(--nano-color-white-rgb);
+  --cell-bg-rgb: var(--nano-color-white-rgb, 255 255 255);
   --head-bg-rgb: var(--cell-bg-rgb);
   --foot-bg-rgb: var(--cell-bg-rgb);
   --th-row-bg-rgb: var(--cell-bg-rgb);
-  --ordered-bg-rgb: var(--nano-color-lightgrey-rgb);
+  --ordered-bg-rgb: var(--nano-color-offwhite-rgb, 249 249 251);
   --td-padding: 0.5rem 0.625rem 0.4125rem;
   --th-padding: 0.875rem 0.625rem 0.6875rem;
   --head-th-padding: var(--th-padding);
@@ -38,10 +40,21 @@ nano-table {
   width: 100%;
   font-size: var(--font-size);
   border-spacing: 0 0;
-  -webkit-margin-after: 32px;
-          margin-block-end: 32px;
   border-collapse: separate;
   background: rgb(var(--cell-bg-rgb));
+  -webkit-border-end: 1px solid transparent;
+          border-inline-end: 1px solid transparent;
+}
+.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;
 }
 .nano-tbl__ordered {
   background-color: var(--ordered-bg);
@@ -76,12 +89,23 @@ nano-table {
   display: flex;
   gap: 10px;
 }
-.nano-tbl__loader {
-  font-size: 2rem;
+.nano-tbl__progress-bar {
+  font-size: 0.2rem;
+  position: sticky;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: 10;
+  -webkit-transition: scale 0.25s;
+  transition: scale 0.25s;
+  scale: 0;
   width: 100%;
-  display: block;
+  height: 0;
+}
+.nano-tbl__progress-bar--show {
+  scale: 1;
+  height: auto;
 }
-.nano-tbl__caption {
+.nano-tbl__caption--hide {
   clip: rect(1px, 1px, 1px, 1px);
   -webkit-clip-path: inset(50%);
           clip-path: inset(50%);
@@ -94,41 +118,47 @@ nano-table {
 }
 .nano-tbl__td, .nano-tbl__th {
   line-height: var(--cell-line-height);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   text-align: start;
   -webkit-border-after: var(--border-style);
           border-block-end: var(--border-style);
-  padding: var(--td-padding);
   max-width: var(--max-col-width);
   background-color: rgb(var(--cell-bg-rgb));
 }
 @media (min-width: 768px) {
-  .nano-tbl__td:first-child, .nano-tbl__th:first-child {
+  .nano-tbl__td:first-child .nano-tbl__cell-content, .nano-tbl__th:first-child .nano-tbl__cell-content {
     -webkit-padding-start: var(--bookend-col-padding) !important;
             padding-inline-start: var(--bookend-col-padding) !important;
   }
-  .nano-tbl__td:last-child, .nano-tbl__th:last-child {
+  .nano-tbl__td:last-child .nano-tbl__cell-content, .nano-tbl__th:last-child .nano-tbl__cell-content {
     -webkit-padding-end: var(--bookend-col-padding) !important;
             padding-inline-end: var(--bookend-col-padding) !important;
   }
 }
 thead .nano-tbl__td, thead .nano-tbl__th {
-  padding: var(--head-th-padding);
   font-weight: 800;
   background: rgba(var(--head-bg-rgb), 90%);
 }
+thead .nano-tbl__td .nano-tbl__cell-content, thead .nano-tbl__th .nano-tbl__cell-content {
+  padding: var(--head-th-padding);
+}
 tfoot .nano-tbl__td, tfoot .nano-tbl__th {
-  padding: var(--foot-th-padding);
   font-weight: 800;
   -webkit-border-after: none;
           border-block-end: none;
   background: rgba(var(--foot-bg-rgb), 90%);
 }
+tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell-content {
+  padding: var(--foot-th-padding);
+}
 .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: var(--td-padding);
+}
 .nano-tbl tbody {
   will-change: scroll-position;
   visibility: visible;
@@ -143,11 +173,12 @@ tfoot .nano-tbl__td, tfoot .nano-tbl__th {
 }
 .nano-tbl__pin {
   position: sticky;
+  z-index: 1;
 }
 .nano-tbl__pin--start {
   inset-inline: -1px auto;
-  will-change: scroll-position;
-  overflow: visible;
+  -webkit-transition: max-width 0.25s;
+  transition: max-width 0.25s;
 }
 .nano-tbl__pin--start::after {
   content: "";
@@ -156,15 +187,27 @@ tfoot .nano-tbl__td, tfoot .nano-tbl__th {
   -webkit-box-shadow: 5px 0 4px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 5px 0 4px 0 rgba(0, 0, 0, 0.2);
   opacity: 0;
+  z-index: -1;
 }
 .nano-tbl__pinned--start .nano-tbl__pin--start {
-  z-index: 1;
+  z-index: 2;
+}
+@media (max-width: 576px) {
+  .nano-tbl__pinned--start .nano-tbl__pin--start {
+    max-width: 25vw !important;
+  }
 }
 .nano-tbl__pinned--start .nano-tbl__pin--start::after {
   opacity: 1;
 }
 .nano-tbl__pin--end {
   inset-inline: auto -1px;
+  max-width: min(50vw, 200px);
+  /*
+    I cannot think of a nice way to make stuck-end columns play nice on small screens :(
+    Changing the width when stuck (as we do for stuck-start columns) causes the whole positioning to change.
+    This fires the IO, thus un-sticks the column, thus causes the IO to fire which sticks the column ∞
+  */
 }
 .nano-tbl__pin--end::after {
   content: "";
@@ -173,38 +216,47 @@ tfoot .nano-tbl__td, tfoot .nano-tbl__th {
   -webkit-box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.2);
           box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.2);
   opacity: 0;
+  z-index: -1;
 }
 .nano-tbl__pinned--end .nano-tbl__pin--end {
-  z-index: 2;
+  z-index: 3;
 }
 .nano-tbl__pinned--end .nano-tbl__pin--end::after {
   opacity: 1;
 }
+@media (max-width: 576px) {
+  .nano-tbl__pin--start ~ .nano-tbl__pin--end {
+    inset-inline: auto auto;
+  }
+  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {
+    display: none;
+  }
+}
 .nano-tbl__pin--top {
   inset-block: -1px auto;
 }
 .nano-tbl__pinned--top .nano-tbl__pin--top {
-  z-index: 3;
+  z-index: 4;
 }
 .nano-tbl__pin--bottom {
   inset-block: auto -1px;
 }
 .nano-tbl__pinned--bottom .nano-tbl__pin--bottom {
-  z-index: 4;
+  z-index: 5;
   -webkit-border-before: var(--border-tint-style);
           border-block-start: var(--border-tint-style);
 }
 .nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start {
-  z-index: 5;
+  z-index: 6;
 }
 .nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end {
-  z-index: 5;
+  z-index: 6;
 }
 .nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start {
-  z-index: 5;
+  z-index: 6;
 }
 .nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end {
-  z-index: 5;
+  z-index: 6;
 }
 .nano-tbl thead tr:last-of-type td,
 .nano-tbl thead tr:last-of-type th,
@@ -215,4 +267,22 @@ tfoot .nano-tbl__td, tfoot .nano-tbl__th {
 }
 .nano-tbl .unlimited-width {
   max-width: none;
+}
+.nano-tbl__spinner {
+  font-size: 1.5rem;
+  -webkit-transition: scale 0.25s;
+  transition: scale 0.25s;
+  scale: 0;
+  padding: 0.5rem;
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: calc(50% - 0.75rem);
+  z-index: -1;
+}
+.nano-tbl__spinner--show {
+  scale: 1;
+  position: sticky;
+}
+.nano-tbl nano-skeleton {
+  line-height: var(--cell-line-height);
 }

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

@@ -3,6 +3,7 @@
  */
 import { h, Host, readTask, Build, } from '@stencil/core';
 import { cyrb53 } from '../../utils/math';
+import { debounce } from '../../utils/throttle';
 import { TableColHead, TableRow, TableCell, TableHeadFootRow, } from './table.children';
 import { CSSNAMESPACE } from './table.constants';
 import { generateStore, storeSearch, storeSetConfig, storeSetData, storeSort, storeFilter, } from './table.store';
@@ -22,12 +23,22 @@ function perMark(name, end = false) {
 }
 let id = 0;
 /**
- * Table
- * @slot - The tooltip's target element. Only the first element will be used as the target.
- * @slot content - The tooltip's content. Alternatively, you can use the content prop.
+ * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
+ * - Built-in search
+ * - Built-in column filter
+ * - Built-in column sort
+ * - Easily swap in API / async based search / filter & sort
+ * - Pin headers, footers, rows, columns
+ * - Add custom rendering at every level
+ * - Add custom properties at every level
+ *
+ * @slot caption - The table's caption. You must either use this or the `caption` attribute.
  */
 export class Table {
   constructor() {
+    this.debounceSetLoading = (l) => {
+      this._loading = l;
+    };
     this.renderId = 'tbl-' + id++;
     this.filters = [];
     this.currentFilters = '';
@@ -45,8 +56,10 @@ export class Table {
      * @returns A promise
      */
     this.sortStart = async (order, column, element) => {
+      // did order change?
       if (this.currentSort === order + ':' + column)
         return;
+      this.loading = true;
       const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
       if (sortEvent.defaultPrevented)
         return;
@@ -72,10 +85,13 @@ export class Table {
         console.warn('sort failed', e);
         this.currentSort = '';
       }
+      finally {
+        this.loading = false;
+      }
     };
     /**
-     * Attaches an intersection observer to each rendered tbody elements
-     * shows / hides intersecting blocks' and sets heights for when their hidden
+     * Attaches an intersection observer to each rendered tbody element
+     * shows / hides intersecting blocks' and sets heights for when they're hidden
      * @param el - the tbody element to observe
      * @param blockIndex - the rendering tbody we're attaching the IO to
      */
@@ -90,8 +106,8 @@ export class Table {
           // 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.
-          // BUT that test is not as sensitive to a block being visible as the IO,
-          // so doesn't always fire if scrolling slowing
+          // 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)) {
@@ -108,7 +124,12 @@ export class Table {
             }
           });
         }
-      }, { threshold: [0] });
+      }, {
+        threshold: [0],
+        root: this.scrollParent === document.scrollingElement
+          ? null
+          : this.scrollParent,
+      });
       blockIo.observe(el);
       this.blockIos.set(el, blockIo);
     };
@@ -120,7 +141,9 @@ export class Table {
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
-    this.rows = [];
+    this._loading = true;
+    this.placeholderSize = 5;
+    this.rows = undefined;
     this.columns = [];
     this.headRender = { pinned: 'top' };
     this.rowRender = undefined;
@@ -133,9 +156,29 @@ export class Table {
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
     this.measureHeight = 0;
+    this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
+  }
+  /** 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;
+  }
+  set loading(l) {
+    this.debounceSetLoading(l);
   }
   handleRowsChange() {
-    storeSetData(this.host, this.rows);
+    if (!this.rows)
+      return;
+    this.loading = true;
+    Promise.resolve(this.rows).then(async (rows) => {
+      await storeSetData(this.host, rows);
+      if (!this.isReady) {
+        await this.columnInit();
+        this.setInitialBlockDimension();
+      }
+      this.loading = false;
+    });
   }
   handleColsChange() {
     storeSetConfig(this.host, this.columns);
@@ -183,6 +226,8 @@ export class Table {
   }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
+    if (!el)
+      return;
     this.measureHeight = el.getBoundingClientRect().height;
     this.unitHeight =
       el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
@@ -230,6 +275,7 @@ export class Table {
     perMark('sort', true);
   }
   async searchStart() {
+    this.loading = true;
     const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
     if (sortEvent.defaultPrevented)
       return;
@@ -241,7 +287,12 @@ export class Table {
       this.nanoTblAfterSearch.emit({ term: this.searchTerm });
       perMark('search', true);
     }
-    catch (e) { }
+    catch (e) {
+      console.warn('search failed', e);
+    }
+    finally {
+      this.loading = false;
+    }
   }
   async filterStart(filters, additive = true) {
     if (filters) {
@@ -257,6 +308,7 @@ export class Table {
     }
     if (this.currentFilters === JSON.stringify(this.filters))
       return;
+    this.loading = true;
     const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
     if (sortEvent.defaultPrevented)
       return;
@@ -280,7 +332,12 @@ export class Table {
       this.filterComplete();
       perMark('search', true);
     }
-    catch (e) { }
+    catch (e) {
+      console.warn('filter failed', e);
+    }
+    finally {
+      this.loading = false;
+    }
   }
   filterComplete() {
     this.columns = this.columns.map((c) => {
@@ -295,16 +352,20 @@ export class Table {
   /** Scrolls to the top immediately - used whilst sorting / filtering */
   scrollToTop(element) {
     const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
+    const scrollX = this.scrollParent.scrollLeft;
     this.scrollParent.style.scrollBehavior = 'auto';
-    this.host.scrollIntoView();
+    if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1))
+      this.topAnchorEle.scrollIntoView();
     if (element)
-      element.scrollIntoView();
+      element.scrollIntoView({ block: 'start' });
+    if (scrollX)
+      this.scrollParent.scrollLeft = scrollX;
     if (scrollBehaviour)
       this.scrollParent.style.scrollBehavior = scrollBehaviour;
   }
   setMeasureElement() {
     readTask(() => {
-      this.measureEle = this.blockElements.find((b) => !b.classList?.contains(`${CSSNAMESPACE}__inactive`));
+      this.measureEle = this.blockElements.find((b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`));
     });
   }
   /**
@@ -330,11 +391,6 @@ export class Table {
           }
           if (i === this.blockElements.length - 1)
             resolve();
-          // const heightGuess = this.getBlockHeight(this.blockElements.indexOf(el));
-          // writeTask(() => {
-          //   el.style.height = heightGuess;
-          //   if (i === this.blockElements.length - 1) resolve();
-          // });
         });
       });
     });
@@ -422,8 +478,8 @@ export class Table {
         if (!el)
           return;
         const height = el.getBoundingClientRect().height;
-        // cache height to our block heights
-        // array for subsequent renders
+        // cache height to our block heights array
+        // for subsequent renders
         const fBhI = this.blockHeights.findIndex((bh) => bh.blockIndex === blockIndex);
         if (fBhI > 0) {
           this.blockHeights[fBhI] = { height, blockIndex };
@@ -443,8 +499,8 @@ export class Table {
   // Component lifecycle
   async componentWillLoad() {
     perMark('init');
-    this.store = await generateStore(this.host, this.rows, this.columns);
-    await this.columnInit();
+    this.store = await generateStore(this.host, this.columns, this.scrollParent);
+    await this.handleRowsChange();
     this.processSlots();
     this.setBlocks();
     this.store.data.onChange('rows', () => this.setBlocks());
@@ -472,9 +528,17 @@ export class Table {
   }
   render() {
     this.blockElements = [];
-    return (h(Host, null, h("div", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, h("caption", { class: `${CSSNAMESPACE}__caption`, 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) => [
+    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("div", { "aria-labelledby": '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-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, h("caption", { class: {
+        [`${CSSNAMESPACE}__caption`]: true,
+        [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
+      }, id: 'table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnOrderClick: this.sortStart, onColumnPinned: this.handleColumnPinned }),
-    ]))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+    ]))), this.loading &&
+      !this.blocks.length &&
+      [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h("nano-skeleton", null) })))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
         this.setupBlockIO(tb, blockIndex);
       }, class: {
@@ -485,9 +549,12 @@ export class Table {
       return (h(TableRow, { rowRenderer: this.rowRender, row: row }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
     })) : (h("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex),
-      } }))))), (this.showFooter || !!this.footRender) && (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 }),
-    ]))))))));
+    ]))))), !!this.blocks.length && (h("nano-spinner", { type: "circle", class: {
+        [`${CSSNAMESPACE}__spinner`]: true,
+        [`${CSSNAMESPACE}__spinner--show`]: this.loading,
+      } })))));
   }
   static get is() { return "nano-table"; }
   static get originalStyleUrls() {
@@ -561,16 +628,59 @@ export class Table {
         "reflect": false,
         "defaultValue": "false"
       },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "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"
+        },
+        "getter": true,
+        "setter": true,
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "placeholderSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When loading rows asynchronously, this will render this number of placeholder rows"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "placeholder-size",
+        "reflect": false,
+        "defaultValue": "5"
+      },
       "rows": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "TableTypes.NanoTable['rows']",
-          "resolved": "RowData[]",
+          "original": "| TableTypes.NanoTable['rows']\n    | Promise<TableTypes.NanoTable['rows']>",
+          "resolved": "Promise<RowData[]> | RowData[]",
           "references": {
             "TableTypes": {
               "location": "import",
               "path": "../../interface"
+            },
+            "Promise": {
+              "location": "global"
             }
           }
         },
@@ -581,8 +691,7 @@ export class Table {
           "text": "The data to place in the table"
         },
         "getter": false,
-        "setter": false,
-        "defaultValue": "[]"
+        "setter": false
       },
       "columns": {
         "type": "unknown",
@@ -807,6 +916,7 @@ export class Table {
   }
   static get states() {
     return {
+      "_loading": {},
       "blocks": {},
       "activeBlocks": {},
       "measureHeight": {}
@@ -946,7 +1056,7 @@ export class Table {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired after a general search"
+          "text": "Fired after a general / cross column search"
         },
         "complexType": {
           "original": "{ term: string }",