@duetds/components 4.36.1 → 5.0.0

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -1,174 +1,228 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Method, Prop, State } from "@stencil/core";
-import { debounce } from "../../utils/js-utils";
-import { getLocaleString, sanitizeString } from "../../utils/language-utils";
-import { generateTemplateFn } from "../../utils/template-utils";
+import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
+import { fieldSorter } from "../../utils/js-utils";
+import { isKeyboardClick } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { TableData } from "./duet-editable-table-tabledata";
 export class DuetEditableTable {
   constructor() {
-    this.template = undefined;
     /**
-     * State() variables
-     * @internal
+     * Duet-table: margin of the component.
      */
-    this.tick = Date.now();
+    this.margin = "auto";
     /**
-     * Map of items that contain list of things.
+     * Duet-table: Style variation of the table.
      */
-    this.items = new Map();
+    this.variation = "striped";
     /**
-     * Key used to set vertical alignment of action buttons
+     * Duet-table: Controls whether the table has a sticky header.
+     * Sticky headers are not compatible with breakpoint="none-scrollable".
      */
-    this.alignment = "middle";
+    this.sticky = false;
     /**
-     * Array of internationalized defaults for the default groups labels.
+     * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+     * table header becomes sticky.
      */
-    this.groupsLabelDefaults = {
-      fi: "Kaikki",
-      en: "All items",
-      sv: "Alla objekt",
-    };
+    this.stickyDistance = "with-links";
     /**
-     * Array of internationalized defaults for the default action labels.
+     * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.
+     * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+     * Set to "none" to disable the responsive functionality.
+     * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+     * this is useful for comparison tables where it's important to maintain column and row layout.
      */
-    this.actionLabelDefaults = {
-      fi: "Toiminnot",
-      en: "Actions",
-      sv: "Handlingar",
-    };
+    this.breakpoint = "small";
     /**
-     * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
-     * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
-     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
+     * Define actions for all items in a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
      */
-    this.groups = [
-      { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },
-    ];
+    this.actions = undefined;
     /**
-     * Array of actions that are mapped via the map variable to the various groups defined in group.
+     * Define columns for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
      * @default undefined
-     * @example [{
-                variation: "default",
-                icon: "action-edit-2",
-                id: "edit",
-                map: ["success"],
-                label: {
-                  fi: " Label",
-                  en: " Label",
-                  sv: " Label",
-                }
-              }]
      */
-    this.actions = undefined;
+    this.columns = undefined;
     /**
-     * Shows or hides the table labels.
+     * Define rows for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
      */
-    this.hideGroups = false;
+    this.rows = undefined;
     /**
-     * Exposes the aria role for optimizing accessibility.
+     * Controls whether the table is sortable by headers
      */
-    this.accessibleRole = undefined;
+    this.sortable = false;
+    /**
+     * Optional id that get passed to the table and used to setup ::parts
+     */
+    this.groupId = "";
     /**
      * Theme of the table.
      */
     this.theme = "";
     /**
-     * Private methods.
+     * Exposes the aria role for optimizing accessibility.
      */
-    this.kick = debounce(() => {
-      this.tick = Date.now();
-    }, 100); // will trigger re-render
+    this.accessibleRole = undefined;
+    this.sortableDefaultLabel = {
+      fi: "Järjestä",
+      en: "Click to sort",
+      sv: "Klicka för att sortera",
+    };
+    this.actionColumnLabel = {
+      en: "Actions for rows",
+      fi: "Toiminnot rivillä",
+      sv: "Åtgärder för rader",
+    };
     /**
-     * If a user defines a template section within editable table, try to read an use it.
+     * Private methods.
      */
-    this.getTemplate = () => {
-      const templateDom = this.element.getElementsByTagName("template");
-      if (templateDom === null || templateDom === void 0 ? void 0 : templateDom.length) {
-        const templateString = templateDom[0].content.firstElementChild.outerHTML;
-        return generateTemplateFn(templateString);
-      }
-      else {
-        return false;
-      }
-    };
-    this.getItemData = (data) => {
-      const { item, group, uid } = data;
-      if (this.template) {
-        return {
-          group,
-          uid,
-          item: this.template(item),
-        };
-      }
-      return { item, group, uid };
+    this.toggleColumn = (column, e) => {
+      e.preventDefault();
+      const { sort_order, direction, index, key } = column;
+      this.duetTableToggle.emit({
+        sort_order,
+        index,
+        direction,
+        key,
+        component: "duet-editable-table",
+        originalEvent: e,
+      });
     };
-    this.filterMap = needle => {
-      if (needle === "all") {
-        return Array.from(this.items);
+    this.handleKeyDown = (column, e) => {
+      if (isKeyboardClick(e)) {
+        this.toggleColumn(column, e);
       }
-      return Array.from(this.items).filter(item => needle === item[1].group);
     };
   }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
-    // look for a <template> region in the duet-editable-table
-    this.template = this.getTemplate();
-    // take care of the case where groups and actions are defined as html properties instead of javascript objects
-    if (typeof this.groups === "string") {
-      this.internalGroupArray = sanitizeString(this.groups);
-    }
-    else {
-      this.internalGroupArray = this.groups;
+    inheritGlobalTheme(this);
+  }
+  createLabel(column) {
+    const { sort_order, direction, index, label } = column;
+    const i18nLabel = getLocaleString(label);
+    if (!this.sortable) {
+      return i18nLabel;
     }
-    if (typeof this.actions === "string") {
-      this.internalActionsArray = sanitizeString(this.actions);
+    const getButtonIcon = () => {
+      // "action-subtract-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-subtract-small.svg
+      // "action-arrow-down-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-down-small.svg
+      // "action-arrow-up-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-up-small.svg
+      if (!!sort_order && direction === 1) {
+        return "action-arrow-down-small";
+      }
+      else if (!!sort_order && direction === -1) {
+        return "action-arrow-up-small";
+      }
+      return "action-subtract-small";
+    };
+    return (h("span", { class: "duet-table-label", "data-index": index },
+      h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": getLocaleString(this.sortableDefaultLabel), variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
+  }
+  getSortedColumns() {
+    //create a new array from sort instead of mutating original
+    return [...this.columns].sort(fieldSorter(["index"]));
+  }
+  getRowSortOrder() {
+    //create a new array from sort instead of mutating original
+    const fields = [...this.columns].sort(fieldSorter(["sort_order"]));
+    //return only key from objects that have sort_order
+    return fields
+      .filter(column => column.sort_order)
+      .map(column => {
+      // add - in-front of descending direction (required by field-sorter)
+      return column.direction === -1 ? `-${column.key}` : column.key;
+    });
+  }
+  renderTableHeader() {
+    if (!this.columns) {
+      return;
     }
-    else {
-      this.internalActionsArray = this.actions;
+    const sortedColumns = this.getSortedColumns();
+    return (h("tr", { class: {
+        "duet-table-action-header": !!this.actions,
+      } },
+      sortedColumns.map(column => {
+        if (column.display !== false) {
+          return h("th", { scope: "col" }, this.createLabel(column));
+        }
+      }),
+      this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, getLocaleString(this.actionColumnLabel))))));
+  }
+  renderActions(rowItem, index) {
+    // escape early
+    if (!this.actions) {
+      return;
     }
-    inheritGlobalTheme(this);
+    // iterate through actions and add them in the sidebar
+    return (h("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
+      return (h("duet-action-button", { actionMeta: Object.assign({}, (rowItem === null || rowItem === void 0 ? void 0 : rowItem.meta) || {}, { index }), actionId: (rowItem === null || rowItem === void 0 ? void 0 : rowItem.uid) || (rowItem === null || rowItem === void 0 ? void 0 : rowItem.id) || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background }));
+    })));
+  }
+  renderTableBody() {
+    const columns = this.getSortedColumns();
+    const rowSortOrder = this.getRowSortOrder();
+    const sortedRows = [...this.rows].sort(fieldSorter(rowSortOrder));
+    // return a tbody with rows for each item in sortedRows
+    return sortedRows.map((row, index) => (h("tr", { class: {
+        "duet-table-action-row": !!this.actions,
+        "duet-editable-table-row": true,
+        [`duet-editable-table-row-${this.groupId}`]: true,
+      }, "data-meta": JSON.stringify(row.meta) },
+      columns.map(column => {
+        //if we don't have any data for this column, try getting an item instead (for backwards compatibility
+        const value = row[column.key] ? row[column.key] : row.item;
+        if (column.display !== false) {
+          return h(TableData, { data: value, groupId: this.groupId });
+        }
+      }),
+      this.actions && this.renderActions(row, index))));
   }
   /**
-   * Method to force an update of a tabular data array.
-   * when called the method will rerender the entire tabular structure.
+   * Render Methods
    */
-  async updateTable(passedItems = undefined) {
-    this.items = new Map(passedItems || this.items);
-    this.kick();
-  }
   render() {
     return (h(Host, { class: {
+        [`duet-editable-table-${this.variation}`]: true,
+        [`duet-editable-table-${this.theme}`]: true,
+        // sticky only valid when in regular table layout
+        "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
+        "duet-editable-table-sortable": this.sortable,
+        "duet-editable-table-actions": !!this.actions,
+        "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
-      } }, this.internalGroupArray.map(group => {
-      const currentGroup = this.filterMap(group.id);
-      if (!currentGroup.length) {
-        return;
-      }
-      return (h("duet-table", { variation: "plain", breakpoint: "none", role: "", margin: this.hideGroups ? "none" : "auto" },
-        h("table", { class: "duet-editable-table", "aria-role": this.accessibleRole },
-          h("thead", { class: "duet-editable-table-header" },
+      } },
+      h("duet-table", { sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint },
+        h("table", { role: this.accessibleRole },
+          h("caption", null,
+            h("slot", { name: "tcaption" })),
+          h("thead", null,
             h("tr", null,
-              h("th", { class: {
-                  "duet-editable-table-header-hidden": this.hideGroups,
-                } }, !this.hideGroups ? (getLocaleString(group.label)) : (h("duet-visually-hidden", null, getLocaleString(group.label)))),
-              h("th", { class: {
-                  "duet-editable-table-header-hidden": this.hideGroups,
-                } },
-                h("duet-visually-hidden", null, group.actionLabel
-                  ? getLocaleString(group.actionLabel)
-                  : getLocaleString(this.actionLabelDefaults))))),
-          h("tbody", null, currentGroup.map(dataAsArray => {
-            const [key, value] = dataAsArray;
-            return (h("duet-editable-table-item", { theme: this.theme, keyName: key, data: this.getItemData(value), groupId: group.id, part: group.id, alignment: this.alignment, actions: this.internalActionsArray }));
-          })))));
-    })));
+              h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 },
+                h("slot", { name: "thead-first" }))),
+            this.renderTableHeader(),
+            h("tr", null,
+              h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 },
+                h("slot", { name: "thead-last" })))),
+          h("tbody", null, this.renderTableBody()),
+          h("tfoot", null,
+            h("tr", null,
+              h("th", { class: "duet-editable-table-footer-menu", colSpan: 99 },
+                h("slot", { name: "tfoot" }))))))));
   }
   static get is() { return "duet-editable-table"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["duet-editable-table.scss"]
   }; }
