-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
138 lines (116 loc) · 3.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>gridchen Demos</title>
<link rel="stylesheet" href="demo.css">
<script src="./theme.js"></script>
</head>
<body>
<h1>Deprecated</h1>
Gridchen is now merged to https://github.com/decatur/formchen
<h1>gridchen</h1>
<p>
Very lightweight and fast editable web grid with strict MS-Excel adherence to user experience.
Modern as of year 2020 (web components, es6 modules) with no dependencies.
The source is at <a href="https://github.com/decatur/gridchen">gridchen Repository</a>
</p>
<p>
Highlights are
<p>
<ul>
<li>Supports light and dark theme without an extension</li>
<li>Strong support for dates and times both local and UTC</li>
<li>JSON matrix abstraction</li>
<li>Undo/Redo, report data changes</li>
<li>Use of standards such as JSON Schema and JSON Patch</li>
<li>Strong test base</li>
<li>No build process such as webpack or rollup</li>
<li>Vanilla JavaScript with JSDoc-Typing</li>
</ul>
<p>
If you need to edit mixed hierarchical and grid data, please visit sister project
<a href="https://decatur.github.io/form-chen">form-chen</a>.
</p>
<h2>Color Scheme Support</h2>
<label>
You are using the
<select id="colorScheme">
<option name="preferred">preferred</option>
<option name="dark">dark</option>
<option name="light">light</option>
</select>
color scheme.
</label>
<p>
Option <code>preferred</code> means the OS theme setting, supported by both Firefox 67 and Chrome 76.
</p>
<h2>Demos</h2>
<ul>
<li>
<a href="json_types.html">Basic JSON Types</a>
</li>
<li>
<a href="string_date_formats.html">String Date Formats</a>
</li>
<li>
<a href="object_date_formats.html">Object Date Formats</a>
</li>
<li>
<a href="virtual_scrolling.html">Performance through virtual scrolling</a>
</li>
<li>
<a href="real-time.html">Real Time</a>
</li>
<li>
<a href="javascript_api.html">JavaScript API</a>
</li>
</ul>
<p>
There are five <em>natural</em> types to express a matrix structure in JSON.
All of them are supported by default.
</p>
<ol>
<li>
<a href="array_of_row_arrays.html">Array of Row Arrays</a>
</li>
<li>
<a href="array_of_row_objects.html">Array of Row Objects</a>
</li>
<li>
<a href="array_of_column_arrays.html">Array of Column Arrays</a>
</li>
<li>
<a href="object_of_columns.html">Object of Columns</a>
</li>
<li>
<a href="single_column_array.html">Single Column Array</a>
</li>
</ol>
<p>
<a href="flex-layout.html">CSS Flex Layout Demo</a>
</p>
<p>
<a href="unicode-symbols.html">Unicode Symbols Demo, my favorite 😊</a>
</p>
<p>
<a href="window-navigator.html">Navigate all properties of the DOM Window object</a>
</p>
<p>
<a href="readonly.html">Read Only Demo</a>
</p>
<p>
<a href="plot.html">Charting Demo</a>
</p>
<p>
Dealing with Column Left to Right Order for <a href="column_order_row_objects.html">row objects</a> and
<a href="column_order_objects_of_columns.html">object of columns.</a>
</p>
<p>
<a href="readme.html">The README Usage Example</a>
</p>
<p>
<a href="suiterunner.html">Run unit tests</a>
</p>
</body>
</html>