@guiexpert/table 1.1.17 → 1.1.20

package/src/lib/table/checkbox/tree-checkbox-model.ts

@@ -0,0 +1,123 @@
+import { CheckedType } from "../data/common/checked-type";
+import { CheckboxModelIf } from "./checkbox-model.if";
+import { TreeRowIf } from "../data/common/tree-row-if";
+
+
+export class TreeCheckboxModel<T extends TreeRowIf<any>> implements CheckboxModelIf<T> {
+
+
+  constructor(
+    protected allRootNodes: T[] = []
+  ) {
+  }
+
+  checkRow(row: T, sel: boolean): void {
+    row.checked = sel;
+    if (row.children) {
+      for (const child of row.children) {
+        this.checkRow(child as T, sel);
+      }
+    }
+    this.autoCheckParent(row.parent as T);
+  }
+
+  checkAll(_arr: T[]): void {
+    for (const node of this.allRootNodes) {
+      node.checked = false;
+      if (node.children) {
+        this.checkAll(node.children as T[]);
+      }
+    }
+  }
+
+  getCheckedRows(): T[] {
+    const ret: T[] = [];
+    this.addSelectedRecursive(this.allRootNodes, ret);
+    return ret;
+  }
+
+  isRowChecked(row: T): CheckedType {
+    if (row.checked) {
+      return "full";
+    }
+    const b1 = this.areAllChildrenChecked(row as T);
+    const b2 = this.areAllChildrenUnchecked(row as T);
+    if (!b1 && !b2) {
+      return "semi";
+    }
+    return "none";
+  }
+
+  setCheckedRows(rows: T[]): void {
+    this.addCheckedRows(rows);
+  }
+
+
+  addCheckedRows(rows: T[]): void {
+    for (const t of rows) {
+      t.checked = true;
+    }
+  }
+
+  private autoCheckParent(parent: T | undefined): void {
+    if (parent) {
+      const b1 = this.areAllChildrenChecked(parent as T);
+      const b2 = this.areAllChildrenUnchecked(parent as T);
+      if (b1) {
+        parent.checked = true;
+      } else if (b2) {
+        parent.checked = false;
+      } else {
+        // nur semi:
+        parent.checked = false;
+      }
+      this.autoCheckParent(parent.parent as T);
+    }
+  }
+
+  private areAllChildrenChecked(row: T): boolean {
+    if (row.children?.length) {
+      for (const child of row.children) {
+        if (!child.checked) {
+          return false;
+        }
+        if (child.children?.length) {
+          const b = this.areAllChildrenChecked(child as T);
+          if (!b) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+
+  private areAllChildrenUnchecked(row: T): boolean {
+    if (row.children?.length) {
+      for (const child of row.children) {
+        if (child.checked) {
+          return false;
+        }
+        if (child.children?.length) {
+          const b = this.areAllChildrenUnchecked(child as T);
+          if (!b) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+
+
+  private addSelectedRecursive(nodes: T[], ret: T[]) {
+    for (const n of nodes) {
+      if (n.checked) {
+        ret.push(n);
+      }
+      if (n.children) {
+        this.addSelectedRecursive(n.children as T[], ret);
+      }
+    }
+  }
+}

package/src/lib/table/color/color-rgb.if.ts

@@ -0,0 +1,12 @@
+/**
+ * Represents a color in RGB format.
+ *
+ * @interface
+ */
+export interface ColorRgbIf {
+
+  r: number;
+  g: number;
+  b: number;
+
+}

package/src/lib/table/color/color-rgb.ts

@@ -0,0 +1,10 @@
+import { ColorRgbIf } from "./color-rgb.if";
+
+export class ColorRgb implements ColorRgbIf {
+  constructor(
+    public r: number,
+    public g: number,
+    public b: number
+  ) {
+  }
+}

package/src/lib/table/color/ge-css-color-util.ts

@@ -0,0 +1,43 @@
+import { TwoColorGradientArgIf } from "./two-color-gradient-arg.if";
+import { ThreeColorGradientArgIf } from "./three-color-gradient-arg.if";
+import { TwoColorGradientArg } from "./two-color-gradient-arg";
+
+export class GeCssColorUtil {
+
+
+  static normalize(
+    value: number,
+    fromSource: number,
+    toSource: number,
+    fromTarget: number = 0,
+    toTarget: number = 1) {
+    return (value - fromSource) / (toSource - fromSource) * (toTarget - fromTarget) + fromTarget;
+  }
+
+
+  static getTwoColorGradientRGB(value: number, para: TwoColorGradientArgIf): string {
+    const factor = GeCssColorUtil.normalize(value, para.minValue, para.maxValue, 0, 1);
+
+    const diffRed = para.maxColor.r - para.minColor.r;
+    const diffGreen = para.maxColor.g - para.minColor.g;
+    const diffBlue = para.maxColor.b - para.minColor.b;
+
+    const r = (diffRed * factor) + para.minColor.r;
+    const g = (diffGreen * factor) + para.minColor.g;
+    const b = (diffBlue * factor) + para.minColor.b;
+
+    return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
+  }
+
+
+  static getThreeColorGradientRGB(value: number, para: ThreeColorGradientArgIf): string {
+    if (value < para.middleValue) {
+      return GeCssColorUtil.getTwoColorGradientRGB(value, new TwoColorGradientArg(para.minValue, para.minColor, para.middleValue, para.middleColor));
+    }
+    if (value > para.middleValue) {
+      return GeCssColorUtil.getTwoColorGradientRGB(value, new TwoColorGradientArg(para.middleValue, para.middleColor, para.maxValue, para.maxColor));
+    }
+    return `rgb(${para.middleColor.r}, ${para.middleColor.g}, ${para.middleColor.b})`;
+  }
+
+}

package/src/lib/table/color/three-color-gradient-arg.if.ts

@@ -0,0 +1,15 @@
+import { ColorRgbIf } from "./color-rgb.if";
+
+/**
+ * Interface for defining the arguments of a three-color gradient.
+ *
+ * @interface
+ */
+export interface ThreeColorGradientArgIf {
+  minValue: number;
+  minColor: ColorRgbIf;
+  middleValue: number;
+  middleColor: ColorRgbIf;
+  maxValue: number;
+  maxColor: ColorRgbIf;
+}

package/src/lib/table/color/three-color-gradient-arg.ts

@@ -0,0 +1,14 @@
+import { ColorRgbIf } from "./color-rgb.if";
+import { ThreeColorGradientArgIf } from "./three-color-gradient-arg.if";
+
+export class ThreeColorGradientArg implements ThreeColorGradientArgIf {
+  constructor(
+    public minValue: number,
+    public minColor: ColorRgbIf,
+    public middleValue: number,
+    public middleColor: ColorRgbIf,
+    public maxValue: number,
+    public maxColor: ColorRgbIf
+  ) {
+  }
+}

package/src/lib/table/color/two-color-gradient-arg.if.ts

@@ -0,0 +1,12 @@
+import { ColorRgbIf } from "./color-rgb.if";
+
+/**
+ * Interface representing arguments for a two-color gradient.
+ * @interface
+ */
+export interface TwoColorGradientArgIf {
+  minValue: number;
+  minColor: ColorRgbIf;
+  maxValue: number;
+  maxColor: ColorRgbIf;
+}

package/src/lib/table/color/two-color-gradient-arg.ts

@@ -0,0 +1,12 @@
+import { ColorRgbIf } from "./color-rgb.if";
+import { TwoColorGradientArgIf } from "./two-color-gradient-arg.if";
+
+export class TwoColorGradientArg implements TwoColorGradientArgIf {
+  constructor(
+    public minValue: number,
+    public minColor: ColorRgbIf,
+    public maxValue: number,
+    public maxColor: ColorRgbIf
+  ) {
+  }
+}

package/src/lib/table/css-vars.ts

@@ -0,0 +1,243 @@
+
+export class CssVars {
+
+  public static readonly themes = ['light', 'combat', 'paper', 'blackboard'];
+
+  public static readonly vars = {
+    light: `html[data-theme="light"] {
+  --ge-table-bg: rgba(255,255,255, 0.5);
+  --ge-table-header-west-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-center-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-east-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-west-text: #000;
+  --ge-table-header-center-text: #000;
+  --ge-table-header-east-text: #000;
+  --ge-table-header-west-horizontal-border: #ddd;
+  --ge-table-header-west-vertical-border: #ccc;
+  --ge-table-header-center-horizontal-border: #ddd;
+  --ge-table-header-center-vertical-border: #ccc;
+  --ge-table-header-east-horizontal-border: #ddd;
+  --ge-table-header-east-vertical-border: #ccc;
+  --ge-table-body-west-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-body-center-bg: rgba(255,255,255, 0.5);
+  --ge-table-body-east-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-body-west-text: #000;
+  --ge-table-body-center-text: #000;
+  --ge-table-body-east-text: #000;
+  --ge-table-body-west-horizontal-border: #ddd;
+  --ge-table-body-west-vertical-border: #ccc;
+  --ge-table-body-center-horizontal-border: #bbb;
+  --ge-table-body-center-vertical-border: #ddd;
+  --ge-table-body-east-horizontal-border: #ddd;
+  --ge-table-body-east-vertical-border: #ccc;
+  --ge-table-body-west-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-center-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-east-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-west-selected-range-text: #000;
+  --ge-table-body-center-selected-range-text: #000;
+  --ge-table-body-east-selected-range-text: #000;
+  --ge-table-footer-west-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-footer-center-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-footer-east-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-footer-west-text: #000;
+  --ge-table-footer-center-text: #000;
+  --ge-table-footer-east-text: #000;
+  --ge-table-footer-west-horizontal-border: #ddd;
+  --ge-table-footer-west-vertical-border: #ccc;
+  --ge-table-footer-center-horizontal-border: #ddd;
+  --ge-table-footer-center-vertical-border: #ccc;
+  --ge-table-footer-east-horizontal-border: #ddd;
+  --ge-table-footer-east-vertical-border: #ccc;
+  --ge-table-border: #ccc;
+  --ge-table-row-odd-bg: transparent;
+  --ge-table-row-even-bg: transparent;
+  --ge-table-column-odd-bg: transparent;
+  --ge-table-column-even-bg: transparent;
+  --ge-table-hover-column-bg: rgba(0, 224, 255, 0.27);
+  --ge-table-hover-row-bg: rgba(0, 224, 255, 0.27);
+  --ge-table-focus-border: rgb(0, 255, 255);
+  --ge-table-color-error-text: #e00034;
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: rgb(0, 255, 255);
+  --ge-table-dragged-col-div-bg: lightcyan;
+  --ge-table-drop-zone-bg: rgba(244, 255, 242, 0.6);
+}`,
+
+    combat:`html[data-theme="combat"] {
+  --ge-table-bg: #101010;
+  --ge-table-header-west-bg: #101010;
+  --ge-table-header-center-bg: #101010;
+  --ge-table-header-east-bg: #101010;
+  --ge-table-header-west-text: oklch(100% 0 0);
+  --ge-table-header-center-text: oklch(100% 0 0);
+  --ge-table-header-east-text: oklch(100% 0 0);
+  --ge-table-header-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-bg: #101010;
+  --ge-table-body-center-bg: #101010;
+  --ge-table-body-east-bg: #101010;
+  --ge-table-body-west-text: #b6b4b4;
+  --ge-table-body-center-text: #b6b4b4;
+  --ge-table-body-east-text: #b6b4b4;
+  --ge-table-body-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-selected-range-bg: oklch(20% 0.2 39.6 / 37%);
+  --ge-table-body-center-selected-range-bg: oklch(20% 0.2 39.6 / 37%);
+  --ge-table-body-east-selected-range-bg: oklch(20% 0.2 39.6 / 37%);
+  --ge-table-body-west-selected-range-text: #f00032;
+  --ge-table-body-center-selected-range-text: #f00032;
+  --ge-table-body-east-selected-range-text: #f00032;
+  --ge-table-footer-west-bg: #101010;
+  --ge-table-footer-center-bg: #101010;
+  --ge-table-footer-east-bg: #101010;
+  --ge-table-footer-west-text: oklch(100% 0 0);
+  --ge-table-footer-center-text: oklch(100% 0 0);
+  --ge-table-footer-east-text: oklch(100% 0 0);
+  --ge-table-footer-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-border: oklch(100% 0 0 / 0%);
+  --ge-table-row-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-row-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-hover-column-bg: oklch(34% 0.25 3.6 / 27%);
+  --ge-table-hover-row-bg: oklch(34% 0.25 3.6 / 27%);
+  --ge-table-focus-border: oklch(40% 0.25 3.6);
+  --ge-table-color-error-text: oklch(65% 0.31 43.2);
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: oklch(63% 0.31 43.2);
+  --ge-table-dragged-col-div-bg: #2c2e33;
+  --ge-table-drop-zone-bg: #101010;
+}`,
+
+    paper: `html[data-theme="paper"] {
+  --ge-table-bg: #e7e5df;
+  --ge-table-header-west-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-header-center-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-header-east-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-header-west-text: #111;
+  --ge-table-header-center-text: #111;
+  --ge-table-header-east-text: #111;
+  --ge-table-header-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-body-center-bg: #e7e5df;
+  --ge-table-body-east-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-body-west-text: #000;
+  --ge-table-body-center-text: #000;
+  --ge-table-body-east-text: #000;
+  --ge-table-body-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-selected-range-bg: #cfcdc2;
+  --ge-table-body-center-selected-range-bg: #cfcdc2;
+  --ge-table-body-east-selected-range-bg: #cfcdc2;
+  --ge-table-body-west-selected-range-text: #000;
+  --ge-table-body-center-selected-range-text: #000;
+  --ge-table-body-east-selected-range-text: #000;
+  --ge-table-footer-west-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-footer-center-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-footer-east-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-footer-west-text: #111;
+  --ge-table-footer-center-text: #111;
+  --ge-table-footer-east-text: #111;
+  --ge-table-footer-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-border: oklch(100% 0 0 / 0%);
+  --ge-table-row-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-row-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-hover-column-bg: oklch(5% 0.2 266.40000000000003 / 9%);
+  --ge-table-hover-row-bg: oklch(5% 0.2 266.40000000000003 / 9%);
+  --ge-table-focus-border: oklch(100% 0.19 205.20000000000002);
+  --ge-table-color-error-text: oklch(45% 0.25 43.2);
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: oklch(100% 0.19 205.20000000000002 / 71%);
+  --ge-table-dragged-col-div-bg: #2c2e33;
+  --ge-table-drop-zone-bg: #e7e5df;
+}`,
+    blackboard:`html[data-theme="dark"] {
+  --ge-table-bg: #0c1021;
+  --ge-table-header-west-bg: #0c1021;
+  --ge-table-header-center-bg: #0c1021;
+  --ge-table-header-east-bg: #0c1021;
+  --ge-table-header-west-text: #e0df85;
+  --ge-table-header-center-text: #e0df85;
+  --ge-table-header-east-text: #e0df85;
+  --ge-table-header-west-horizontal-border: transparent;
+  --ge-table-header-west-vertical-border: transparent;
+  --ge-table-header-center-horizontal-border: transparent;
+  --ge-table-header-center-vertical-border: transparent;
+  --ge-table-header-east-horizontal-border: transparent;
+  --ge-table-header-east-vertical-border: transparent;
+  --ge-table-body-west-bg: #0c1021;
+  --ge-table-body-center-bg: #0c1021;
+  --ge-table-body-east-bg: #0c1021;
+  --ge-table-body-west-text: #a7a7a7;
+  --ge-table-body-center-text: #a7a7a7;
+  --ge-table-body-east-text: #a7a7a7;
+  --ge-table-body-west-horizontal-border: transparent;
+  --ge-table-body-west-vertical-border: transparent;
+  --ge-table-body-center-horizontal-border: transparent;
+  --ge-table-body-center-vertical-border: transparent;
+  --ge-table-body-east-horizontal-border: transparent;
+  --ge-table-body-east-vertical-border: transparent;
+  --ge-table-body-west-selected-range-bg: #758129;
+  --ge-table-body-center-selected-range-bg: #758129;
+  --ge-table-body-east-selected-range-bg: #758129;
+  --ge-table-body-west-selected-range-text: oklch(100% 0 0);
+  --ge-table-body-center-selected-range-text: oklch(100% 0 0);
+  --ge-table-body-east-selected-range-text: oklch(100% 0 0);
+  --ge-table-footer-west-bg: #0c1021;
+  --ge-table-footer-center-bg: #0c1021;
+  --ge-table-footer-east-bg: #0c1021;
+  --ge-table-footer-west-text: #e0df85;
+  --ge-table-footer-center-text: #e0df85;
+  --ge-table-footer-east-text: #e0df85;
+  --ge-table-footer-west-horizontal-border: transparent;
+  --ge-table-footer-west-vertical-border: transparent;
+  --ge-table-footer-center-horizontal-border: transparent;
+  --ge-table-footer-center-vertical-border: otransparent;
+  --ge-table-footer-east-horizontal-border: transparent;
+  --ge-table-footer-east-vertical-border: transparent;
+  --ge-table-border: oklch(0% 0 0);
+  --ge-table-row-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-row-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-hover-column-bg: #a9a9a9;
+  --ge-table-hover-row-bg: #a9a9a9;
+  --ge-table-focus-border: #e1ff00;
+  --ge-table-color-error-text: #ff0040;
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: oklch(0% 0 0);
+  --ge-table-dragged-col-div-bg: #2c2e33;
+  --ge-table-drop-zone-bg: #758129;
+}`
+  };
+
+}

package/src/lib/table/data/chunk/chunk.data-event.if.ts

@@ -0,0 +1,8 @@
+import {RequestChunkIf} from "./request-chunk.if";
+
+
+export interface ChunkDataIf<T> extends RequestChunkIf {
+
+  rows: T[];
+
+}

package/src/lib/table/data/chunk/chunk.data-event.ts

@@ -0,0 +1,27 @@
+import {ChunkDataIf} from "./chunk.data-event.if";
+import {RequestChunk} from "./request-chunk";
+
+export class ChunkData<T> extends RequestChunk implements ChunkDataIf<T> {
+
+  constructor(
+    emmitDataKey: string,
+    emmitCancelKey: string,
+    queryId: string, // which sql
+    filter: string, // later: structure
+    sorting: string, // list of (property & ASC/DESC)
+    startIndex: number,
+    endIndex: number,
+    public rows: T[]) {
+
+    super(
+      emmitDataKey,
+      emmitCancelKey,
+      queryId,
+      filter,
+      sorting,
+      startIndex,
+      endIndex
+    );
+  }
+
+}

package/src/lib/table/data/chunk/request-chunk.if.ts

@@ -0,0 +1,9 @@
+export interface RequestChunkIf {
+  emmitDataKey: string;
+  emmitCancelKey: string;
+  queryId: string;
+  filter: string;
+  sorting: string;
+  startIndex: number;
+  endIndex: number;
+}

package/src/lib/table/data/chunk/request-chunk.ts

@@ -0,0 +1,15 @@
+import {RequestChunkIf} from "./request-chunk.if";
+
+export class RequestChunk implements RequestChunkIf {
+
+  constructor(
+    public emmitDataKey: string,
+    public emmitCancelKey: string,
+    public queryId: string, // which sql
+    public filter: string, // later: structure
+    public sorting: string, // list of (property & ASC/DESC)
+    public startIndex: number,
+    public endIndex: number) {
+  }
+
+}

package/src/lib/table/data/common/aligns.ts

@@ -0,0 +1,42 @@
+export const bodyLeft = { body: ["ge-table-text-align-left"] };
+export const bodyCenter = { body: ["ge-table-text-align-center"] };
+export const bodyRight = { body: ["ge-table-text-align-right"] };
+
+/**
+ * Predefined CSS classes for aligning text to the left within a table for all three areas.
+ *
+ * @property {Array.<string>} header - The CSS class(es) for aligning text to the left in the table header.
+ * @property {Array.<string>} body - The CSS class(es) for aligning text to the left in the table body.
+ * @property {Array.<string>} footer - The CSS class(es) for aligning text to the left in the table footer.
+ */
+export const allLeft = {
+  header: ["ge-table-text-align-left"],
+  body: ["ge-table-text-align-left"],
+  footer: ["ge-table-text-align-left"]
+};
+/**
+ * Predefined CSS classes for aligning text to the center of the table cells for all three areas.
+ *
+ * @typedef {Object} AllCenter
+ * @property {Array.<string>} header - The alignment classes for the table header.
+ * @property {Array.<string>} body - The alignment classes for the table body.
+ * @property {Array.<string>} footer - The alignment classes for the table footer.
+ */
+export const allCenter = {
+  header: ["ge-table-text-align-center"],
+  body: ["ge-table-text-align-center"],
+  footer: ["ge-table-text-align-center"]
+};
+/**
+ * Predefined CSS classes for aligning text to the right of the table cells for all three areas.
+ *
+ * @type {Object}
+ * @property {Array} header - An array containing CSS classes for aligning text right in the table header.
+ * @property {Array} body - An array containing CSS classes for aligning text right in the table body.
+ * @property {Array} footer - An array containing CSS classes for aligning text right in the table footer.
+ */
+export const allRight = {
+  header: ["ge-table-text-align-right"],
+  body: ["ge-table-text-align-right"],
+  footer: ["ge-table-text-align-right"]
+};

package/src/lib/table/data/common/area-map-factory.ts

@@ -0,0 +1,20 @@
+import { AreaObjectMap } from "./area-map";
+import { CellRendererIf } from "../../renderer/cell-render.if";
+
+export class AreaMapFactory {
+
+  /**
+   * A factory that creates a new AreaObjectMap with the given body renderer.
+   *
+   * @param {CellRendererIf} bodyRenderer - The renderer for the body of the map.
+   * @returns {AreaObjectMap<CellRendererIf>} The newly created AreaObjectMap.
+   */
+  static body(bodyRenderer: CellRendererIf) {
+    return new AreaObjectMap<CellRendererIf>(
+      undefined,
+      bodyRenderer,
+      undefined
+    );
+  }
+
+}

package/src/lib/table/data/common/area-map.ts

@@ -0,0 +1,18 @@
+import { AreaObjectMapType } from "./area-map.type";
+
+/**
+ * An object map as container for all three areas.
+ *
+ * @template T - The type of objects stored in the map.
+ * @class
+ * @implements {AreaObjectMapType<T>}
+ */
+export class AreaObjectMap<T> implements AreaObjectMapType<T> {
+
+  constructor(
+    public header?: T | undefined,
+    public body?: T | undefined,
+    public footer?: T | undefined) {
+  }
+
+}

package/src/lib/table/data/common/area-map.type.ts

@@ -0,0 +1,5 @@
+export type AreaObjectMapType<T> = {
+  header?: T | undefined,
+  body?: T | undefined,
+  footer?: T | undefined
+}

package/src/lib/table/data/common/args-adjust-columns-to-row-parent-params.ts

@@ -0,0 +1,21 @@
+import { AreaIdent } from "../tablemodel/area-ident.type";
+import { SideIdent } from "../side-ident.type";
+import { AreaModelIf } from "../tablemodel/areamodel/area-model.if";
+import { GeoData } from "../geo-data";
+
+/**
+ * Represents the parameters required for adjusting columns to the row parent.
+ * @interface ArgsAdjustColumnsToRowParentParams
+ */
+export interface ArgsAdjustColumnsToRowParentParams {
+  areaIdent: AreaIdent;
+  sideIdent: SideIdent;
+  areaModel: AreaModelIf;
+  geo: GeoData;
+  parent: HTMLDivElement;
+  rowIndex: number;
+  columnIndexStart: number;
+  columnIndexEnd: number;
+  verticalFixed?: boolean;
+  lastRowOfModel?: boolean;
+}