@guiexpert/table 0.0.1 → 1.0.1

package/src/lib/table/ele-scope.ts

@@ -0,0 +1,283 @@
+import { ConvenienceDomService } from "./service/convenience-dom.service";
+import { DivScope } from "./data/div-scope.type";
+import { TableModelIf } from "./data/tablemodel/table-model.if";
+import { TableOptionsIf } from "./data/options/table-options.if";
+import { GeoData } from "./data/geo-data";
+
+
+export class EleScope {
+
+  public scrollViewport: HTMLDivElement;
+
+  protected contentWrapperDiv: HTMLDivElement; // the big one. height: sum of rows height == tableModel.getContentHeightInPixel()
+  protected contentDiv: HTMLDivElement;
+
+  protected areaHeaderCenter: DivScope;
+  protected areaHeaderWest: DivScope;
+  protected areaHeaderEast: DivScope;
+
+  protected areaBodyCenter: DivScope;
+  protected areaBodyWest: DivScope;
+  protected areaBodyEast: DivScope;
+
+
+  protected areaFooterCenter: DivScope;
+  protected areaFooterWest: DivScope;
+  protected areaFooterEast: DivScope;
+
+  protected borderHeaderBottom: HTMLDivElement;
+  protected borderFooterTop: HTMLDivElement;
+  protected borderFixedWest: HTMLDivElement;
+  protected borderFixedEast: HTMLDivElement;
+
+  protected hoverRow: HTMLDivElement;
+  protected hoverColumn: HTMLDivElement;
+
+  protected scrollTop = 0;
+
+  protected areaBodyWestGeo: GeoData = new GeoData();
+  protected areaBodyCenterGeo: GeoData = new GeoData();
+  protected areaBodyEastGeo: GeoData = new GeoData();
+
+
+  constructor(
+    readonly hostElement: HTMLDivElement,
+    readonly tableModel: TableModelIf,
+    protected readonly dom: ConvenienceDomService,
+    readonly tableOptions: TableOptionsIf
+  ) {
+    const hostEle = this.hostElement;
+
+    hostEle.innerText = ""; // clear
+    this.dom.setAttribute(hostEle, "tabindex", "0"); // needed for getting key events
+
+    this.dom.setStyle(
+      this.dom.addClass("ge-table", hostEle)
+      , "position", "relative");
+
+
+    this.hoverRow =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-hover-row", hostEle));
+    this.hoverColumn =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-hover-column", hostEle));
+
+    this.areaHeaderWest = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-header ge-table-header-west", hostEle, "header", "west")));
+    this.areaHeaderCenter = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-header ge-table-header-center", hostEle, "header", "center")));
+    this.areaHeaderEast = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-header ge-table-header-east", hostEle, "body", "east")));
+
+    this.areaBodyWest = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-body ge-table-body-west", hostEle, "body", "west")));
+
+    this.areaBodyEast = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-body ge-table-body-east", hostEle, "body", "east")));
+
+    this.areaFooterWest = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-footer ge-table-footer-west", hostEle, "footer", "west")));
+
+    this.areaFooterCenter = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-footer ge-table-footer-center", hostEle, "footer", "center")));
+
+    this.areaFooterEast = dom.appendRelativeChildDiv(
+      dom.applyStylePosistionAbsolute(
+        dom.createAreaDivWithClass("ge-table-footer ge-table-footer-east", hostEle, "footer", "east")));
+
+    this.scrollViewport =
+      dom.applyStyleOverflowAuto(
+        this.tableOptions.overflowX ?? "auto",
+        this.tableOptions.overflowY ?? "auto",
+        dom.applyStyleNoPadding(
+          dom.applyStylePosistionAbsolute(
+            dom.createAreaDivWithClass("ge-table-scroll-viewport", hostEle, "body", "center")
+          )
+        )
+      );
+
+    this.contentWrapperDiv = dom.applyStyleNoPadding(
+      dom.applyStylePosistionRelative(
+        dom.createDivWithClass("ge-table-scroll-content-wrapper", this.scrollViewport)));
+    this.contentDiv = dom.applyStyleNoPadding(
+      dom.applyStylePosistionRelative(
+        dom.createDivWithClass("ge-table-scroll-content", this.contentWrapperDiv)));
+
+    this.areaBodyCenter = dom.appendRelativeChildDiv(
+      dom.createDivWithClass("ge-table-body-center", this.contentDiv));
+
+    this.borderHeaderBottom =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-header-border", hostEle));
+
+    this.borderFixedWest =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-west-fixed-column-border", hostEle));
+
+    this.borderFixedEast =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-east-fixed-column-border", hostEle));
+
+    this.borderFooterTop =
+      dom.applyStylePosistionAbsolute(
+        dom.createDivWithClass("ge-table-footer-border", hostEle));
+  }
+
+
+  adjustContainersAndRows() {
+    const padding = this.tableModel.getPadding();
+    const w = this.hostElement.clientWidth;
+    const h = this.hostElement.clientHeight;
+    this.dom.applyStyle(this.scrollViewport, {
+      width: `${(w - padding.left)}px`,
+      height: `${(h - padding.top)}px`,
+      top: `${padding.top}px`,
+      left: `${padding.left}px`
+    });
+
+    this.scrollTop = this.scrollViewport.scrollTop;
+
+    // Content:
+    this.dom.applyStyle(this.contentDiv, {
+      width: `${this.scrollViewport.clientWidth}px`,
+      height: `${this.scrollViewport.clientHeight}px`,
+      top: `${this.scrollTop}px`,
+      left: `${this.scrollViewport.scrollLeft}px`
+    });
+
+    // Body:
+    // Body/West:
+    this.areaBodyWestGeo.width = padding.left;
+    this.areaBodyWestGeo.height = (h - padding.top - padding.bottom);
+    this.areaBodyWestGeo.top = padding.top;
+    this.areaBodyWestGeo.left = 0;
+    this.dom.applyStyleInPx(this.areaBodyWest.parent, this.areaBodyWestGeo);
+    if (this.tableOptions.fixedWestSeparatorBorderVisible &&
+      this.tableModel.getFixedLeftColumnCount()) {
+      this.dom.applyDisplayBlockStyle(
+        this.dom.applyStyle(this.borderFixedWest, {
+          width: `1px`,
+          height: `${this.areaBodyWestGeo.height}px`,
+          top: `${this.areaBodyWestGeo.top}px`,
+          left: `${this.areaBodyWestGeo.width}px`
+        })
+      );
+    } else {
+      this.dom.applyDisplayNoneStyle(this.borderFixedWest);
+    }
+
+    // Body/East:
+    this.areaBodyEastGeo.width = padding.right;
+    this.areaBodyEastGeo.height = (h - padding.top - padding.bottom);
+    this.areaBodyEastGeo.top = padding.top;
+    this.areaBodyEastGeo.left = w - padding.right;
+    this.dom.applyStyleInPx(this.areaBodyEast.parent, this.areaBodyEastGeo);
+
+    if (this.tableOptions.fixedEastSeparatorBorderVisible &&
+      this.tableModel.getFixedLeftColumnCount()) {
+      this.dom.applyDisplayBlockStyle(
+        this.dom.applyStyle(this.borderFixedEast, {
+          width: `1px`,
+          height: `${this.areaBodyEastGeo.height}px`,
+          top: `${this.areaBodyEastGeo.top}px`,
+          left: `${this.areaBodyEastGeo.left}px`
+        }));
+    } else {
+      this.dom.applyDisplayNoneStyle(this.borderFixedEast);
+    }
+
+    // Body/Center:
+    this.areaBodyCenterGeo.width = (w - padding.left - padding.right);
+    this.areaBodyCenterGeo.height = (h - padding.top - padding.bottom);
+    this.areaBodyCenterGeo.top = 0;
+    this.areaBodyCenterGeo.left = 0;
+    this.dom.applyStyleInPx(this.areaBodyCenter.parent, this.areaBodyCenterGeo);
+
+
+    // Header:
+    this.dom.applyStyle(this.areaHeaderCenter.parent, {
+      width: `${w - padding.left - padding.right}px`,
+      height: `${padding.top}px`,
+      top: "0",
+      left: `${padding.left}px`
+    });
+    this.dom.applyStyle(this.areaHeaderWest.parent, {
+      width: `${padding.left}px`,
+      height: `${padding.top}px`,
+      top: "0",
+      left: "0"
+    });
+    this.dom.applyStyle(this.areaHeaderEast.parent, {
+      width: `${padding.right}px`,
+      height: `${padding.top}px`,
+      top: "0",
+      left: `${w - padding.right}px`
+    });
+    if (this.tableOptions.headerSeparatorBorderVisible &&
+      this.tableModel.isHeaderVisibe()) {
+      this.dom.applyDisplayBlockStyle(
+        this.dom.applyStyle(this.borderHeaderBottom, {
+          width: `${w}px`,
+          height: "1px",
+          top: `${padding.top}px`,
+          left: "0px"
+        }));
+    } else {
+      this.dom.applyDisplayNoneStyle(this.borderHeaderBottom);
+    }
+
+    // Footer:
+    this.dom.applyStyle(this.areaFooterWest.parent, {
+      width: `${padding.left}px`,
+      height: `${padding.bottom}px`,
+      top: `${h - padding.bottom}px`,
+      left: "0"
+    });
+    this.dom.applyStyle(this.areaFooterCenter.parent, {
+      width: `${w - padding.left - padding.right}px`,
+      height: `${padding.bottom}px`,
+      top: `${h - padding.bottom}px`,
+      left: `${padding.left}px`
+    });
+    this.dom.applyStyle(this.areaFooterEast.parent, {
+      width: `${padding.right}px`,
+      height: `${padding.bottom}px`,
+      top: `${h - padding.bottom}px`,
+      left: `${w - padding.right}px`
+    });
+    if (this.tableOptions.footerSeparatorBorderVisible &&
+      this.tableModel.isFooterVisibe()) {
+      this.dom.applyDisplayBlockStyle(
+        this.dom.applyStyle(this.borderFooterTop, {
+          width: `${w}px`,
+          height: "1px",
+          top: `${h - padding.bottom}px`,
+          left: "0px"
+        }));
+    } else {
+      this.dom.applyDisplayNoneStyle(this.borderFooterTop);
+    }
+
+    this.adjustAfterScrolling();
+  }
+
+  adjustAfterScrolling() {
+    // must be overwritten
+  }
+
+  protected resetSizeOfWrapperDiv() {
+    const w = `${this.tableModel.getContentWidthInPixel()}px`;
+    const h = `${this.tableModel.getContentHeightInPixel() + 1}px`; // + 1, we want to see the last horizontal border
+    this.dom.setStyle(this.contentWrapperDiv, "width", w);
+    this.dom.setStyle(this.contentWrapperDiv, "height", h);
+  }
+
+}

