@guiexpert/table 0.0.1 → 1.0.1

package/src/lib/table/action/windows-shortcut-actionId-mapping.ts

@@ -0,0 +1,27 @@
+import { ActionId } from "./action-id.type";
+
+export class WindowsShortcutActionIdMapping {
+
+  get(): { [key: string]: ActionId } {
+    return {
+      "f2": "START_EDITING",
+
+      "space": "TOGGLE_SELECTION",
+
+      "ctrl+num_add": "SELECT_ALL",
+      "ctrl+a": "SELECT_ALL",
+
+      "ctrl+shift+a": "DESELECT_ALL",
+      "ctrl+x": "DESELECT_ALL",
+      "ctrl+num_subtract": "DESELECT_ALL",
+
+      "cmd -": "DESELECT_ALL",
+
+      "arrowup": "NAVIGATE_UP",
+      "arrowdown": "NAVIGATE_DOWN",
+      "arrowleft": "NAVIGATE_LEFT",
+      "arrowright": "NAVIGATE_RIGHT"
+    };
+  }
+
+}

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

@@ -0,0 +1,16 @@
+import { CheckedType } from "../data/common/checked-type";
+
+export interface CheckboxModelIf<T> {
+
+  getCheckedRows(): T[];
+
+  setCheckedRows(value: T[]): void;
+
+  addCheckedRows(value: T[]): void;
+
+  checkRow(row: T, check: boolean): void;
+
+  isRowChecked(row: T): CheckedType;
+
+  checkAll(value: T[]): void;
+}

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

@@ -0,0 +1,62 @@
+import { CheckedType } from "../data/common/checked-type";
+import { CheckboxModelIf } from "./checkbox-model.if";
+
+export class CheckboxModel<T> implements CheckboxModelIf<T> {
+
+  protected checkedRows: Array<T> = [];
+
+  getCheckedRows(): T[] {
+    return this.checkedRows;
+  }
+
+  setCheckedRows(rows: T[]) {
+    this.checkedRows = rows;
+  }
+
+
+  addCheckedRows(rows: T[]) {
+    if (!this.checkedRows) {
+      this.checkedRows = [];
+    }
+    for (const row of rows) {
+      if (!this.checkedRows.includes(row)) {
+        this.checkedRows.push(row);
+      }
+    }
+  }
+
+  checkRow(row: T, sel: boolean) {
+    if (!this.checkedRows) {
+      this.checkedRows = [];
+    }
+    if (sel) {
+      if (!this.checkedRows.includes(row)) {
+        this.checkedRows.push(row);
+      }
+    } else {
+      this.removeSelectedRow(row);
+    }
+  }
+
+
+  isRowChecked(row: T): CheckedType {
+    if (this.checkedRows) {
+      return this.checkedRows.includes(row) ? "full" : "none";
+    }
+    return "none";
+  }
+
+  checkAll(_rows: T[]) {
+    this.checkedRows = [];
+  }
+
+  private removeSelectedRow(row: T) {
+    if (this.checkedRows) {
+      const idx = this.checkedRows.indexOf(row);
+      if (idx > -1) {
+        this.checkedRows.splice(idx, 1);
+      }
+    }
+  }
+
+}

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,7 @@
+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,10 @@
+import { ColorRgbIf } from "./color-rgb.if";
+
+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,8 @@
+import { ColorRgbIf } from "./color-rgb.if";
+
+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: `:root [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:`:root [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: `:root [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:`:root [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/common/aligns.ts

@@ -0,0 +1,19 @@
+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"] };
+
+export const allLeft = {
+  header: ["ge-table-text-align-left"],
+  body: ["ge-table-text-align-left"],
+  footer: ["ge-table-text-align-left"]
+};
+export const allCenter = {
+  header: ["ge-table-text-align-center"],
+  body: ["ge-table-text-align-center"],
+  footer: ["ge-table-text-align-center"]
+};
+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,14 @@
+import { AreaObjectMap } from "./area-map";
+import { CellRendererIf } from "../../renderer/cell-render.if";
+
+export class AreaMapFactory {
+
+  static body(bodyRenderer: CellRendererIf) {
+    return new AreaObjectMap<CellRendererIf>(
+      undefined,
+      bodyRenderer,
+      undefined
+    );
+  }
+
+}

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

@@ -0,0 +1,11 @@
+import { AreaObjectMapType } from "./area-map.type";
+
+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/{lib/table/data/common/args-adjust-columns-to-row-parent-params.d.ts → src/lib/table/data/common/args-adjust-columns-to-row-parent-params.ts}

@@ -2,15 +2,16 @@ 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";
+
 export interface ArgsAdjustColumnsToRowParentParams {
-    areaIdent: AreaIdent;
-    sideIdent: SideIdent;
-    areaModel: AreaModelIf;
-    geo: GeoData;
-    parent: HTMLDivElement;
-    rowIndex: number;
-    columnIndexStart: number;
-    columnIndexEnd: number;
-    verticalFixed?: boolean;
-    firstVisibleRow?: boolean;
+  areaIdent: AreaIdent;
+  sideIdent: SideIdent;
+  areaModel: AreaModelIf;
+  geo: GeoData;
+  parent: HTMLDivElement;
+  rowIndex: number;
+  columnIndexStart: number;
+  columnIndexEnd: number;
+  verticalFixed?: boolean;
+  lastRowOfModel?: boolean;
 }