@@ -176,15 +230,16 @@ export class DuetEditableTable {
     "$": ["duet-editable-table.css"]
   }; }
   static get properties() { return {
-    "items": {
-      "type": "unknown",
-      "mutable": true,
+    "margin": {
+      "type": "string",
+      "mutable": false,
       "complexType": {
-        "original": "DuetEditableTableItems",
-        "resolved": "Map<any, DuetEditableTableItemData>",
+        "original": "DuetMargin",
+        "resolved": "\"auto\" | \"none\"",
         "references": {
-          "DuetEditableTableItems": {
-            "location": "local"
+          "DuetMargin": {
+            "location": "import",
+            "path": "../../common-types"
           }
         }
       },
@@ -192,38 +247,63 @@ export class DuetEditableTable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Map of items that contain list of things."
+        "text": "Duet-table: margin of the component."
       },
-      "defaultValue": "new Map()"
+      "attribute": "margin",
+      "reflect": false,
+      "defaultValue": "\"auto\""
     },
-    "alignment": {
+    "variation": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "DuetTableVariant",
+        "resolved": "\"fixed\" | \"plain\" | \"striped\"",
+        "references": {
+          "DuetTableVariant": {
+            "location": "import",
+            "path": "../duet-table/duet-table"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Duet-table: Style variation of the table."
+      },
+      "attribute": "variation",
+      "reflect": false,
+      "defaultValue": "\"striped\""
+    },
+    "sticky": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Key used to set vertical alignment of action buttons"
+        "text": "Duet-table: Controls whether the table has a sticky header.\nSticky headers are not compatible with breakpoint=\"none-scrollable\"."
       },
-      "attribute": "alignment",
+      "attribute": "sticky",
       "reflect": false,
-      "defaultValue": "\"middle\""
+      "defaultValue": "false"
     },
-    "groupsLabelDefaults": {
-      "type": "unknown",
+    "stickyDistance": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetTableStickyDistance",
+        "resolved": "\"none\" | \"with-links\" | \"without-links\"",
         "references": {
-          "DuetLangObject": {
+          "DuetTableStickyDistance": {
             "location": "import",
-            "path": "../../utils/language-utils"
+            "path": "../duet-table/duet-table"
           }
         }
       },
@@ -231,20 +311,22 @@ export class DuetEditableTable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Array of internationalized defaults for the default groups labels."
+        "text": "Duet-table: Adjust the distance from top of the viewport (in pixels) when the\ntable header becomes sticky."
       },
-      "defaultValue": "{\n    fi: \"Kaikki\",\n    en: \"All items\",\n    sv: \"Alla objekt\",\n  }"
+      "attribute": "sticky-distance",
+      "reflect": false,
+      "defaultValue": "\"with-links\""
     },
-    "actionLabelDefaults": {
-      "type": "unknown",
+    "breakpoint": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetTableBreakpoint",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"xx-large\" | \"xxx-large\"",
         "references": {
-          "DuetLangObject": {
+          "DuetTableBreakpoint": {
             "location": "import",
-            "path": "../../utils/language-utils"
+            "path": "../duet-table/duet-table"
           }
         }
       },
@@ -252,18 +334,20 @@ export class DuetEditableTable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Array of internationalized defaults for the default action labels."
+        "text": "Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.\nThis prop controls the breakpoint at which the table should be rendered as a _regular_ table.\nSet to \"none\" to disable the responsive functionality.\nSet to \"none-scrollable\" to disable responsive functionality _and_ allow horizontal scrolling -\nthis is useful for comparison tables where it's important to maintain column and row layout."
       },
-      "defaultValue": "{\n    fi: \"Toiminnot\",\n    en: \"Actions\",\n    sv: \"Handlingar\",\n  }"
+      "attribute": "breakpoint",
+      "reflect": false,
+      "defaultValue": "\"small\""
     },