package/src/lib/table/event-adapter.ts

@@ -0,0 +1,28 @@
+import { GeModelChangeEvent } from "./data/common/event/ge-model-change-event";
+import { GeMouseEvent } from "./data/common/event/ge-mouse-event";
+import { EventListenerIf } from "./event-listener.if";
+
+export class EventAdapter implements EventListenerIf {
+
+  onCheckboxChanged(_evt: any[]): void {
+  }
+
+  onContextmenu(_evt: GeMouseEvent): void {
+  }
+
+  onModelChanged(_evt: GeModelChangeEvent): void {
+  }
+
+  onMouseClicked(_evt: GeMouseEvent): void {
+  }
+
+  onMouseDragging(_evt: GeMouseEvent): void {
+  }
+
+  onMouseDraggingEnd(_evt: GeMouseEvent): void {
+  }
+
+  onMouseMoved(_evt: GeMouseEvent): void {
+  }
+
+}

package/src/lib/table/event-listener.if.ts

@@ -0,0 +1,19 @@
+import { GeMouseEvent } from "./data/common/event/ge-mouse-event";
+import { GeModelChangeEvent } from "./data/common/event/ge-model-change-event";
+
+export interface EventListenerIf {
+
+  onContextmenu(evt: GeMouseEvent): void;
+
+  onMouseMoved(evt: GeMouseEvent): void;
+
+  onMouseDraggingEnd(evt: GeMouseEvent): void;
+
+  onMouseDragging(evt: GeMouseEvent): void;
+
+  onMouseClicked(evt: GeMouseEvent): void;
+
+  onCheckboxChanged(evt: any[]): void;
+
+  onModelChanged(evt: GeModelChangeEvent): void;
+}

