@guiexpert/table 1.0.9 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
|
|
2
|
+
# GuiExpert Table with plain JS
|
|
3
|
+
|
|
4
|
+
This is the base component of the GuiExpert Table Project. One can use this in a plain JS project.
|
|
5
|
+
|
|
6
|
+
## Become a master at creating web applications with large tables
|
|
7
|
+
|
|
8
|
+
This is the UI-agnostic table component for your next web app. 😊
|
|
9
|
+
|
|
10
|
+
<img src="https://raw.githubusercontent.com/guiexperttable/ge-table/main/apps/table-website/src/assets/screens/heatmap.png" width="50%">
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
- Handle large datasets easily
|
|
14
|
+
- Excellent performance for large tables by vertical and horizontal virtual scrolling
|
|
15
|
+
- Fully-featured (advanced sorting and filtering)
|
|
16
|
+
- Highly customizable data grid
|
|
17
|
+
- Outstanding performance
|
|
18
|
+
- No third-party dependencies
|
|
19
|
+
- UI-agnostic
|
|
20
|
+
- Column Interactions (resize, reorder)
|
|
21
|
+
- Sorting Rows
|
|
22
|
+
- Row, Column, and Range Selection
|
|
23
|
+
- Single and Multi Selection
|
|
24
|
+
- UI-agnostic
|
|
25
|
+
- Row and Column Spanning
|
|
26
|
+
- Fixed Columns (Left and Right)
|
|
27
|
+
- Tree table (Hierarchical View)
|
|
28
|
+
- Accessibility support: Keyboard Shortcuts
|
|
29
|
+
- Custom Filtering
|
|
30
|
+
- In-place Cell Editing
|
|
31
|
+
- Userdefined Key and Mouse Events
|
|
32
|
+
- Customizable Look & Feel (via CSS variables)
|
|
33
|
+
- Row sorting
|
|
34
|
+
- Column Reordering (Drag and Drop)
|
|
35
|
+
- State Persistence (Row Sorting, Column Order, Selection)
|
|
36
|
+
- Customizable Cell Contents via Renderer for Header, Body and Footer
|
|
37
|
+
- Full control over the HTML structure and style
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## Links
|
|
41
|
+
|
|
42
|
+
- [Demos](https://gui.expert/demos)
|
|
43
|
+
- [Documentation](https://gui.expert/doc)
|
|
44
|
+
- [API](https://gui.expert/api)
|
|
45
|
+
|
|
46
|
+
## Get Started
|
|
47
|
+
|
|
48
|
+
Add the following NPM package to your existing plain JS project (run this in your project root directory):
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
npm install --save @guiexpert/table
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Add an empty <div> element to your html code:
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
<div
|
|
58
|
+
class="container-div"
|
|
59
|
+
style="width:100%;height:100%;background:transparent;margin:0;padding:0;"
|
|
60
|
+
></div>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
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:
|
|
64
|
+
```
|
|
65
|
+
import {
|
|
66
|
+
EventAdapter,
|
|
67
|
+
SimpleDomService,
|
|
68
|
+
TableModelIf,
|
|
69
|
+
TableOptions,
|
|
70
|
+
TableScope } from "@guiexpert/table";
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
Create a table model.
|
|
75
|
+
Select ('querySelector') the <div> element and create a table scope.
|
|
76
|
+
Finally, call firstInit() at least once.
|
|
77
|
+
In this example, you will see the plain TS version. For plain JS, remove ': TableModelIf'.
|
|
78
|
+
|
|
79
|
+
```
|
|
80
|
+
const tableModel: TableModelIf = TableModelFactory
|
|
81
|
+
.createByArrayOfArraysParams<any>(param: {
|
|
82
|
+
columnLabels: [
|
|
83
|
+
['Header 1', 'Header 2']
|
|
84
|
+
],
|
|
85
|
+
data: [
|
|
86
|
+
['Text 1a', 'Text 2a'],
|
|
87
|
+
['Text 1b', 'Text 2b'],
|
|
88
|
+
]
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
const ele = document.querySelector(".container-div") as HTMLDivElement;
|
|
92
|
+
|
|
93
|
+
const tableScope = new TableScope(
|
|
94
|
+
ele, tableModel, new SimpleDomService(), new TableOptions(), new EventAdapter()
|
|
95
|
+
);
|
|
96
|
+
tableScope.firstInit();
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
There are numerous possibilities to create table models.
|
|
100
|
+
Please refer to the [Documentation](https://gui.expert/doc) for further information or the [Demo](https://gui.expert/demos) section for examples.
|
|
101
|
+
|
|
102
|
+
|