@momentum-ui/web-components 2.16.3 → 2.16.5

package/src/components/table-advanced/TableAdvanced.ts

@@ -1,1081 +0,0 @@
-/**
- * Copyright (c) Cisco Systems, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import "@/components/button/Button";
-import "@/components/icon/Icon";
-import "@/components/menu-overlay/MenuOverlay";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { FocusTrapMixin } from "@/mixins/FocusTrapMixin";
-import reset from "@/wc_scss/reset.scss";
-import { html, internalProperty, LitElement, property, PropertyValues, queryAll } from "lit-element";
-import { nothing, TemplateResult } from "lit-html";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { templateContent } from "lit-html/directives/template-content";
-import Papa from "papaparse";
-import styles from "./scss/module.scss";
-import { debounce, Evt, evt, TemplateCallback, templateCallback, TemplateInfo } from "./src/decorators";
-import { Filter } from "./src/filter";
-
-const IMG = document.createElement("img");
-IMG.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
-
-export namespace TableAdvanced {
-  /**
-   * @element md-table-advanced
-   * @fires md-table-advanced-change
-   */
-  @customElementWithCheck("md-table-advanced")
-  export class ELEMENT extends FocusTrapMixin(LitElement) {
-    @property({ attribute: "config" }) config!: Config | string;
-    @property({ attribute: "data" }) data!: Data | string;
-    @property({ type: String }) isRowFocusable = "true";
-
-    @evt() "md-table-advanced-change"!: Evt<ChangeEvent>;
-
-    @internalProperty() tableConfig!: Config;
-    @internalProperty() tableData!: Data;
-
-    @internalProperty() private error = "";
-
-    @internalProperty() private COLS: Col[] = [];
-    @internalProperty() private ROWS: Cell[][] = [];
-    private updCols = () => this.requestUpdate("COLS");
-    private updRows = () => this.requestUpdate("ROWS");
-
-    @internalProperty() private dragRow = -1;
-    @internalProperty() private dropRow = -1;
-    @internalProperty() private drops: [number, number][] = [];
-    private dragRowElem: HTMLElement | null = null;
-
-    @internalProperty() private dragCol = -1;
-    @internalProperty() private dropCol = -1;
-
-    private isResizing = false;
-    private isSelectable = false;
-    private selected: Record<number, boolean> = {};
-    private expandedRowIdx: Record<number, boolean> = {};
-
-    private dragover = (e: Event) => e.preventDefault();
-
-    @queryAll("tr[tabindex]") tableRaws?: HTMLTableRowElement[];
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      document.removeEventListener("dragover", this.dragover);
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      document.addEventListener("dragover", this.dragover);
-      this.updateTableConfig();
-      this.updateTableData();
-      this.populateTable();
-    }
-
-    protected update(changedProperties: PropertyValues) {
-      super.update(changedProperties);
-      if (changedProperties.has("data")) {
-        this.updateTableData();
-        this.updateDataInTable();
-      }
-    }
-
-    private updateTableData() {
-      if (typeof this.data === "string") {
-        try {
-          this.tableData = JSON.parse(this.data);
-        } catch (error) {
-          console.error("[INVALID_JSON_FORMAT] Please recheck the config json");
-        }
-      } else {
-        this.tableData = { ...this.data };
-      }
-    }
-
-    private updateTableConfig() {
-      if (typeof this.config === "string") {
-        try {
-          this.tableConfig = JSON.parse(this.config);
-        } catch (error) {
-          console.error("[INVALID_JSON_FORMAT] Please recheck the data json");
-        }
-      } else {
-        this.tableConfig = { ...this.config };
-      }
-    }
-
-    private populateColumns() {
-      let index = 0;
-      const pushCol = (col: ColOptions, group?: { name: string; length: number }) => {
-        const f = col.filters || this.tableConfig.default?.col?.filters;
-        const filters = f
-          ? f == "forString"
-            ? Filter.optionsString
-            : f == "forNumber"
-              ? Filter.optionsNumber
-              : f.length
-                ? f
-                : null
-          : null;
-
-        this.COLS.push({
-          options: { ...col },
-          index: index++,
-          group,
-          sort: "default",
-          sorter: col.sorter || this.tableConfig.default?.col?.sorter,
-          isCollapsable: this.tableConfig.cols.collapse == col.id,
-          filter: filters
-            ? {
-                list: filters,
-                selectedIndex: 0,
-                input: "",
-                active: false,
-                menuVisible: false
-              }
-            : undefined
-        });
-      };
-
-      this.tableConfig.cols.define.forEach((col) => {
-        if ("children" in col) {
-          col.children.forEach((c) => pushCol(c, { name: col.groupName, length: col.children.length }));
-        } else {
-          pushCol(col);
-        }
-      });
-      this.isSelectable = !!this.tableConfig.rows && this.tableConfig.rows?.selectable != "none";
-    }
-
-    private populateData() {
-      const lenNodes = this.COLS.length;
-
-      // data
-
-      if ("csv" in this.tableData) {
-        const parse = Papa.parse(this.tableData.csv, {
-          skipEmptyLines: true,
-          transform: (x) => x.trim()
-        });
-        if (parse.errors) {
-          this.error = "PARSE ERROR:\n" + JSON.stringify(parse.errors, null, 2);
-          return;
-        } else {
-          const data = parse.data as string[][];
-          this.ROWS = data.map((x) => x.map((text) => ({ text })));
-        }
-      } else if ("list2d" in this.tableData) {
-        this.ROWS = this.tableData.list2d.map((x) => x.map((text) => ({ text })));
-      } else {
-        while (this.tableData.list.length > lenNodes) {
-          this.ROWS.push(this.tableData.list.splice(0, lenNodes).map((text) => ({ text })));
-        }
-        if (this.tableData.list.length != 0) {
-          this.ROWS.push(this.tableData.list.map((text) => ({ text })));
-        }
-      }
-
-      if (this.ROWS.length == 0) {
-        this.error = "DATA ERROR: Data is empty";
-        return;
-      }
-    }
-
-    private validateData() {
-      const lenNodes = this.COLS.length;
-      // validate
-
-      const lenData = this.ROWS.reduce((acc, d) => acc + d.length, 0);
-      if (lenData % lenNodes != 0) {
-        this.error = this.error =
-          "DATA ERROR: Data length mismatch. You must provide (numberOfRows * numberOfColumns) amount of data values.";
-        return;
-      }
-
-      this.ROWS.forEach((d, i) => {
-        const len = d.length;
-        if (len != lenNodes) {
-          this.error = `DATA ERROR: Total number of cols (=${lenNodes}) and data[${i}] length (=${len}) mismatch`;
-        }
-      });
-    }
-
-    private populateTemplate() {
-      // TEMPLATES
-      const templates = this.tableConfig.cellTemplates;
-      const templatesKeys = Object.keys(templates || {});
-      if (templates && templatesKeys.length) {
-        this.ROWS.forEach((row, iRow) => {
-          row.forEach((cell, iCol) => {
-            for (const k in templates) {
-              const idx = cell.text.indexOf(k);
-              if (idx != -1) {
-                const t = templates[k];
-                const template = this.querySelector<HTMLTemplateElement>(`#${t.templateName}`);
-                if (template == null) {
-                  console.warn(`cellTemplates["${k}"]: Missing '${t.templateName}' template.`);
-                  continue;
-                }
-
-                let text = cell.text.replace(k, "");
-                if (t.contentCb) {
-                  text = t.contentCb({ col: iCol, row: iRow, content: text, insertIndex: idx });
-                }
-
-                this.ROWS[iRow][iCol] = {
-                  text,
-                  template: {
-                    template,
-                    templateCb: t.templateCb,
-                    insertIndex: t.contentUse == "replace" ? -1 : idx
-                  }
-                };
-                break;
-              }
-            }
-          });
-        });
-      }
-    }
-
-    private setDefaultFilterAndSort() {
-      const s = this.tableConfig.default?.sort;
-      if (s) {
-        const col = this.COLS.find((c) => c.options.id == s.colId);
-        if (col) {
-          this.sort(col, s.order);
-        } else {
-          console.warn(`Cant find ${s.colId} col - for sorting`);
-        }
-      }
-
-      const f = this.tableConfig.default?.filter;
-      if (f) {
-        const col = this.COLS.find((c) => c.options.id == f.colId);
-        if (col) {
-          if (col.filter) {
-            col.filter.selectedIndex = f.selectedIndex;
-            col.filter.input = f.input;
-            this.updCols();
-            this.filter(col);
-          } else {
-            console.warn(`Cant find filters on ${f.colId} col`);
-          }
-        } else {
-          console.warn(`Cant find ${f.colId} col - for filtering`);
-        }
-      }
-    }
-
-    private populateTable() {
-      this.populateColumns();
-      this.populateData();
-      this.validateData();
-      this.setDefaultFilterAndSort();
-      this.populateTemplate();
-    }
-
-    private updateDataInTable() {
-      this.populateData();
-      this.validateData();
-      this.populateTemplate();
-    }
-
-    // --------------
-
-    private onDropRow() {
-      if (this.dragRow != this.dropRow) {
-        this.drops.push([this.dragRow, this.dropRow]);
-      }
-
-      this.dragRow = -1;
-      this.dropRow = -1;
-      if (this.dragRowElem) {
-        this.dragRowElem.setAttribute("draggable", "false");
-        this.dragRowElem = null;
-      }
-    }
-
-    private onDropCol() {
-      if (this.dragCol != this.dropCol) {
-        const drag = this.COLS[this.dragCol];
-        const drop = this.COLS[this.dropCol];
-        const gDrag = drag.group;
-        const gDrop = drop.group;
-        const iDrag = drag.index;
-        const iDrop = drop.index;
-        drag.group = gDrop;
-        drop.group = gDrag;
-        drag.index = iDrop;
-        drop.index = iDrag;
-        this.COLS[this.dragCol] = drop;
-        this.COLS[this.dropCol] = drag;
-
-        this.ROWS.forEach((row) => {
-          const rDrag = row[this.dragCol];
-          const rDrop = row[this.dropCol];
-          row[this.dragCol] = rDrop;
-          row[this.dropCol] = rDrag;
-        });
-
-        this.updCols();
-        this.updRows();
-      }
-
-      this.dragCol = -1;
-      this.dropCol = -1;
-    }
-
-    private sort(col: Col, order?: SortOrder) {
-      if (!col.sorter) return;
-
-      this.clearSelection();
-      this.drops = [];
-
-      this.COLS.forEach((c) => {
-        if (c.options.id == col.options.id) {
-          c.sort = order ? order : c.sort == "default" ? "ascending" : c.sort == "ascending" ? "descending" : "default";
-        } else {
-          c.sort = "default";
-        }
-      });
-
-      this.updCols();
-      this.requestUpdate();
-
-      this["md-table-advanced-change"].emit({
-        type: "sort",
-        order: col.sort
-      });
-    }
-
-    @debounce(500)
-    private filter(col: Col) {
-      if (!col.filter) return;
-
-      this.clearSelection();
-      this.drops = [];
-
-      const input = col.filter.input.trim();
-      const filter = col.filter.list[col.filter.selectedIndex];
-
-      col.filter.active = input ? true : false;
-      this.requestUpdate();
-
-      if (input) {
-        this["md-table-advanced-change"].emit({
-          type: "filter-on",
-          filter,
-          input
-        });
-      } else {
-        this["md-table-advanced-change"].emit({
-          type: "filter-off",
-          filter: col.filter.list[col.filter.selectedIndex]
-        });
-      }
-    }
-
-    private selectRow(p: { row: Row; shiftKey: boolean; metaKey: boolean }) {
-      const i = p.row.idx;
-      const isSelected = Object.prototype.hasOwnProperty.call(this.selected, i);
-      if (this.tableConfig.rows?.selectable == "multiple") {
-        if (p.metaKey) {
-          if (isSelected) {
-            delete this.selected[i];
-          } else {
-            this.selected[i] = true;
-          }
-        } else if (p.shiftKey) {
-          // TODO - if we enable shift key we need to disable "native browser" text selection
-          // and maybe user wants to select and copy more then 1 row content
-        } else {
-          this.selected = { [i]: true };
-        }
-
-        this["md-table-advanced-change"].emit({
-          type: "multi-select",
-          rows: Object.keys(this.selected).map((k) => +k)
-        });
-      } else {
-        if (isSelected) {
-          this.clearSelection();
-        } else {
-          this.selected = { [i]: true };
-          this["md-table-advanced-change"].emit({
-            type: "select",
-            index: i
-          });
-        }
-      }
-
-      this.requestUpdate("selected");
-    }
-
-    private clearSelection() {
-      this.selected = {};
-      this.requestUpdate("selected");
-    }
-
-    private collapseToggle(e: Event, row: number) {
-      e.stopPropagation();
-      if (this.expandedRowIdx[row]) {
-        delete this.expandedRowIdx[row];
-        this["md-table-advanced-change"].emit({
-          type: "collapse",
-          row
-        });
-      } else {
-        this.expandedRowIdx[row] = true;
-        this["md-table-advanced-change"].emit({
-          type: "expand",
-          row
-        });
-      }
-      this.clearSelection();
-      this.requestUpdate();
-    }
-
-    private eX = 0; // https://stackoverflow.com/a/33672982
-
-    // RESIZE
-    private onResize = (e: DragEvent, col: Col) => {
-      if (this.dragCol != -1 || this.dragRow != -1) return;
-
-      this.isResizing = true;
-
-      const t = e.target as HTMLDivElement;
-      e.dataTransfer?.setDragImage(IMG, 0, 0);
-
-      const elems = this.COLS.map((c) => this.shadowRoot!.querySelector<HTMLElement>(`th.col-index-${c.index}`)!);
-      this.COLS.forEach((c, i) => (c.width = elems[i].offsetWidth + "px"));
-      this.updCols();
-
-      const orgX = e.x;
-      this.eX = e.x;
-
-      let posX = -1;
-      let set = -1;
-      let setLeft = -1;
-
-      const colLeft = this.COLS[col.index - 1];
-
-      const elem = elems[col.index];
-      const elemLeft = elems[col.index - 1];
-      const elemW = elem.offsetWidth;
-      const elemLeftW = elemLeft.offsetWidth;
-
-      const drag = () => {
-        const eX = this.eX;
-        if (posX != eX && eX != 0) {
-          posX = eX;
-
-          // TODO - With this I can catch if resize is stopped
-          /*
-          const real = elem.offsetWidth;
-          console.log(set, real);
-          const realLeft = elemLeft.offsetWidth;
-          console.log(setLeft, realLeft);
-          */
-
-          const deltaX = posX - orgX;
-          set = elemW - deltaX;
-          setLeft = elemLeftW + deltaX;
-
-          col.width = set + "px";
-          colLeft.width = setLeft + "px";
-          this.updCols();
-        }
-      };
-
-      const dragOver = (evt: DragEvent) => (this.eX = evt.x);
-
-      const dragEnd = () => {
-        this.isResizing = false;
-        t.removeEventListener("drag", drag);
-        t.removeEventListener("dragend", dragEnd);
-        document.removeEventListener("dragover", dragOver);
-      };
-
-      t.addEventListener("drag", drag);
-      t.addEventListener("dragend", dragEnd);
-      document.addEventListener("dragover", dragOver);
-    };
-
-    // RENDER
-    // ----------------------------------
-
-    render() {
-      if (this.error) return html` <div>${this.error}</div> `;
-
-      const { head } = this.tableConfig;
-      const tableClass = classMap({
-        "sticky-header": !!this.tableConfig.isStickyHeader
-      });
-
-      return html`
-        <div class="md-table-advanced">
-          <slot></slot>
-          <table class=${tableClass} summary=${ifDefined(head?.summary)}>
-            ${head?.caption
-              ? html`
-                  <caption>
-                    ${head?.caption}
-                    ${head?.tableDescription
-                      ? html` <span style="position: absolute; top: -30em">${head?.tableDescription}</span> `
-                      : nothing}
-                  </caption>
-                `
-              : head?.tableDescription
-                ? html`
-                    <caption>
-                      <span style="position: absolute; top: -30em">${head?.tableDescription}</span>
-                    </caption>
-                  `
-                : nothing}
-            ${this.renderHead()} ${this.renderBody()}
-          </table>
-        </div>
-      `;
-    }
-
-    private ariaSortOrder(sortOrder: SortOrder) {
-      if (sortOrder === "ascending") return sortOrder;
-      else if (sortOrder === "descending") return sortOrder;
-
-      return "none";
-    }
-
-    private renderHead() {
-      let groups = nothing;
-      const hasGroup = this.COLS.reduce((acc, col) => (acc = col.group ? true : acc), false);
-      if (hasGroup) {
-        let gName = "";
-        groups = html`
-          ${this.COLS.map((c) => {
-            if (c.group) {
-              if (gName != c.group.name) {
-                gName = c.group.name;
-                return html` <colgroup span=${c.group.length}></colgroup> `;
-              }
-            } else {
-              return html` <col /> `;
-            }
-          })}
-          <tr tabindex="0">
-            ${this.COLS.map((col) => {
-              if (col.group) {
-                if (gName != col.group.name) {
-                  gName = col.group.name;
-                  return html`
-                    <th colspan=${col.group.length} scope="colgroup" title="${col.group.name}">
-                      <div class="head-inner-cell">
-                        <span>${col.group.name}</span>
-                        ${this.renderColResize(col)}
-                      </div>
-                    </th>
-                  `;
-                }
-              } else {
-                return this.renderCol(col, 2);
-              }
-            })}
-          </tr>
-        `;
-      }
-
-      const heads = html`
-        <tr tabindex="0">
-          ${this.COLS.map((col) => {
-            if (hasGroup) {
-              if (col.group) {
-                return this.renderCol(col);
-              }
-            } else {
-              return this.renderCol(col);
-            }
-          })}
-        </tr>
-      `;
-
-      return html`
-        <thead>
-          ${groups} ${heads}
-        </thead>
-      `;
-    }
-
-    sortIconTemplate(sortOrder: SortOrder): TemplateResult | typeof nothing {
-      if (sortOrder === "ascending") {
-        return html`<md-icon name="arrow-tail-down-bold" size="12" iconSet="momentumDesign"></md-icon>`;
-      } else if (sortOrder === "descending") {
-        return html`<md-icon name="arrow-tail-up-bold" size="12" iconSet="momentumDesign"></md-icon>`;
-      }
-      return html`<md-icon name="unsorted-bold" size="12" iconSet="momentumDesign"></md-icon>`;
-    }
-
-    private renderCol(col: Col, rowspan?: number) {
-      const input = col.filter?.list[col.filter.selectedIndex]?.input;
-      const sortClass = classMap({
-        ascending: col.sort == "ascending",
-        descending: col.sort == "descending"
-      });
-
-      return html`
-        <th
-          rowspan=${ifDefined(rowspan)}
-          width=${ifDefined(col.width ? col.width : col.options.width)}
-          scope="col"
-          part="head-col"
-          aria-sort=${this.ariaSortOrder(col.sort)}
-          title="${col.options.title}"
-          class=${"col-index-" + col.index}
-        >
-          <!-- DRAG  -->
-          ${this.renderColDrag(col)}
-
-          <div class="head-inner-cell">
-            <!-- SORT  -->
-            ${col.sorter
-              ? html`
-                  <button class="sortable ${sortClass}" @click=${() => this.sort(col)}>
-                    ${col.options.title} ${this.sortIconTemplate(col.sort)}
-                  </button>
-                `
-              : html` <span>${col.options.title}</span> `}
-
-            <!-- FILTER -->
-            ${col.filter
-              ? html`
-                  <div class="filter-wrap">
-                    ${col.filter.active
-                      ? html`
-                          <md-icon
-                            class="filter-active"
-                            name="filter-bold"
-                            size="14"
-                            iconSet="momentumDesign"
-                          ></md-icon>
-                        `
-                      : nothing}
-                    <md-menu-overlay placement="bottom" class="filter" custom-width="188px">
-                      <md-button class="filter-icon" slot="menu-trigger" color="color-none" size="size-none">
-                        <md-icon slot="icon" name="filter-bold" size="16" iconSet="momentumDesign"></md-icon>
-                      </md-button>
-                      <div class="filter-menu" style="width: 100%;">
-                        <select
-                          name="filter-type"
-                          @change=${(e: Event) => {
-                            col.filter!.selectedIndex = (e.target! as HTMLSelectElement).value as unknown as number;
-                            this.updCols();
-                            this.filter(col);
-                          }}
-                        >
-                          ${col.filter.list.map(
-                            (c, i) => html`
-                              <option value=${i} ?selected=${col.filter!.selectedIndex == i}>${c.label}</option>
-                            `
-                          )}
-                        </select>
-                        <input
-                          type="text"
-                          placeholder=${input!.placeholder}
-                          maxlength=${ifDefined(input!.maxlength)}
-                          pattern=${ifDefined(input!.pattern)}
-                          .value=${col.filter.input}
-                          @input=${(e: InputEvent) => {
-                            col.filter!.input = (e.target! as HTMLSelectElement).value;
-                            this.updCols();
-                            this.filter(col);
-                          }}
-                        />
-                      </div>
-                    </md-menu-overlay>
-                  </div>
-                `
-              : nothing}
-
-            <!-- RESIZE  -->
-            ${this.renderColResize(col)}
-          </div>
-        </th>
-      `;
-    }
-
-    private renderColDrag(col: Col) {
-      return this.tableConfig.cols.isDraggable
-        ? html`
-            <div
-              draggable="true"
-              class="drag-area-col ${classMap({
-                drag: this.dragCol != -1,
-                over: this.dropCol == col.index && this.dropCol != this.dragCol
-              })}"
-              @dragstart=${(e: DragEvent) => {
-                if (this.isResizing || this.dragRow != -1) return;
-                this.dragCol = col.index;
-                e.dataTransfer!.setDragImage((e.target! as Node).parentNode as Element, 0, 0);
-              }}
-              @dragenter=${() => {
-                if (this.isResizing || this.dragRow != -1) return;
-                this.dropCol = col.index;
-              }}
-              @dragend=${() => this.onDropCol()}
-            ></div>
-          `
-        : nothing;
-    }
-
-    private renderColResize(col: Col) {
-      return this.tableConfig.cols.isResizable
-        ? html`
-            ${col.index > 0
-              ? html`
-                  <div class="resize" draggable="true" @dragstart=${(e: DragEvent) => this.onResize(e, col)}></div>
-                `
-              : nothing}
-          `
-        : nothing;
-    }
-
-    private renderBody() {
-      let rows: Row[] = this.ROWS.map((cells, idx) => ({
-        cells,
-        idx,
-        idxDrag: idx,
-        collapse: "none",
-        first: idx === 0 ? true : false,
-        isGhost: false,
-        children: []
-      }));
-
-      // filter
-      const len = this.COLS.length;
-      rows = rows.filter((row) => {
-        for (let i = 0; i < len; i++) {
-          const col = this.COLS[i];
-          if (col.filter?.active) {
-            const filter = col.filter.list[col.filter.selectedIndex];
-            const isVisible = filter.predicate(row.cells[i].text, col.filter.input);
-            if (!isVisible) return false;
-          }
-        }
-        return true;
-      });
-
-      // sort
-      const sortCol = this.COLS.find((c) => c.sort != "default");
-      if (sortCol) {
-        const map = this.ROWS.map((r, i) => ({ v: r[sortCol.index].text, i }));
-        const dir = sortCol.sort == "ascending" ? 1 : -1;
-
-        let rowsSorted: SortNode[] = [];
-        if (sortCol.sorter == "byNumber") {
-          rowsSorted = map.sort((a, b) => (dir == 1 ? +a.v - +b.v : +b.v - +a.v));
-        } else if (sortCol.sorter == "byString") {
-          rowsSorted = map.sort((a, b) => (a.v == b.v ? 0 : a.v > b.v ? dir : -dir));
-        } else if (typeof sortCol.sorter == "function") {
-          const func = sortCol.sorter;
-          rowsSorted = map.sort((a, b) => func(a.v, b.v, dir));
-        }
-
-        rows = rowsSorted.map((s) => rows[s.i]);
-      }
-
-      // collapse
-      const collapseCol = this.COLS.find((c) => c.isCollapsable);
-      if (collapseCol) {
-        const colIdx = collapseCol.index;
-
-        const groups = rows.reduce(
-          (acc, row) => {
-            const key = row.cells[colIdx].text;
-            const group = acc.find((x) => x.key == key);
-            if (group) {
-              row.collapse = "child";
-              group.children.push(row);
-            } else {
-              acc.push({ key, root: row, children: [] });
-            }
-            return acc;
-          },
-          [] as { key: string; root: Row; children: Row[] }[]
-        );
-
-        rows = [];
-        groups.forEach((g) => {
-          rows.push(g.root);
-          g.root.collapse =
-            g.children.length == 0 ? "none" : this.expandedRowIdx[g.root.idx] ? "expanded" : "collapsed";
-          g.root.children = g.children;
-        });
-      }
-
-      // drag drop
-      this.drops.forEach(({ 0: drag, 1: drop }) => {
-        rows.splice(drop, 0, rows.splice(drag, 1)[0]);
-      });
-
-      // drag realtime
-      rows.forEach((r, i) => (r.idxDrag = i));
-      if (this.dragRow != -1) {
-        rows[this.dragRow].isGhost = true;
-        if (this.dropRow != -1) {
-          rows.splice(this.dropRow, 0, rows.splice(this.dragRow, 1)[0]);
-        }
-      }
-
-      return html`
-        <tbody>
-          ${rows.map((row) => {
-            const len = rows.length;
-            const isRenderChild = row.children.length > 0 && row.collapse == "expanded" && !row.isGhost;
-            return html`
-              ${this.renderRow(row, len)} ${isRenderChild ? row.children.map((c) => this.renderRow(c, len)) : nothing}
-            `;
-          })}
-        </tbody>
-      `;
-    }
-
-    private renderRow(row: Row, rowsLen: number) {
-      const isSelected = Object.prototype.hasOwnProperty.call(this.selected, row.idx);
-      const rowStyles = classMap({
-        selected: isSelected,
-        selectable: this.isSelectable && !isSelected,
-        ghost: row.isGhost
-      });
-
-      return html`
-        <tr
-          class=${rowStyles}
-          tabindex=${ifDefined(this.isRowFocusable === "true" ? "0" : undefined)}
-          part=${row.first ? "first-row" : "row"}
-          @click=${({ shiftKey, metaKey }: MouseEvent) => {
-            if (this.isSelectable) this.selectRow({ row, shiftKey, metaKey });
-          }}
-        >
-          ${row.cells.map((cell, j) => {
-            const col = this.COLS[j];
-
-            // content
-            let content: TemplateResult | string = cell.text;
-            const t = cell.template;
-            if (t) {
-              content = t.templateCb
-                ? html`
-                    ${templateCallback({
-                      cb: t.templateCb,
-                      insertIndex: t.insertIndex,
-                      template: t.template,
-                      content: cell.text,
-                      row: row.idx,
-                      col: j
-                    })}
-                  `
-                : html` ${templateContent(t.template)} `;
-              if (t.insertIndex != -1) {
-                content = html`
-                  ${t.insertIndex > 0 ? cell.text.substring(0, t.insertIndex) : nothing} ${content}
-                  ${t.insertIndex < cell.text.length - 1 ? cell.text.substring(t.insertIndex) : nothing}
-                `;
-              }
-            }
-
-            // drag
-            const isDrag = this.tableConfig.rows?.isDraggable && row.collapse != "child";
-            const isDragArea = isDrag && this.dragRow != -1 && this.dragRow != row.idxDrag;
-            const isDragHandle = isDrag && j == 0;
-
-            const cellRenderResult = html`
-              <div
-                class="inner-cell"
-                draggable="false"
-                @dragstart=${() => {
-                  if (this.isResizing || this.dragCol != -1) return;
-                  this.dragRow = row.idxDrag;
-                }}
-                @dragend=${() => this.onDropRow()}
-              >
-                ${isDragArea
-                  ? html`
-                      <div
-                        class="drag-area top"
-                        @dragenter=${() => {
-                          if (this.dragRow == 0) {
-                            const i = row.idxDrag - 1;
-                            this.dropRow = i >= 0 ? i : 0;
-                          } else {
-                            this.dropRow = row.idxDrag;
-                          }
-                        }}
-                      ></div>
-                      <div
-                        class="drag-area bottom"
-                        @dragenter=${() => {
-                          if (this.dragRow == 0) {
-                            this.dropRow = row.idxDrag;
-                          } else {
-                            const i = row.idxDrag + 1;
-                            this.dropRow = i < rowsLen ? i : rowsLen - 1;
-                          }
-                        }}
-                      ></div>
-                    `
-                  : nothing}
-                ${isDragHandle
-                  ? html`
-                      <md-icon
-                        class="drag-handle"
-                        @mousedown=${(e: MouseEvent) => {
-                          if (this.isResizing || this.dragCol != -1) return;
-                          this.dragRowElem = (e.target! as Node).parentNode as HTMLElement;
-                          this.dragRowElem.setAttribute("draggable", "true");
-                        }}
-                        name="dragger-vertical-bold"
-                        size="16"
-                        iconSet="momentumDesign"
-                      >
-                      </md-icon>
-                    `
-                  : nothing}
-                ${col.isCollapsable
-                  ? html`
-                      ${row.collapse == "expanded" || row.collapse == "collapsed"
-                        ? html`
-                            <button class="row-collapsible" @click=${(e: Event) => this.collapseToggle(e, row.idx)}>
-                              ${row.collapse == "collapsed"
-                                ? html` <md-icon name="plus-bold" size="12" iconSet="momentumDesign"></md-icon> `
-                                : html` <md-icon name="minus-bold" size="12" iconSet="momentumDesign"></md-icon> `}
-                            </button>
-                          `
-                        : nothing}
-                      <span>${row.collapse == "child" ? nothing : content}</span>
-                    `
-                  : html` <span>${content}</span> `}
-              </div>
-            `;
-
-            return col.options.isHeader
-              ? html` <th part="cell-ishead" scope="row" title="${cell.text}">${cellRenderResult}</th> `
-              : html` <td part=${j === 0 ? "first-cell" : "cell"} title="${cell.text}">${cellRenderResult}</td> `;
-          })}
-        </tr>
-      `;
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-  }
-
-  type ColId = string;
-
-  export type Data = { csv: string } | { list: string[] } | { list2d: string[][] };
-
-  export type Config = {
-    isStickyHeader?: boolean;
-    isInfiniteScroll?: boolean;
-
-    cols: {
-      define: (ColOptions | ColOptionsGroup)[];
-      isDraggable?: boolean;
-      isResizable?: boolean;
-      collapse?: ColId;
-    };
-
-    rows?: {
-      isDraggable?: boolean;
-      selectable?: "none" | "single" | "multiple";
-    };
-
-    cellTemplates?: Record<string, CellTemplate>;
-
-    default?: {
-      col?: Pick<ColOptions, "filters" | "sorter">;
-
-      sort?: {
-        colId: ColId;
-        order: SortOrder;
-      };
-
-      filter?: {
-        colId: ColId;
-        input: string;
-        selectedIndex: number;
-      };
-    };
-
-    head?: {
-      caption?: string;
-      summary?: string;
-      tableDescription?: string;
-    };
-  };
-
-  type ColOptions = {
-    id: string;
-    title: string;
-    width?: string;
-    sorter?: "byString" | "byNumber" | SortComparator;
-    filters?: "forString" | "forNumber" | Filter.Options[];
-    isHeader?: boolean;
-  };
-
-  type ColOptionsGroup = { groupName: string; children: ColOptions[] };
-  type SortOrder = "default" | "ascending" | "descending";
-  type SortComparator = (a: string, b: string, direction: 1 | -1) => number; // -number, 0, number
-  type SortNode = { v: string; i: number };
-
-  type Cell = { text: string; template?: CellTemplateProcessed };
-  type CellTemplate = {
-    templateName: string;
-    contentUse?: "insert" | "replace";
-    contentCb?: CellContentCallback;
-    templateCb?: TemplateCallback;
-  };
-  type CellTemplateProcessed = { insertIndex: number; template: HTMLTemplateElement; templateCb?: TemplateCallback };
-  type CellContentCallback = (p: TemplateInfo) => string;
-  type Row = {
-    cells: Cell[];
-    idx: number;
-    idxDrag: number;
-    isGhost: boolean;
-    first: boolean;
-    collapse: "none" | "collapsed" | "expanded" | "child";
-    children: Row[];
-  };
-
-  type Col = {
-    index: number;
-    sort: SortOrder;
-    sorter: ColOptions["sorter"];
-    width?: string;
-    group?: { name: string; length: number };
-    filter?: { list: Filter.Options[]; selectedIndex: number; input: string; active: boolean; menuVisible: boolean };
-    options: ColOptions;
-    isCollapsable: boolean;
-  };
-
-  export type ChangeEvent = {
-    detail:
-      | { type: "filter-on"; filter: Filter.Options; input: string }
-      | { type: "filter-off"; filter: Filter.Options }
-      | { type: "sort"; order: SortOrder }
-      | { type: "select"; index: number }
-      | { type: "multi-select"; rows: number[] }
-      | { type: "expand"; row: number }
-      | { type: "collapse"; row: number };
-  };
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-table-advanced": TableAdvanced.ELEMENT;
-  }
-}