@limetech/lime-elements 36.1.0-next.2 → 36.1.0-next.21

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Element, Watch, Event, Host, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import TabulatorTable from 'tabulator-tables';
 import { ColumnDefinitionFactory, createColumnSorter } from './columns';
 import { isEqual, has } from 'lodash-es';
@@ -25,33 +25,6 @@ const FIRST_PAGE = 1;
  */
 export class Table {
   constructor() {
-    /**
-     * Data to be displayed in the table
-     */
-    this.data = [];
-    /**
-     * Columns used to display the data
-     */
-    this.columns = [];
-    /**
-     * Set to either `local` or `remote` to change how the table handles the
-     * loaded data. When in `local` mode, all sorting and pagination will be
-     * done locally with the data given. When in `remote` mode, the consumer
-     * is responsible to give the table new data when a `load` event occurs
-     */
-    this.mode = 'local';
-    /**
-     * The initial sorted columns
-     */
-    this.sorting = [];
-    /**
-     * Set to `true` to trigger loading animation
-     */
-    this.loading = false;
-    /**
-     * The page to show
-     */
-    this.page = FIRST_PAGE;
     this.getActiveRows = () => {
       if (!this.tabulator) {
         return [];
@@ -92,6 +65,21 @@ export class Table {
           column.title === component.getDefinition().title);
       });
     };
+    this.data = [];
+    this.columns = [];
+    this.mode = 'local';
+    this.layout = undefined;
+    this.pageSize = undefined;
+    this.totalRows = undefined;
+    this.sorting = [];
+    this.activeRow = undefined;
+    this.movableColumns = undefined;
+    this.loading = false;
+    this.page = FIRST_PAGE;
+    this.emptyMessage = undefined;
+    this.aggregates = undefined;
+    this.selectable = undefined;
+    this.selection = undefined;
     this.handleDataSorting = this.handleDataSorting.bind(this);
     this.handlePageLoaded = this.handlePageLoaded.bind(this);
     this.handleAjaxRequesting = this.handleAjaxRequesting.bind(this);
@@ -441,19 +429,13 @@ export class Table {
     var _a;
     return (h(Host, { class: {
         'has-low-density': this.layout === 'lowDensity',
-      } },
-      h("div", { id: "tabulator-container", class: {
-          'has-pagination': this.totalRows > this.pageSize,
-          'has-aggregation': this.hasAggregation(this.columns),
-          'has-movable-columns': this.movableColumns,
-          'has-rowselector': this.selectable,
-          'has-selection': (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection,
-        } },
-        h("div", { id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } },
-          h("limel-spinner", { size: "large" })),
-        this.renderEmptyMessage(),
-        this.renderSelectAll(),
-        h("div", { id: "tabulator-table" }))));
+      } }, h("div", { id: "tabulator-container", class: {
+        'has-pagination': this.totalRows > this.pageSize,
+        'has-aggregation': this.hasAggregation(this.columns),
+        'has-movable-columns': this.movableColumns,
+        'has-rowselector': this.selectable,
+        'has-selection': (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection,
+      } }, h("div", { id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { id: "tabulator-table" }))));
   }
   renderSelectAll() {
     var _a, _b, _c;
@@ -461,442 +443,450 @@ export class Table {
       return;
     }
     const showSelectAll = !this.loading && this.tableSelection;
-    return (h("div", { class: "select-all", style: { display: showSelectAll ? 'inline-block' : 'none' } },
-      h("limel-checkbox", { onChange: this.selectAllOnChange, disabled: !this.data.length, checked: (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection, indeterminate: ((_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection) &&
-          ((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) < this.data.length })));
+    return (h("div", { class: "select-all", style: { display: showSelectAll ? 'inline-block' : 'none' } }, h("limel-checkbox", { onChange: this.selectAllOnChange, disabled: !this.data.length, checked: (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection, indeterminate: ((_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection) &&
+        ((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) < this.data.length })));
   }
   renderEmptyMessage() {
     const showEmptyMessage = !this.loading && !this.data.length && this.emptyMessage;
-    return (h("div", { id: "tabulator-empty-text", style: { display: showEmptyMessage ? 'flex' : 'none' } },
-      h("span", null, this.emptyMessage)));
+    return (h("div", { id: "tabulator-empty-text", style: { display: showEmptyMessage ? 'flex' : 'none' } }, h("span", null, this.emptyMessage)));
   }
   static get is() { return "limel-table"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["table.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["table.css"]
-  }; }
-  static get properties() { return {
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "object[]",
-        "resolved": "object[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Data to be displayed in the table"
-      },
-      "defaultValue": "[]"
-    },
-    "columns": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Column[]",
-        "resolved": "Column<any>[]",
-        "references": {
-          "Column": {
-            "location": "import",
-            "path": "./table.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "object[]",
+          "resolved": "object[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Data to be displayed in the table"
+        },
+        "defaultValue": "[]"
+      },
+      "columns": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Column[]",
+          "resolved": "Column<any>[]",
+          "references": {
+            "Column": {
+              "location": "import",
+              "path": "./table.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Columns used to display the data"
-      },
-      "defaultValue": "[]"
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'local' | 'remote'",
-        "resolved": "\"local\" | \"remote\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to either `local` or `remote` to change how the table handles the\nloaded data. When in `local` mode, all sorting and pagination will be\ndone locally with the data given. When in `remote` mode, the consumer\nis responsible to give the table new data when a `load` event occurs"
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "'local'"
-    },
-    "layout": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Layout",
-        "resolved": "\"default\" | \"lowDensity\" | \"stretchColumns\" | \"stretchLastColumn\"",
-        "references": {
-          "Layout": {
-            "location": "import",
-            "path": "./layout"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Columns used to display the data"
+        },
+        "defaultValue": "[]"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'local' | 'remote'",
+          "resolved": "\"local\" | \"remote\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to either `local` or `remote` to change how the table handles the\nloaded data. When in `local` mode, all sorting and pagination will be\ndone locally with the data given. When in `remote` mode, the consumer\nis responsible to give the table new data when a `load` event occurs"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'local'"
+      },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout",
+          "resolved": "\"default\" | \"lowDensity\" | \"stretchColumns\" | \"stretchLastColumn\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "./layout"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the layout of the table, based on how width of the columns are calculated.\n\n- `default`: makes columns as wide as their contents.\n- `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width.\n- `stretchColumns`: stretches all columns to fill the available width when possible.\n- `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout."
-      },
-      "attribute": "layout",
-      "reflect": false
-    },
-    "pageSize": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Number of rows per page"
-      },
-      "attribute": "page-size",
-      "reflect": false
-    },
-    "totalRows": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The number of total rows available for the data"
-      },
-      "attribute": "total-rows",
-      "reflect": false
-    },
-    "sorting": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ColumnSorter[]",
-        "resolved": "ColumnSorter[]",
-        "references": {
-          "ColumnSorter": {
-            "location": "import",
-            "path": "./table.types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the layout of the table, based on how width of the columns are calculated.\n\n- `default`: makes columns as wide as their contents.\n- `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width.\n- `stretchColumns`: stretches all columns to fill the available width when possible.\n- `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout."
+        },
+        "attribute": "layout",
+        "reflect": false
+      },
+      "pageSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number of rows per page"
+        },
+        "attribute": "page-size",
+        "reflect": false
+      },
+      "totalRows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of total rows available for the data"
+        },
+        "attribute": "total-rows",
+        "reflect": false
+      },
+      "sorting": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ColumnSorter[]",
+          "resolved": "ColumnSorter[]",
+          "references": {
+            "ColumnSorter": {
+              "location": "import",
+              "path": "./table.types"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The initial sorted columns"
+        },
+        "defaultValue": "[]"
+      },
+      "activeRow": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "object",
+          "resolved": "object",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active row in the table"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The initial sorted columns"
-      },
-      "defaultValue": "[]"
-    },
-    "activeRow": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "object",
-        "resolved": "object",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Active row in the table"
-      }
-    },
-    "movableColumns": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to enable reordering of the columns by dragging them"
-      },
-      "attribute": "movable-columns",
-      "reflect": false
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to trigger loading animation"
-      },
-      "attribute": "loading",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "page": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The page to show"
-      },
-      "attribute": "page",
-      "reflect": false,
-      "defaultValue": "FIRST_PAGE"
-    },
-    "emptyMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A message to display when the table has no data"
-      },
-      "attribute": "empty-message",
-      "reflect": false
-    },
-    "aggregates": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ColumnAggregate[]",
-        "resolved": "ColumnAggregate[]",
-        "references": {
-          "ColumnAggregate": {
-            "location": "import",
-            "path": "./table.types"
+      "movableColumns": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to enable reordering of the columns by dragging them"
+        },
+        "attribute": "movable-columns",
+        "reflect": false
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to trigger loading animation"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "page": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The page to show"
+        },
+        "attribute": "page",
+        "reflect": false,
+        "defaultValue": "FIRST_PAGE"
+      },
+      "emptyMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A message to display when the table has no data"
+        },
+        "attribute": "empty-message",
+        "reflect": false
+      },
+      "aggregates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ColumnAggregate[]",
+          "resolved": "ColumnAggregate[]",
+          "references": {
+            "ColumnAggregate": {
+              "location": "import",
+              "path": "./table.types"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Column aggregates to be displayed in the table"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Column aggregates to be displayed in the table"
-      }
-    },
-    "selectable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enables row selection"
-      },
-      "attribute": "selectable",
-      "reflect": false
-    },
-    "selection": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "object[]",
-        "resolved": "object[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Selected data. Requires `selectable` to be true."
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables row selection"
+        },
+        "attribute": "selectable",
+        "reflect": false
+      },
+      "selection": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "object[]",
+          "resolved": "object[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Selected data. Requires `selectable` to be true."
+        }
       }
