@guiexpert/table 1.0.8 → 1.0.11

package/README.md

@@ -0,0 +1,102 @@
+
+# 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 data 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 = TableModelFactory
+  .createByArrayOfArraysParams<any>(param: {
+    columnLabels: [
+      ['Header 1', 'Header 2']
+    ],
+    data: [
+      ['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/css/main.css

@@ -1,3 +1,9 @@
+.ge-table {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
 
 .ge-table-col-div {
   text-align: center;
@@ -199,6 +205,12 @@ html,
 
   --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);
 }
 
 
@@ -264,6 +276,12 @@ html,
   --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-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);
 }
 /* Tree table */
 

package/css/table-classes.css

@@ -1,3 +1,9 @@
+.ge-table {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
 
 .ge-table-col-div {
   text-align: center;

package/css/table-color-vars.css

@@ -73,6 +73,12 @@ html,
 
   --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);
 }
 
 
@@ -138,4 +144,10 @@ html,
   --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-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);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/table",
-  "version": "1.0.8",
+  "version": "1.0.11",
   "peerDependencies": {},
   "dependencies": {
     "tslib": "^2.3.0"