@guiexpert/table 1.1.18 → 1.1.20

package/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+      }
+    }
+  ]
+}

package/dist/README.md

@@ -0,0 +1,101 @@
+
+# GuiExpert Table with plain JS
+
+This is the base component of the GuiExpert Table Project. One can use this in a plain JS project.
+
+## Become a master at creating web applications with large tables
+
+This is the UI-agnostic table component for your next web app. 😊
+
+<img src="https://raw.githubusercontent.com/guiexperttable/ge-table/main/apps/table-website/src/assets/screens/heatmap.png" width="50%">
+
+### Features
+- Handle large datasets easily
+- Excellent performance for large tables by vertical and horizontal virtual scrolling
+- Fully-featured (advanced sorting and filtering)
+- Highly customizable orderData grid
+- Outstanding performance
+- No third-party dependencies
+- UI-agnostic
+- Column Interactions (resize, reorder)
+- Sorting Rows
+- Row, Column, and Range Selection
+- Single and Multi Selection
+- UI-agnostic
+- Row and Column Spanning
+- Fixed Columns (Left and Right)
+- Tree table (Hierarchical View)
+- Accessibility support: Keyboard Shortcuts
+- Custom Filtering
+- In-place Cell Editing
+- Userdefined Key and Mouse Events
+- Customizable Look & Feel (via CSS variables)
+- Row sorting
+- Column Reordering (Drag and Drop)
+- State Persistence (Row Sorting, Column Order, Selection)
+- Customizable Cell Contents via Renderer for Header, Body and Footer
+- Full control over the HTML structure and style
+
+
+## Links
+
+- [Demos](https://gui.expert/demos)
+- [Documentation](https://gui.expert/doc)
+- [API](https://gui.expert/api)
+
+## Get Started
+
+Add the following NPM package to your existing plain JS project (run this in your project root directory):
+
+```
+npm install --save @guiexpert/table
+```
+
+Add an empty <div> element to your html code:
+
+```
+<div
+    class="container-div"
+    style="width:100%;height:100%;background:transparent;margin:0;padding:0;"
+    ></div>
+```
+
+If you are working with plain JS, you don't need to do this. If you are using TypeScript as a language, please import the following classes:
+```
+import {
+  EventAdapter,
+  SimpleDomService,
+  TableModelIf,
+  TableOptions,
+  TableScope } from "@guiexpert/table";
+```
+
+
+Create a table model.
+Select ('querySelector') the <div> element and create a table scope.
+Finally, call firstInit() at least once.
+In this example, you will see the plain TS version. For plain JS, remove ': TableModelIf'.
+
+```
+const tableModel: TableModelIf = TableFactory.createTableModel({
+  headerData: [
+    ['Header 1', 'Header 2']
+  ],
+  bodyData: [
+    ['Text 1a', 'Text 2a'],
+    ['Text 1b', 'Text 2b'],
+  ]
+});  
+
+const ele = document.querySelector(".container-div") as HTMLDivElement;
+
+const tableScope = new TableScope(
+  ele, tableModel, new SimpleDomService(), new TableOptions(), new EventAdapter()
+);
+tableScope.firstInit();
+```
+
+There are numerous possibilities to create table models.
+Please refer to the [Documentation](https://gui.expert/doc) for further information or the [Demo](https://gui.expert/demos) section for examples.
+
+

package/dist/css/main.css

@@ -0,0 +1,350 @@
+.ge-table {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ge-table-col-div {
+  text-align: center;
+  line-height: 2.5;
+  user-select: none;
+}
+
+.ge-table-label-div {
+  padding: 0;
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+
+.ge-table-label-div .ge-table-label {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.ge-table-text-align-left {
+  text-align: left;
+}
+
+.ge-table-text-align-right {
+  text-align: right;
+}
+
+.ge-table-text-align-center {
+  text-align: center;
+}
+
+/* Row checkbox */
+.ge-table-row-checkbox-div {
+  padding-left: 14px;
+}
+
+
+.ge-table { background-color: var(--ge-table-bg); }
+
+.ge-table-header-west { background-color: var(--ge-table-header-west-bg); }
+.ge-table-header-center { background-color: var(--ge-table-header-center-bg); }
+.ge-table-header-east { background-color: var(--ge-table-header-east-bg); }
+.ge-table-header-west { color: var(--ge-table-header-west-text); }
+.ge-table-header-center { color: var(--ge-table-header-center-text); }
+.ge-table-header-east { color: var(--ge-table-header-east-text); }
+
+.ge-table-header-west-horizontal-border { background-color: var(--ge-table-header-west-horizontal-border); }
+.ge-table-header-west-vertical-border { background-color: var(--ge-table-header-west-vertical-border); }
+.ge-table-header-center-horizontal-border { background-color: var(--ge-table-header-center-horizontal-border); }
+.ge-table-header-center-vertical-border { background-color: var(--ge-table-header-center-vertical-border); }
+.ge-table-header-east-horizontal-border { background-color: var(--ge-table-header-east-horizontal-border); }
+.ge-table-header-east-vertical-border { background-color: var(--ge-table-header-east-vertical-border); }
+
+
+.ge-table-body-west { background-color: var(--ge-table-body-west-bg); }
+.ge-table-body-center { background-color: var(--ge-table-body-center-bg); }
+.ge-table-body-east { background-color: var(--ge-table-body-east-bg); }
+.ge-table-body-west { color: var(--ge-table-body-west-text); }
+.ge-table-body-center { color: var(--ge-table-body-center-text); }
+.ge-table-body-east { color: var(--ge-table-body-east-text); }
+
+.ge-table-body-west-horizontal-border { background-color: var(--ge-table-body-west-horizontal-border); }
+.ge-table-body-west-vertical-border { background-color: var(--ge-table-body-west-vertical-border); }
+.ge-table-body-center-horizontal-border { background-color: var(--ge-table-body-center-horizontal-border); }
+.ge-table-body-center-vertical-border { background-color: var(--ge-table-body-center-vertical-border); }
+.ge-table-body-east-horizontal-border { background-color: var(--ge-table-body-east-horizontal-border); }
+.ge-table-body-east-vertical-border { background-color: var(--ge-table-body-east-vertical-border); }
+
+.ge-table-body-west-selected-range { background-color: var(--ge-table-body-west-selected-range-bg); }
+.ge-table-body-center-selected-range { background-color: var(--ge-table-body-center-selected-range-bg); }
+.ge-table-body-east-selected-range { background-color: var(--ge-table-body-east-selected-range-bg); }
+.ge-table-body-west-selected-range { color: var(--ge-table-body-west-selected-range-text); }
+.ge-table-body-center-selected-range { color: var(--ge-table-body-center-selected-range-text); }
+.ge-table-body-east-selected-range { color: var(--ge-table-body-east-selected-range-text); }
+
+
+
+
+
+
+.ge-table-footer-west { background-color: var(--ge-table-footer-west-bg); }
+.ge-table-footer-center { background-color: var(--ge-table-footer-center-bg); }
+.ge-table-footer-east { background-color: var(--ge-table-footer-east-bg); }
+
+.ge-table-footer-west { color: var(--ge-table-footer-west-text); }
+.ge-table-footer-center { color: var(--ge-table-footer-center-text); }
+.ge-table-footer-east { color: var(--ge-table-footer-east-text); }
+
+.ge-table-footer-west-horizontal-border { background-color: var(--ge-table-footer-west-horizontal-border); }
+.ge-table-footer-west-vertical-border { background-color: var(--ge-table-footer-west-vertical-border); }
+.ge-table-footer-center-horizontal-border { background-color: var(--ge-table-footer-center-horizontal-border); }
+.ge-table-footer-center-vertical-border { background-color: var(--ge-table-footer-center-vertical-border); }
+.ge-table-footer-east-horizontal-border { background-color: var(--ge-table-footer-east-horizontal-border); }
+.ge-table-footer-east-vertical-border { background-color: var(--ge-table-footer-east-vertical-border); }
+
+
+
+
+.ge-table-border { background-color: var(--ge-table-border); }
+.ge-table-row-odd {background-color: var(--ge-table-row-odd-bg); }
+.ge-table-row-even {background-color: var(--ge-table-row-even-bg); }
+.ge-table-column-odd {background-color: var(--ge-table-column-odd-bg); }
+.ge-table-column-even {background-color: var(--ge-table-column-even-bg); }
+
+.ge-table-hover-column { background-color: var(--ge-table-hover-column-bg); }
+.ge-table-hover-row { background-color: var(--ge-table-hover-row-bg); }
+
+.ge-table-focus-border { background-color: var(--ge-table-focus-border); }
+.ge-table-color-col-resize-handle-hover { background-color: var(--ge-table-color-col-resize-handle-hover-bg); }
+.ge-table-color-dragged-col-div { background-color: var(--ge-table-color-dragged-col-div-bg); }
+.ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone-bg); }
+.ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone); }
+.ge-table-color-tree-arrow-collapsed-color { background-color: var(--ge-table-color-tree-arrow-collapsed-color); }
+.ge-table-color-error { color: var(--ge-table-color-error-text); }
+.ge-table-tree-arrow-collapsed { color: var(--ge-table-tree-arrow-collapsed-color);}
+.ge-table-column-resize-handle:hover { background-color: var(--ge-table-column-resize-handle-border) }
+
+.ge-table-drop-zone { background-color: var(--ge-table-drop-zone-bg); }
+.ge-table-dragged-col-div { background-color: var(--ge-table-dragged-col-div-bg); }
+
+
+.ge-table-cell-editor-input,
+.ge-table-cell-editor-input:focus-within {
+  border: none;
+}
+
+.ge-star-rating-div {
+  color: var(--ge-table-color-star-rating, #fcb515);
+}
+
+.ge-table-progress-bar {
+  background-color: var(--ge-table-color-progress-bar, #36BB6C);
+}html, html[data-theme="light"] {
+  --ge-table-bg: #fff;
+  --ge-table-header-west-bg: var(--ge-table-header-center-bg);
+  --ge-table-header-center-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-east-bg: var(--ge-table-header-center-bg);
+  --ge-table-header-west-text: var(--ge-table-header-center-text);
+  --ge-table-header-center-text: #000;
+  --ge-table-header-east-text: var(--ge-table-header-center-text);
+
+  --ge-table-header-west-horizontal-border: var(--ge-table-header-center-horizontal-border);
+  --ge-table-header-west-vertical-border: var(--ge-table-header-center-vertical-border);
+  --ge-table-header-center-horizontal-border: #ddd;
+  --ge-table-header-center-vertical-border: #ccc;
+  --ge-table-header-east-horizontal-border: var(--ge-table-header-center-horizontal-border);
+  --ge-table-header-east-vertical-border: var(--ge-table-header-center-vertical-border);
+
+
+  --ge-table-body-west-bg: var(--ge-table-header-center-bg);
+  --ge-table-body-center-bg: rgba(255,255,255, 0.5);
+  --ge-table-body-east-bg: var(--ge-table-header-center-bg);
+
+  --ge-table-body-west-text: var(--ge-table-header-center-text);
+  --ge-table-body-center-text: var(--ge-table-header-center-text);
+  --ge-table-body-east-text: var(--ge-table-header-center-text);
+
+  --ge-table-body-west-horizontal-border: var(--ge-table-header-west-horizontal-border);
+  --ge-table-body-west-vertical-border: var(--ge-table-header-west-vertical-border);
+  --ge-table-body-center-horizontal-border: #bbb;
+  --ge-table-body-center-vertical-border: #ddd;
+  --ge-table-body-east-horizontal-border: var(--ge-table-header-east-horizontal-border);
+  --ge-table-body-east-vertical-border: var(--ge-table-header-east-vertical-border);;
+
+
+  --ge-table-footer-west-bg: var(--ge-table-header-center-bg);
+  --ge-table-footer-center-bg: var(--ge-table-header-center-bg);
+  --ge-table-footer-east-bg: var(--ge-table-header-center-bg);
+
+  --ge-table-footer-west-text: var(--ge-table-header-center-text);
+  --ge-table-footer-center-text: var(--ge-table-header-center-text);
+  --ge-table-footer-east-text: var(--ge-table-header-center-text);
+
+  --ge-table-footer-west-horizontal-border: var(--ge-table-header-west-horizontal-border);
+  --ge-table-footer-west-vertical-border: var(--ge-table-header-west-vertical-border);
+  --ge-table-footer-center-horizontal-border: var(--ge-table-header-center-horizontal-border);
+  --ge-table-footer-center-vertical-border: var(--ge-table-header-center-vertical-border);
+  --ge-table-footer-east-horizontal-border: var(--ge-table-header-east-horizontal-border);
+  --ge-table-footer-east-vertical-border: var(--ge-table-header-east-vertical-border);
+
+
+  --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-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, 0, 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);
+
+  --ge-table-color-col-resize-handle-hover-bg: cyan;
+  --ge-table-color-dragged-col-div-bg: #fafafa;
+  --ge-table-color-drop-zone-bg: #fafafa;
+  --ge-table-color-drop-zone: #fafafa;
+  --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
+
+  --ge-table-color-star-rating: #fcb515;
+  --ge-table-color-progress-bar: #36BB6C;
+}
+
+
+
+
+html[data-theme="dark"] {
+  --ge-table-bg: #111827;
+  --ge-table-header-west-bg: #111827;
+  --ge-table-header-center-bg: #111827;
+  --ge-table-header-east-bg: #111827;
+  --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: #313641;
+  --ge-table-header-west-vertical-border: oklch(32% 0 0);
+  --ge-table-header-center-horizontal-border: #313641;
+  --ge-table-header-center-vertical-border: oklch(32% 0 0);
+  --ge-table-header-east-horizontal-border: #313641;
+  --ge-table-header-east-vertical-border: oklch(32% 0 0);
+  --ge-table-body-west-bg: #23272e;
+  --ge-table-body-center-bg: #23272e55;
+  --ge-table-body-east-bg: #23272e;
+  --ge-table-body-west-text: oklch(100% 0 0);
+  --ge-table-body-center-text: oklch(100% 0 0);
+  --ge-table-body-east-text: oklch(100% 0 0);
+  --ge-table-body-west-horizontal-border: #313641;
+  --ge-table-body-west-vertical-border: oklch(32% 0 0);
+  --ge-table-body-center-horizontal-border: #313641;
+  --ge-table-body-center-vertical-border: oklch(32% 0 0);
+  --ge-table-body-east-horizontal-border: #313641;
+  --ge-table-body-east-vertical-border: oklch(32% 0 0);
+  --ge-table-footer-west-bg: #111827;
+  --ge-table-footer-center-bg: #111827;
+  --ge-table-footer-east-bg: #111827;
+  --ge-table-footer-west-text: var(--ge-table-header-center-text);;
+  --ge-table-footer-center-text: var(--ge-table-header-center-text);;
+  --ge-table-footer-east-text: var(--ge-table-header-center-text);;
+  --ge-table-footer-west-horizontal-border: oklch(30% 0 0);
+  --ge-table-footer-west-vertical-border: oklch(32% 0 0);
+  --ge-table-footer-center-horizontal-border: oklch(30% 0 0);
+  --ge-table-footer-center-vertical-border: oklch(32% 0 0);
+  --ge-table-footer-east-horizontal-border: oklch(30% 0 0);
+  --ge-table-footer-east-vertical-border: oklch(32% 0 0);
+  --ge-table-border: oklch(32% 0 0);
+  --ge-table-row-odd-bg: #11151F55;
+  --ge-table-row-even-bg: #1A202F55;
+  --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: #ffa8b5;
+  --ge-table-tree-arrow-collapsed-color: #ffa8b5;
+  --ge-table-column-resize-handle-border: rgb(0, 255, 255);;
+  --ge-table-dragged-col-div-bg: oklch(0% 0 0);
+  --ge-table-drop-zone-bg: oklch(0% 0 0);
+
+
+
+  --ge-table-body-west-selected-range-bg: oklch(19% 0.2 205.2);
+  --ge-table-body-center-selected-range-bg: oklch(19% 0.2 205.2);
+  --ge-table-body-east-selected-range-bg: oklch(19% 0.2 205.2);
+  --ge-table-body-west-selected-range-text: #0098db;
+  --ge-table-body-center-selected-range-text: #0098db;
+  --ge-table-body-east-selected-range-text: #0098db;
+
+  --ge-table-color-col-resize-handle-hover-bg: cyan;
+  --ge-table-color-dragged-col-div-bg: #fafafa;
+  --ge-table-color-drop-zone-bg: #fafafa;
+  --ge-table-color-drop-zone: #fafafa;
+  --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
+
+  --ge-table-color-star-rating: #fcb515;
+  --ge-table-color-progress-bar: #36BB6C;
+}
+/* Tree table */
+
+.ge-table-col-div.ge-table-col-div-0.ge-table-tree-cell {
+  text-align: left;
+}
+
+.ge-table-tree-cell .ge-table-label-div {
+  padding-left: 0;
+  padding-right: 10px;
+  display: inline;
+}
+
+
+.ge-table-col-tree {
+  text-align: left;
+}
+
+.ge-padding-property-checkbox {
+  padding-left: 0;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-0 {
+  padding-left: 16px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-1 {
+  padding-left: 36px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-2 {
+  padding-left: 56px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-3 {
+  padding-left: 76px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-4 {
+  padding-left: 96px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-5 {
+  padding-left: 116px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-5 {
+  padding-left: 136px;
+}
+
+.ge-table-col-div.ge-table-col-tree.ge-table-tree-cell {
+  display: grid;
+  grid-template-columns: 16px 1fr;
+}

package/dist/css/table-classes.css

@@ -0,0 +1,42 @@
+.ge-table {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ge-table-col-div {
+  text-align: center;
+  line-height: 2.5;
+  user-select: none;
+}
+
+.ge-table-label-div {
+  padding: 0;
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+
+.ge-table-label-div .ge-table-label {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.ge-table-text-align-left {
+  text-align: left;
+}
+
+.ge-table-text-align-right {
+  text-align: right;
+}
+
+.ge-table-text-align-center {
+  text-align: center;
+}
+
+/* Row checkbox */
+.ge-table-row-checkbox-div {
+  padding-left: 14px;
+}

package/dist/css/table-color-classes.css

@@ -0,0 +1,98 @@
+
+
+.ge-table { background-color: var(--ge-table-bg); }
+
+.ge-table-header-west { background-color: var(--ge-table-header-west-bg); }
+.ge-table-header-center { background-color: var(--ge-table-header-center-bg); }
+.ge-table-header-east { background-color: var(--ge-table-header-east-bg); }
+.ge-table-header-west { color: var(--ge-table-header-west-text); }
+.ge-table-header-center { color: var(--ge-table-header-center-text); }
+.ge-table-header-east { color: var(--ge-table-header-east-text); }
+
+.ge-table-header-west-horizontal-border { background-color: var(--ge-table-header-west-horizontal-border); }
+.ge-table-header-west-vertical-border { background-color: var(--ge-table-header-west-vertical-border); }
+.ge-table-header-center-horizontal-border { background-color: var(--ge-table-header-center-horizontal-border); }
+.ge-table-header-center-vertical-border { background-color: var(--ge-table-header-center-vertical-border); }
+.ge-table-header-east-horizontal-border { background-color: var(--ge-table-header-east-horizontal-border); }
+.ge-table-header-east-vertical-border { background-color: var(--ge-table-header-east-vertical-border); }
+
+
+.ge-table-body-west { background-color: var(--ge-table-body-west-bg); }
+.ge-table-body-center { background-color: var(--ge-table-body-center-bg); }
+.ge-table-body-east { background-color: var(--ge-table-body-east-bg); }
+.ge-table-body-west { color: var(--ge-table-body-west-text); }
+.ge-table-body-center { color: var(--ge-table-body-center-text); }
+.ge-table-body-east { color: var(--ge-table-body-east-text); }
+
+.ge-table-body-west-horizontal-border { background-color: var(--ge-table-body-west-horizontal-border); }
+.ge-table-body-west-vertical-border { background-color: var(--ge-table-body-west-vertical-border); }
+.ge-table-body-center-horizontal-border { background-color: var(--ge-table-body-center-horizontal-border); }
+.ge-table-body-center-vertical-border { background-color: var(--ge-table-body-center-vertical-border); }
+.ge-table-body-east-horizontal-border { background-color: var(--ge-table-body-east-horizontal-border); }
+.ge-table-body-east-vertical-border { background-color: var(--ge-table-body-east-vertical-border); }
+
+.ge-table-body-west-selected-range { background-color: var(--ge-table-body-west-selected-range-bg); }
+.ge-table-body-center-selected-range { background-color: var(--ge-table-body-center-selected-range-bg); }
+.ge-table-body-east-selected-range { background-color: var(--ge-table-body-east-selected-range-bg); }
+.ge-table-body-west-selected-range { color: var(--ge-table-body-west-selected-range-text); }
+.ge-table-body-center-selected-range { color: var(--ge-table-body-center-selected-range-text); }
+.ge-table-body-east-selected-range { color: var(--ge-table-body-east-selected-range-text); }
+
+
+
+
+
+
+.ge-table-footer-west { background-color: var(--ge-table-footer-west-bg); }
+.ge-table-footer-center { background-color: var(--ge-table-footer-center-bg); }
+.ge-table-footer-east { background-color: var(--ge-table-footer-east-bg); }
+
+.ge-table-footer-west { color: var(--ge-table-footer-west-text); }
+.ge-table-footer-center { color: var(--ge-table-footer-center-text); }
+.ge-table-footer-east { color: var(--ge-table-footer-east-text); }
+
+.ge-table-footer-west-horizontal-border { background-color: var(--ge-table-footer-west-horizontal-border); }
+.ge-table-footer-west-vertical-border { background-color: var(--ge-table-footer-west-vertical-border); }
+.ge-table-footer-center-horizontal-border { background-color: var(--ge-table-footer-center-horizontal-border); }
+.ge-table-footer-center-vertical-border { background-color: var(--ge-table-footer-center-vertical-border); }
+.ge-table-footer-east-horizontal-border { background-color: var(--ge-table-footer-east-horizontal-border); }
+.ge-table-footer-east-vertical-border { background-color: var(--ge-table-footer-east-vertical-border); }
+
+
+
+
+.ge-table-border { background-color: var(--ge-table-border); }
+.ge-table-row-odd {background-color: var(--ge-table-row-odd-bg); }
+.ge-table-row-even {background-color: var(--ge-table-row-even-bg); }
+.ge-table-column-odd {background-color: var(--ge-table-column-odd-bg); }
+.ge-table-column-even {background-color: var(--ge-table-column-even-bg); }
+
+.ge-table-hover-column { background-color: var(--ge-table-hover-column-bg); }
+.ge-table-hover-row { background-color: var(--ge-table-hover-row-bg); }
+
+.ge-table-focus-border { background-color: var(--ge-table-focus-border); }
+.ge-table-color-col-resize-handle-hover { background-color: var(--ge-table-color-col-resize-handle-hover-bg); }
+.ge-table-color-dragged-col-div { background-color: var(--ge-table-color-dragged-col-div-bg); }
+.ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone-bg); }
+.ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone); }
+.ge-table-color-tree-arrow-collapsed-color { background-color: var(--ge-table-color-tree-arrow-collapsed-color); }
+.ge-table-color-error { color: var(--ge-table-color-error-text); }
+.ge-table-tree-arrow-collapsed { color: var(--ge-table-tree-arrow-collapsed-color);}
+.ge-table-column-resize-handle:hover { background-color: var(--ge-table-column-resize-handle-border) }
+
+.ge-table-drop-zone { background-color: var(--ge-table-drop-zone-bg); }
+.ge-table-dragged-col-div { background-color: var(--ge-table-dragged-col-div-bg); }
+
+
+.ge-table-cell-editor-input,
+.ge-table-cell-editor-input:focus-within {
+  border: none;
+}
+
+.ge-star-rating-div {
+  color: var(--ge-table-color-star-rating, #fcb515);
+}
+
+.ge-table-progress-bar {
+  background-color: var(--ge-table-color-progress-bar, #36BB6C);
+}