-    "groups": {
-      "type": "string",
-      "mutable": false,
+    "actions": {
+      "type": "unknown",
+      "mutable": true,
       "complexType": {
-        "original": "DuetEditableTableGroupNames | string",
-        "resolved": "string | { id: string; label: DuetLangObject; actionLabel?: DuetLangObject; }[]",
+        "original": "DuetEditableTableActions",
+        "resolved": "{ icon: string; color: string; background: string; size: DuetActionButtonIconSize; name: string; map?: string[]; label?: DuetLangObject; }[]",
         "references": {
-          "DuetEditableTableGroupNames": {
+          "DuetEditableTableActions": {
             "location": "local"
           }
         }
@@ -273,27 +357,21 @@ export class DuetEditableTable {
       "docs": {
         "tags": [{
             "name": "default",
-            "text": "{ id: \"all\", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }."
-          }, {
-            "name": "example",
-            "text": "[{ id: \"success\", label: {fi: \"Onnistunut\", en: \"Success\", sv: \"Alt klart\", }}]."
+            "text": "undefined"
           }],
-        "text": "Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions)."
+        "text": "Define actions for all items in a table\nAn alternative to inline HTML table.\nrequired for Sortable tables"
       },
-      "attribute": "groups",
-      "reflect": false,
-      "defaultValue": "[\n    { id: \"all\", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },\n  ]"
+      "defaultValue": "undefined"
     },
-    "actions": {
-      "type": "string",
-      "mutable": false,
+    "columns": {
+      "type": "unknown",
+      "mutable": true,
       "complexType": {
-        "original": "DuetEditableTableActions | string",
-        "resolved": "string | { icon: string; color: string; color_hover: string; id: string; map?: string[]; label?: DuetLangObject; }[]",
+        "original": "DuetEditableTableColumns",
+        "resolved": "DuetEditableTableColumn[]",
         "references": {
-          "DuetEditableTableActions": {
-            "location": "import",
-            "path": "./duet-editable-table-item"
+          "DuetEditableTableColumns": {
+            "location": "local"
           }
         }
       },
@@ -303,17 +381,35 @@ export class DuetEditableTable {
         "tags": [{
             "name": "default",
             "text": "undefined"
-          }, {
-            "name": "example",
-            "text": "[{\nvariation: \"default\",\nicon: \"action-edit-2\",\nid: \"edit\",\nmap: [\"success\"],\nlabel: {\n  fi: \" Label\",\n  en: \" Label\",\n  sv: \" Label\",\n}\n}]"
           }],
-        "text": "Array of actions that are mapped via the map variable to the various groups defined in group."
+        "text": "Define columns for a table\nAn alternative to inline HTML table.\nrequired for Sortable tables"
+      },
+      "defaultValue": "undefined"
+    },
+    "rows": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetEditableTableRows",
+        "resolved": "Record<string, any>[]",
+        "references": {
+          "DuetEditableTableRows": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "undefined"
+          }],
+        "text": "Define rows for a table\nAn alternative to inline HTML table.\nrequired for Sortable tables"
       },
-      "attribute": "actions",
-      "reflect": false,
       "defaultValue": "undefined"
     },
-    "hideGroups": {
+    "sortable": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -325,13 +421,13 @@ export class DuetEditableTable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Shows or hides the table labels."
+        "text": "Controls whether the table is sortable by headers"
       },
-      "attribute": "hide-table-labels",
+      "attribute": "sortable",
       "reflect": false,
       "defaultValue": "false"
     },
-    "accessibleRole": {
+    "groupId": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -343,11 +439,11 @@ export class DuetEditableTable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Exposes the aria role for optimizing accessibility."
+        "text": "Optional id that get passed to the table and used to setup ::parts"
       },
-      "attribute": "accessible-role",
+      "attribute": "group-id",
       "reflect": false,
-      "defaultValue": "undefined"
+      "defaultValue": "\"\""
     },
     "theme": {
       "type": "string",
@@ -371,34 +467,64 @@ export class DuetEditableTable {
       "attribute": "theme",
       "reflect": false,
       "defaultValue": "\"\""
+    },
+    "accessibleRole": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Exposes the aria role for optimizing accessibility."
+      },
+      "attribute": "accessible-role",
+      "reflect": false,
+      "defaultValue": "undefined"
     }
   }; }