-    }
-  }; }
-  static get events() { return [{
-      "method": "sort",
-      "name": "sort",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when `mode` is `local` the data is sorted"
-      },
-      "complexType": {
-        "original": "ColumnSorter[]",
-        "resolved": "ColumnSorter[]",
-        "references": {
-          "ColumnSorter": {
-            "location": "import",
-            "path": "./table.types"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sort",
+        "name": "sort",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when `mode` is `local` the data is sorted"
+        },
+        "complexType": {
+          "original": "ColumnSorter[]",
+          "resolved": "ColumnSorter[]",
+          "references": {
+            "ColumnSorter": {
+              "location": "import",
+              "path": "./table.types"
+            }
           }
         }
-      }
-    }, {
-      "method": "changePage",
-      "name": "changePage",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a new page has been set"
-      },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      }
-    }, {
-      "method": "load",
-      "name": "load",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when `mode` is `remote` and the table is loading new data. The\nconsumer is responsible for giving the table new data"
-      },
-      "complexType": {
-        "original": "TableParams",
-        "resolved": "TableParams",
-        "references": {
-          "TableParams": {
-            "location": "import",
-            "path": "./table.types"
+      }, {
+        "method": "changePage",
+        "name": "changePage",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a new page has been set"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "load",
+        "name": "load",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when `mode` is `remote` and the table is loading new data. The\nconsumer is responsible for giving the table new data"
+        },
+        "complexType": {
+          "original": "TableParams",
+          "resolved": "TableParams",
+          "references": {
+            "TableParams": {
+              "location": "import",
+              "path": "./table.types"
+            }
           }
         }
-      }
-    }, {
-      "method": "activate",
-      "name": "activate",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a row is activated"
-      },
-      "complexType": {
-        "original": "object",
-        "resolved": "object",
-        "references": {}
-      }
-    }, {
-      "method": "changeColumns",
-      "name": "changeColumns",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the columns have been changed"
-      },
-      "complexType": {
-        "original": "Column[]",
-        "resolved": "Column<any>[]",
-        "references": {
-          "Column": {
-            "location": "import",
-            "path": "./table.types"
+      }, {
+        "method": "activate",
+        "name": "activate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a row is activated"
+        },
+        "complexType": {
+          "original": "object",
+          "resolved": "object",
+          "references": {}
+        }
+      }, {
+        "method": "changeColumns",
+        "name": "changeColumns",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the columns have been changed"
+        },
+        "complexType": {
+          "original": "Column[]",
+          "resolved": "Column<any>[]",
+          "references": {
+            "Column": {
+              "location": "import",
+              "path": "./table.types"
+            }
           }
         }
-      }
-    }, {
-      "method": "select",
-      "name": "select",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the row selection has been changed"
-      },
-      "complexType": {
-        "original": "object[]",
-        "resolved": "object[]",
-        "references": {}
-      }
-    }, {
-      "method": "selectAll",
-      "name": "selectAll",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the select all rows state is toggled"
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }]; }
+      }, {
+        "method": "select",
+        "name": "select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the row selection has been changed"
+        },
+        "complexType": {
+          "original": "object[]",
+          "resolved": "object[]",
+          "references": {}
+        }
+      }, {
+        "method": "selectAll",
+        "name": "selectAll",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the select all rows state is toggled"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "totalRows",
-      "methodName": "totalRowsChanged"
-    }, {
-      "propName": "pageSize",
-      "methodName": "pageSizeChanged"
-    }, {
-      "propName": "page",
-      "methodName": "pageChanged"
-    }, {
-      "propName": "activeRow",
-      "methodName": "activeRowChanged"
-    }, {
-      "propName": "data",
-      "methodName": "updateData"
-    }, {
-      "propName": "columns",
-      "methodName": "updateColumns"
-    }, {
-      "propName": "aggregates",
-      "methodName": "updateAggregates"
-    }, {
-      "propName": "selection",
-      "methodName": "updateSelection"
-    }, {
-      "propName": "selectable",
-      "methodName": "updateSelectable"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "totalRows",
+        "methodName": "totalRowsChanged"
+      }, {
+        "propName": "pageSize",
+        "methodName": "pageSizeChanged"
+      }, {
+        "propName": "page",
+        "methodName": "pageChanged"
+      }, {
+        "propName": "activeRow",
+        "methodName": "activeRowChanged"
+      }, {
+        "propName": "data",
+        "methodName": "updateData"
+      }, {
+        "propName": "columns",
+        "methodName": "updateColumns"
+      }, {
+        "propName": "aggregates",
+        "methodName": "updateAggregates"
+      }, {
+        "propName": "selection",
+        "methodName": "updateSelection"
+      }, {
+        "propName": "selectable",
+        "methodName": "updateSelectable"
+      }];
+  }
 }