@guiexpert/table 0.0.2 → 1.0.2

package/src/lib/table/data/tablemodel/table-model.ts

@@ -0,0 +1,352 @@
+import { TableModelIf } from "./table-model.if";
+import { Padding } from "./padding";
+import { AreaIdent } from "./area-ident.type";
+import { AreaModelIf } from "./areamodel/area-model.if";
+import { SideIdent } from "../side-ident.type";
+import { DefaultRowHeightsIf } from "../options/default-row-heights.if";
+import { DefaultRowHeights } from "../options/default-row-heights";
+import { ColumnDefIf } from "./column/column-def.if";
+import { FilterFunction } from "../common/filter-function";
+import { SortItem } from "../common/sort-item";
+import { SelectionModelIf } from "../../selection/selection-model.if";
+import { GetT } from "../common/get-t";
+import { CheckboxColumnDef } from "../common/checkbox-column-def";
+import { CheckboxModel } from "../../checkbox/checkbox-model";
+
+
+/**
+ * This is a default implementation of TableModelIf.
+ * Ths TableModel is on one hand a container for the header, body, and footer models
+ * (see : #getAreaModel, and #AreaModelIf), and on the other hand the master of
+ * the column information (#getColumnCount(), #getColumnWidth(columnIndex: number)).
+ *
+ * If getFixedLeftColumnCount() returns a value greater than 0, a fixed west area will be rendered in the
+ * header, body, and footer. A value greater than 0 for getFixedLeftColumnCount()
+ * will result in the presence of an east area.
+ *
+ * <pre>
+ *  +----------------+-------------------+--------------+
+ *  |  header/west   |  header/center    | header/east  |
+ *  +----------------+-------------------+--------------+
+ *  |  body/west     |  body/center      | body/east    |
+ *  +----------------+-------------------+--------------+
+ *  |  footer/west   |  footer/center    | footer/east  |
+ *  +----------------+-------------------+--------------+ </pre>
+ *
+ */
+export class TableModel implements TableModelIf {
+
+  protected rowCount = 0;
+  protected contentHeightInPx = 0;
+  protected contentWidthInPx = 0;
+
+  // in case of a fixed header, left or right column, footer:
+  protected padding = new Padding(0, 0, 0, 0); // the dimension of the 'body/center'
+  protected xPositions: number[] = [];
+
+  constructor(
+    public readonly headerAreaModel: AreaModelIf,
+    public readonly bodyAreaModel: AreaModelIf,
+    public readonly footerAreaModel: AreaModelIf,
+    public readonly fixedLeftColumnCount: number = 0,
+    public readonly fixedRightColumnCount: number = 0,
+    public readonly rowCheckboxVisible: boolean = false,
+    public readonly defaultRowHeights: DefaultRowHeightsIf = new DefaultRowHeights(),
+    public columnDefs: ColumnDefIf[] = [],
+    public columnSizes: number[] = [],
+    protected overridingColumnWidth: number = -1,
+    protected columnCount: number = 0,
+    protected parentSize: number = 400, // can be important when we have percentage widthes,
+    public readonly getSelectionModel: GetT<SelectionModelIf> = () => undefined
+  ) {
+    headerAreaModel.areaIdent = "header";
+    bodyAreaModel.areaIdent = "body";
+    footerAreaModel.areaIdent = "footer";
+    if (!this.columnCount) {
+      if (this.columnDefs?.length) {
+        this.columnCount = this.columnDefs.length;
+      } else if (this.columnSizes?.length) {
+        this.columnCount = this.columnSizes?.length;
+      }
+    }
+    if (this.columnDefs?.length
+      && this.columnDefs[0] instanceof CheckboxColumnDef
+      && !bodyAreaModel.rowSelectionModel) {
+      bodyAreaModel.rowSelectionModel = new CheckboxModel();
+    }
+  }
+
+  init() {
+    this.recalcSize(this.parentSize);
+    if (this.overridingColumnWidth === -1) {
+      this.calcXPositions();
+    }
+    if (this.headerAreaModel) {
+      this.headerAreaModel.init();
+    }
+    if (this.bodyAreaModel) {
+      this.bodyAreaModel.init();
+    }
+    if (this.footerAreaModel) {
+      this.footerAreaModel.init();
+    }
+  }
+
+  getColumnCount(): number {
+    return this.columnCount;
+  };
+
+  setColumnWidth(columnIndex: number, width: number): void {
+    width = Math.max(0, width);
+    if (this.overridingColumnWidth !== -1) {
+      this.overridingColumnWidth = width;
+    }
+    if (columnIndex > -1 && columnIndex < this.columnSizes?.length) {
+      this.columnSizes[columnIndex] = width;
+    }
+    this.recalcContentWidthInPx();
+  }
+
+  getColumnWidth(columnIndex: number): number {
+    const cd = this.getColumnDef(columnIndex);
+    if (cd && cd.isVisible && !cd.isVisible()) {
+      return 0;
+    }
+    if (this.overridingColumnWidth !== -1) {
+      return this.overridingColumnWidth;
+    }
+    if (columnIndex > -1 && columnIndex < this.columnSizes?.length) {
+      return this.columnSizes[columnIndex];
+    }
+    return 0;
+  };
+
+  getXPosByColumnIndex(columnIndex: number): number {
+    if (columnIndex === 0) {
+      return 0;
+    }
+    if (this.overridingColumnWidth > -1) {
+      return this.overridingColumnWidth * columnIndex;
+    }
+    return this.xPositions[columnIndex];
+  }
+
+  recalcSize(clientWidth: number) {
+    this.recalcColumnWidthes(clientWidth);
+    this.recalcHeightAndPadding();
+  }
+
+  recalcHeightAndPadding() {
+    const bodyModel = this.getAreaModel("body");
+    this.rowCount = bodyModel.getRowCount();
+    this.contentHeightInPx = this.getAreaHeight("body");
+    this.recalcContentWidthInPx();
+
+    this.recalcPadding();
+  }
+
+  recalcPadding() {
+    const westWidth = this.getSideAreaWidth("west");
+    const eastWidth = this.getSideAreaWidth("east");
+    const headerHeight = this.getAreaHeight("header");
+    const footerHeight = this.getAreaHeight("footer");
+
+    this.padding = new Padding(
+      headerHeight,
+      eastWidth,
+      footerHeight,
+      westWidth);
+  }
+
+  getPadding(): Padding {
+    return this.padding;
+  }
+
+  getContentHeightInPixel(): number {
+    return this.contentHeightInPx;
+  }
+
+  getContentWidthInPixel(): number {
+    return this.contentWidthInPx;
+  }
+
+  getRowHeight(rowAreaIdent: AreaIdent, rowIndex: number): number {
+    return this.getAreaModel(rowAreaIdent).getRowHeight(rowIndex);
+  }
+
+  getModel(rowAreaIdent: AreaIdent): AreaModelIf {
+    return this.getAreaModel(rowAreaIdent);
+  }
+
+  getAreaHeight(areaIdent: AreaIdent): number {
+    const model = this.getModel(areaIdent);
+    const rowCount = model.getRowCount();
+    if (this.defaultRowHeights[areaIdent]) {
+      return rowCount * this.defaultRowHeights[areaIdent];
+    }
+
+    let ret = 0;
+    for (let i = 0; i < rowCount; i++) {
+      ret = ret + model.getRowHeight(i);
+    }
+    return ret;
+  }
+
+  getSideAreaWidth(sideIdent: SideIdent): number {
+    const [cStart, cEnd] = this.getSideStartAndEndColumnIndex(sideIdent);
+    let ret = 0;
+    for (let i = cStart; i <= cEnd; i++) {
+      ret = ret + this.getColumnWidth(i);
+    }
+    return ret;
+  }
+
+  getSideStartAndEndColumnIndex(sideIdent: SideIdent): [number, number] {
+    const c1 = this.getFixedLeftColumnCount();
+    const c2 = this.getFixedRightColumnCount();
+
+    let cStart = 0;
+    let cEnd = this.columnCount - 1;
+    if (sideIdent === "west") {
+      cEnd = c1 - 1;
+    } else if (sideIdent === "east") {
+      cStart = this.columnCount - c2;
+    } else {
+      // center:
+      cStart = c1;
+      cEnd = this.columnCount - c2 - 1;
+    }
+    return [cStart, cEnd];
+  }
+
+  getColumnDef(index: number): ColumnDefIf | undefined {
+    if (index < this.columnDefs.length) {
+      return this.columnDefs[index];
+    }
+    return undefined;
+  }
+
+  getFixedLeftColumnCount(): number {
+    return this.fixedLeftColumnCount;
+  }
+
+  getFixedRightColumnCount(): number {
+    return this.fixedRightColumnCount;
+  }
+
+  getAreaModel(area: AreaIdent): AreaModelIf {
+    if (area === "header") {
+      return this.headerAreaModel;
+    }
+    if (area === "body") {
+      return this.bodyAreaModel;
+    }
+    if (area === "footer") {
+      return this.footerAreaModel;
+    }
+    throw new Error("Wrong ident.");
+  }
+
+  getBodyModel(): AreaModelIf {
+    return this.bodyAreaModel;
+  }
+
+  isFooterVisibe(): boolean {
+    return (this.footerAreaModel?.getRowCount() ?? 0) > 0;
+  }
+
+  isHeaderVisibe(): boolean {
+    return (this.headerAreaModel?.getRowCount() ?? 0) > 0;
+  }
+
+  isRowCheckboxVisible(): boolean {
+    return this.rowCheckboxVisible;
+  }
+
+  externalFilterChanged<T>(predictFn: FilterFunction<T>): void {
+    this.getAreaModel("body").externalFilterChanged(predictFn);
+  }
+
+  doSort(sortItems: SortItem[]): boolean {
+    return this.getAreaModel("body").doSort(sortItems);
+  }
+
+  getColumnDefs(): ColumnDefIf[] | undefined {
+    return this.columnDefs;
+  }
+
+  getColumnProperty(columnIndex: number): string {
+    return this.columnDefs[columnIndex].property;
+  }
+
+  getBodyRowByIndex(rowIndex: number): any {
+    return this.getBodyModel().getRowByIndex(rowIndex);
+  }
+
+  isSortable(columnIndex: number): boolean {
+    if (this.columnDefs
+      && columnIndex < this.columnDefs.length
+      && this.columnDefs[columnIndex].sortable) {
+      // @ts-ignore
+      return this.columnDefs[columnIndex].sortable();
+    }
+    return false;
+  }
+
+  changeColumnOrder(sourceColumnIndex: number, targetColumnIndex: number): void {
+    this.arrayMove(this.columnDefs, sourceColumnIndex, targetColumnIndex);
+    this.arrayMove(this.columnSizes, sourceColumnIndex, targetColumnIndex);
+    this.headerAreaModel?.changeColumnOrder(sourceColumnIndex, targetColumnIndex);
+    this.bodyAreaModel?.changeColumnOrder(sourceColumnIndex, targetColumnIndex);
+    this.footerAreaModel?.changeColumnOrder(sourceColumnIndex, targetColumnIndex);
+    this.calcXPositions();
+  }
+
+
+  private recalcColumnWidthes(clientWidth: number) {
+    if (!this.columnDefs?.length && !this.columnSizes?.length) {
+      this.columnSizes = new Array(this.getColumnCount()).fill(this.overridingColumnWidth);
+    }
+    if (this.columnDefs?.length) {
+      this.columnSizes = this.columnDefs.map(def => {
+        if (def.width.unit === "%" && clientWidth) {
+          // only for a % value we have to check min and max:
+          let px = Math.floor(def.width.value * clientWidth / 100);
+          if (def.minWidth) {
+            let pxMin = def.minWidth.unit === "px" ? def.minWidth.value : Math.floor(def.minWidth.value * clientWidth / 100);
+            px = Math.max(pxMin, px);
+          }
+          if (def.maxWidth) {
+            let pxMax = def.maxWidth.unit === "px" ? def.maxWidth.value : Math.floor(def.maxWidth.value * clientWidth / 100);
+            px = Math.min(pxMax, px);
+          }
+          return px;
+        }
+        return def.width.value;
+      });
+    }
+  }
+
+  private arrayMove(arr: any[], fromIndex: number, toIndex: number) {
+    const element = arr.splice(fromIndex, 1)[0];
+    arr.splice(toIndex, 0, element);
+    return arr;
+  }
+
+  private recalcContentWidthInPx() {
+    this.contentWidthInPx = this.getSideAreaWidth("center");
+  }
+
+  private calcXPositions() {
+    const columnCount = this.getColumnCount();
+    this.xPositions = new Array(columnCount + 1);
+    this.xPositions[0] = 0;
+    for (let i = 0; i < columnCount; i++) {
+      this.xPositions[i + 1] = this.getColumnWidth(i) + this.xPositions[i];
+    }
+  }
+
+
+}
+
+

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;
+}