package/src/lib/table/factory/table-factory.ts

@@ -0,0 +1,378 @@
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DefaultRowHeightsIf } from "../data/options/default-row-heights.if";
+import { ColumnDefIf } from "../data/tablemodel/column/column-def.if";
+import { GetT } from "../data/common/get-t";
+import { TableOptionsIf } from "../data/options/table-options.if";
+import { TableModelIf } from "../data/tablemodel/table-model.if";
+import { DefaultRowHeights } from "../data/options/default-row-heights";
+import { ColumnDef } from "../data/tablemodel/column/column-def";
+import { px200 } from "../data/common/sizes";
+import { AreaModelArrayOfArrays } from "../data/tablemodel/areamodel/area-model-array-of-arrays";
+import { AreaModelHidden } from "../data/tablemodel/areamodel/area-model-hidden";
+import { TreeRow } from "../data/common/tree-row";
+import { AreaModelTree } from "../data/tablemodel/areamodel/area-model-tree";
+import { TreeCheckboxModel } from "../checkbox/tree-checkbox-model";
+import { TableModel } from "../data/tablemodel/table-model";
+import { SelectionModelIf } from "../selection/selection-model.if";
+import {
+  AreaModelObjectArrayWithColumndefs
+} from "../data/tablemodel/areamodel/area-model-object-array-with-columndefs";
+import { TableOptions } from "../data/options/table-options";
+
+
+export class TableFactory {
+
+  public static createTableModel(p: Partial<{
+    headerAreaModel: AreaModelIf,
+    bodyAreaModel: AreaModelIf,
+    footerAreaModel: AreaModelIf,
+    fixedLeftColumnCount: number,
+    fixedRightColumnCount: number,
+    rowCheckboxVisible: boolean,
+    defaultRowHeights: DefaultRowHeightsIf,
+    columnDefs: ColumnDefIf[],
+    columnSizes: number[],
+    overridingColumnWidth: number,
+    columnCount: number,
+    parentSize: number,
+    getSelectionModel: GetT<SelectionModelIf>,
+    rows: any[],
+    properties: string[],
+    bodyData: any[][],
+    headerData: string[][], // multi-line header
+    footerData: string[][], // multi-line footerData
+    tableOptions: TableOptionsIf
+
+  }>): TableModelIf {
+
+    if (p.defaultRowHeights === undefined) {
+      if (p.tableOptions?.defaultRowHeights) {
+        p.defaultRowHeights = p.tableOptions.defaultRowHeights;
+      } else {
+        p.defaultRowHeights = new DefaultRowHeights();
+
+        if (p.headerAreaModel && "defaultRowHeight" in p.headerAreaModel) {
+          const dh = p.headerAreaModel.defaultRowHeight as number;
+          if (dh > -1) {
+            p.defaultRowHeights.header = dh;
+          }
+        }
+
+        if (p.bodyAreaModel && "defaultRowHeight" in p.bodyAreaModel) {
+          const dh = p.bodyAreaModel.defaultRowHeight as number;
+          if (dh > -1) {
+            p.defaultRowHeights.body = dh;
+          }
+        }
+
+        if (p.footerAreaModel && "defaultRowHeight" in p.footerAreaModel) {
+          const dh = p.footerAreaModel.defaultRowHeight as number;
+          if (dh > -1) {
+            p.defaultRowHeights.footer = dh;
+          }
+        }
+      }
+    }
+
+    if (p.columnDefs === undefined) {
+      if (p.properties?.length) {
+        p.columnDefs = p.properties.map(p => new ColumnDef(p, p.toUpperCase(), px200));
+      } else if (p.rows?.length) {
+        p.columnDefs = Object.keys(p.rows[0]).map(p => new ColumnDef(p, p.toUpperCase(), px200));
+      } else {
+        p.columnDefs = [];
+      }
+    }
+
+    if (p.columnCount === undefined) {
+      if (p.columnDefs?.length) {
+        p.columnCount = p.columnDefs.length;
+      } else if (p.headerData?.length) {
+        p.columnCount = p.headerData[0].length;
+      } else if (p.columnSizes?.length) {
+        p.columnCount = p.columnSizes?.length;
+      } else {
+        console.warn("Property \"columnCount\" is missing and cannot be derived from other properties.");
+      }
+    }
+
+
+    if (!p.headerAreaModel) {
+      if (p.headerData?.length) {
+        p.headerAreaModel = new AreaModelArrayOfArrays<string>(
+          "header",
+          p.headerData,
+          p.defaultRowHeights.header,
+          p.columnDefs
+        );
+      } else if (p.columnDefs?.length) {
+        p.headerAreaModel = new AreaModelArrayOfArrays<string>(
+          "header",
+          [p.columnDefs.map(def => def.headerLabel)],
+          p.defaultRowHeights.header,
+          p.columnDefs
+        );
+      } else {
+        p.headerAreaModel = new AreaModelHidden("header");
+      }
+    }
+    if (!p.footerAreaModel) {
+      if (p.footerData?.length) {
+        p.footerAreaModel = new AreaModelArrayOfArrays<string>(
+          "footer",
+          p.footerData,
+          p.defaultRowHeights.footer,
+          p.columnDefs
+        );
+      } else {
+        p.footerAreaModel = new AreaModelHidden("footer");
+      }
+    }
+    if (!p.bodyAreaModel) {
+      if (p.rows) {
+
+        if (p.rows?.length && p.rows[0] instanceof TreeRow) {
+          // Tree:
+          const treeRows = p.rows as TreeRow<any>[];
+          p.bodyAreaModel = new AreaModelTree(
+            "body",
+            treeRows,
+            p.defaultRowHeights.body,
+            p.columnDefs
+          );
+          const checkboxExtraColumnVisible = p.columnDefs[0].property === "CheckboxColumn";
+          if (checkboxExtraColumnVisible || p.tableOptions?.showCheckboxWihoutExtraColumn) {
+            p.bodyAreaModel.rowSelectionModel = new TreeCheckboxModel(treeRows);
+          }
+        } else {
+          p.bodyAreaModel = new AreaModelObjectArrayWithColumndefs<any>(
+            "body", p.rows, p.columnDefs, p.defaultRowHeights.body
+          );
+        }
+
+      } else if (p.bodyData) {
+        p.bodyAreaModel = new AreaModelArrayOfArrays<any>(
+          "body", p.bodyData, p.defaultRowHeights.body
+        );
+      } else {
+        p.bodyAreaModel = new AreaModelHidden("body");
+      }
+    }
+
+    if (p.fixedLeftColumnCount === undefined) {
+      p.fixedLeftColumnCount = 0;
+    }
+    if (p.fixedRightColumnCount === undefined) {
+      p.fixedRightColumnCount = 0;
+    }
+    if (p.rowCheckboxVisible === undefined) {
+      p.rowCheckboxVisible = false;
+    }
+    if (p.overridingColumnWidth === undefined) {
+      p.overridingColumnWidth = -1;
+    }
+
+    if (!p.getSelectionModel && p.tableOptions?.getSelectionModel) {
+      p.getSelectionModel = p.tableOptions?.getSelectionModel;
+    }
+
+    // Flat table:
+    return new TableModel(
+      p.headerAreaModel,
+      p.bodyAreaModel,
+      p.footerAreaModel,
+      p.fixedLeftColumnCount,
+      p.fixedRightColumnCount,
+      p.rowCheckboxVisible,
+      p.defaultRowHeights,
+      p.columnDefs,
+      p.columnSizes,
+      p.overridingColumnWidth,
+      p.columnCount,
+      p.parentSize,
+      p.getSelectionModel
+    );
+  }
+
+  static buildByTypedRowsParam<T>(param: {
+    rows: T[],
+    columnDefs: ColumnDefIf[],
+    tableOptions?: TableOptionsIf,
+    fixedLeftColumnCount?: number,
+    fixedRightColumnCount?: number
+  }): TableModelIf {
+
+    return TableFactory.buildByTypedRows<T>(
+      param.rows ?? [],
+      param.columnDefs,
+      param.tableOptions ?? new TableOptions(),
+      param.fixedLeftColumnCount ?? 0,
+      param.fixedRightColumnCount ?? 0
+    );
+  }
+
+  static buildByTypedRows<T>(
+    rows: T[],
+    columnDefs: ColumnDefIf[],
+    tableOptions: TableOptionsIf = new TableOptions(),
+    fixedLeftColumnCount: number = 0,
+    fixedRightColumnCount: number = 0
+  ): TableModelIf {
+
+    const defaultRowHeights = tableOptions.defaultRowHeights;
+    const checkboxExtraColumnVisible = columnDefs[0].property === "CheckboxColumn";
+
+    if (rows?.length && rows[0] instanceof TreeRow) {
+      // Tree:
+      const treeRows = rows as TreeRow<T>[];
+      const bodyareaModel = new AreaModelTree(
+        "body",
+        treeRows,
+        defaultRowHeights.body,
+        columnDefs
+      );
+      if (checkboxExtraColumnVisible || tableOptions.showCheckboxWihoutExtraColumn) {
+        bodyareaModel.rowSelectionModel = new TreeCheckboxModel(treeRows);
+      }
+      return TableFactory.createByAreaModelsParam({
+        headerAreaModel: new AreaModelArrayOfArrays<string>("header", [columnDefs.map(def => def.headerLabel)], defaultRowHeights.header),
+        bodyAreaModel: bodyareaModel,
+        footerAreaModel: new AreaModelArrayOfArrays<string>("footer", [], defaultRowHeights.footer),
+        columnDefs,
+        fixedLeftColumnCount,
+        fixedRightColumnCount,
+        defaultRowHeights: tableOptions.defaultRowHeights,
+        rowCheckboxVisible: false,
+        columnSizes: [],
+        columnCount: columnDefs.length,
+        overridingColumnWidth: -1
+      });
+    }
+
+    // Flat table:
+    return TableFactory.createByObjectArrayParam({
+      rows,
+      columnDefs,
+      fixedLeftColumnCount,
+      fixedRightColumnCount,
+      defaultRowHeights: tableOptions.defaultRowHeights
+    });
+
+  }
+
+  public static createByObjectArrayParam<T>(param: {
+    rows: T[],
+    header?: string[][],
+    footer?: string[][],
+    fixedLeftColumnCount?: number,
+    fixedRightColumnCount?: number,
+    rowCheckboxVisible?: boolean,
+    defaultRowHeights?: DefaultRowHeightsIf,
+    columnDefs?: ColumnDefIf[],
+    columnSizes?: number[]
+  }) {
+    const rowCheckboxVisible = param.rowCheckboxVisible !== undefined ? param.rowCheckboxVisible : false;
+    return TableFactory.createByObjectArray<T>(
+      param.rows,
+      param.header ?? [],
+      param.footer ?? [],
+      param.fixedLeftColumnCount ?? 0,
+      param.fixedRightColumnCount ?? 0,
+      rowCheckboxVisible,
+      param.defaultRowHeights ?? new DefaultRowHeights(),
+      param.columnDefs ?? [],
+      param.columnSizes ?? []
+    );
+  }
+
+  public static createByAreaModels(
+    headerAreaModel: AreaModelIf = new AreaModelHidden(),
+    bodyAreaModel: AreaModelIf,
+    footerAreaModel: AreaModelIf = new AreaModelHidden(),
+    fixedLeftColumnCount: number = 0,
+    fixedRightColumnCount: number = 0,
+    rowCheckboxVisible: boolean = false,
+    defaultRowHeights: DefaultRowHeightsIf = new DefaultRowHeights(),
+    columnDefs: ColumnDefIf[],
+    columnSizes: number[] = [],
+    overridingColumnWidth: number = -1,
+    columnCount: number
+  ) {
+    return new TableModel(
+      headerAreaModel,
+      bodyAreaModel,
+      footerAreaModel,
+      fixedLeftColumnCount,
+      fixedRightColumnCount,
+      rowCheckboxVisible,
+      defaultRowHeights,
+      columnDefs,
+      columnSizes,
+      overridingColumnWidth,
+      columnCount
+    );
+  }
+
+  public static createByAreaModelsParam(param: {
+    headerAreaModel?: AreaModelIf,
+    bodyAreaModel: AreaModelIf,
+    footerAreaModel?: AreaModelIf,
+    fixedLeftColumnCount?: number,
+    fixedRightColumnCount?: number,
+    rowCheckboxVisible?: boolean,
+    defaultRowHeights?: DefaultRowHeightsIf,
+    columnDefs?: ColumnDefIf[],
+    columnSizes?: number[],
+    overridingColumnWidth?: number,
+    columnCount?: number
+  }) {
+    return TableFactory.createByAreaModels(
+      param.headerAreaModel ?? new AreaModelHidden(),
+      param.bodyAreaModel,
+      param.footerAreaModel ?? new AreaModelHidden(),
+      param.fixedLeftColumnCount ?? 0,
+      param.fixedRightColumnCount ?? 0,
+      param.rowCheckboxVisible === undefined ? false : param.rowCheckboxVisible,
+      param.defaultRowHeights,
+      param.columnDefs ?? [],
+      param.columnSizes ?? [],
+      param.overridingColumnWidth ?? -1,
+      param.columnCount ?? 0
+    );
+  }
+
+  public static createByObjectArray<T>(
+    rows: T[],
+    header: string[][] = [],
+    footer: string[][] = [],
+    fixedLeftColumnCount: number = 0,
+    fixedRightColumnCount: number = 0,
+    rowCheckboxVisible: boolean = false,
+    defaultRowHeights: DefaultRowHeightsIf = new DefaultRowHeights(),
+    columnDefs: ColumnDefIf[],
+    columnSizes: number[] = []
+  ) {
+    let headerAreaModel: AreaModelIf;
+    if (header?.length) {
+      headerAreaModel = new AreaModelArrayOfArrays<string>("header", header, defaultRowHeights.header, columnDefs);
+    } else if (columnDefs?.length) {
+      headerAreaModel = new AreaModelArrayOfArrays<string>("header", [columnDefs.map(def => def.headerLabel)], defaultRowHeights.header, columnDefs);
+    } else {
+      headerAreaModel = new AreaModelHidden();
+    }
+    const footerAreaModel = footer ? new AreaModelArrayOfArrays<string>("footer", footer, defaultRowHeights.footer, columnDefs) : new AreaModelHidden();
+    const bodyAreaModel = new AreaModelObjectArrayWithColumndefs<T>("body", rows, columnDefs, defaultRowHeights.body);
+
+    return new TableModel(
+      headerAreaModel,
+      bodyAreaModel,
+      footerAreaModel,
+      fixedLeftColumnCount,
+      fixedRightColumnCount,
+      rowCheckboxVisible,
+      defaultRowHeights,
+      columnDefs,
+      columnSizes
+    );
+  }
+}