-  static get states() { return {
-    "tick": {}
-  }; }
-  static get methods() { return {
-    "updateTable": {
+  static get events() { return [{
+      "method": "duetTableToggle",
+      "name": "duetTableToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when table is sortable and a header item is clicked/enter is pressed"
+      },
       "complexType": {
-        "signature": "(passedItems?: DuetEditableTableItems) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
+        "original": "DuetTableToggleEvent",
+        "resolved": "{ component: \"duet-editable-table\"; sort_order?: number; direction: 1 | -1; index: number; key: string; originalEvent: MouseEvent | KeyboardEvent; }",
         "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "DuetEditableTableItems": {
+          "DuetTableToggleEvent": {
             "location": "local"
           }
-        },
-        "return": "Promise<void>"
-      },
+        }
+      }
+    }, {
+      "method": "duetMenuClick",
+      "name": "duetMenuClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
-        "text": "Method to force an update of a tabular data array.\nwhen called the method will rerender the entire tabular structure.",
-        "tags": []
+        "tags": [],
+        "text": "Event emitted when table is sortable and a header item is clicked/enter is pressed"
+      },
+      "complexType": {
+        "original": "DuetTableMenuEvent",
+        "resolved": "{ component: \"duet-editable-table\"; originalEvent: MouseEvent | KeyboardEvent; }",
+        "references": {
+          "DuetTableMenuEvent": {
+            "location": "local"
+          }
+        }
       }
-    }
-  }; }
+    }]; }
   static get elementRef() { return "element"; }
 }