@jh-grid/jhgrid-js 0.1.0
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/LICENSE +67 -0
- package/NOTICE +4 -0
- package/README.md +182 -0
- package/dist/jhgrid.esm.js +11895 -0
- package/dist/jhgrid.js +11919 -0
- package/dist/jhgrid.min.js +149 -0
- package/index.d.ts +1294 -0
- package/package.json +52 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
JHGrid Proprietary License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 JHGrid Contributors. All rights reserved.
|
|
4
|
+
|
|
5
|
+
This license governs use of the compiled/bundled distributions of JHGrid made
|
|
6
|
+
available in this repository (the files under `dist/`, including but not
|
|
7
|
+
limited to `jhgrid.js`, `jhgrid.min.js`, and `jhgrid.esm.js`) (the
|
|
8
|
+
"Software"). It does not grant any right to the underlying source code,
|
|
9
|
+
which is not distributed here.
|
|
10
|
+
|
|
11
|
+
1. GRANT OF LICENSE
|
|
12
|
+
|
|
13
|
+
Subject to the terms of this license, JHGrid Contributors grants you a
|
|
14
|
+
free, worldwide, non-exclusive, non-transferable license to use the
|
|
15
|
+
Software, in unmodified compiled form, within your own applications,
|
|
16
|
+
products, and websites, for any number of end users, including
|
|
17
|
+
commercial use.
|
|
18
|
+
|
|
19
|
+
2. RESTRICTIONS
|
|
20
|
+
|
|
21
|
+
You may NOT, without prior written permission from JHGrid Contributors:
|
|
22
|
+
|
|
23
|
+
a. redistribute, sublicense, sell, rent, or otherwise make the Software
|
|
24
|
+
(in whole or in part) available as a standalone product, library, or
|
|
25
|
+
competing offering, whether unmodified or modified;
|
|
26
|
+
|
|
27
|
+
b. reverse engineer, decompile, disassemble, or otherwise attempt to
|
|
28
|
+
derive the source code of the Software, except to the extent such
|
|
29
|
+
restriction is prohibited by applicable law;
|
|
30
|
+
|
|
31
|
+
c. remove or alter any copyright, trademark, or other proprietary
|
|
32
|
+
notice contained in the Software;
|
|
33
|
+
|
|
34
|
+
d. use the JHGrid name, logo, or trademarks to endorse or promote
|
|
35
|
+
products derived from the Software without prior written consent.
|
|
36
|
+
|
|
37
|
+
3. OWNERSHIP
|
|
38
|
+
|
|
39
|
+
The Software is licensed, not sold. JHGrid Contributors retains all
|
|
40
|
+
right, title, and interest in and to the Software, including all
|
|
41
|
+
intellectual property rights therein. No rights are granted other than
|
|
42
|
+
those expressly stated in this license.
|
|
43
|
+
|
|
44
|
+
4. NO WARRANTY
|
|
45
|
+
|
|
46
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
|
47
|
+
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
48
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND
|
|
49
|
+
NONINFRINGEMENT.
|
|
50
|
+
|
|
51
|
+
5. LIMITATION OF LIABILITY
|
|
52
|
+
|
|
53
|
+
IN NO EVENT SHALL JHGRID CONTRIBUTORS BE LIABLE FOR ANY CLAIM, DAMAGES,
|
|
54
|
+
OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR
|
|
55
|
+
OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR
|
|
56
|
+
THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
57
|
+
|
|
58
|
+
6. TERMINATION
|
|
59
|
+
|
|
60
|
+
This license terminates automatically if you breach any of its terms.
|
|
61
|
+
Upon termination you must stop using the Software and destroy all
|
|
62
|
+
copies in your possession.
|
|
63
|
+
|
|
64
|
+
7. CONTACT
|
|
65
|
+
|
|
66
|
+
For redistribution, OEM, or source-code licensing inquiries, contact
|
|
67
|
+
JHGrid Contributors via https://github.com/JH-Grid/JHGrid.
|
package/NOTICE
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
# JH Grid
|
|
2
|
+
|
|
3
|
+
High-performance Canvas-based data grid with smooth 2D virtualization.
|
|
4
|
+
Renders millions of rows and columns with near-zero DOM overhead.
|
|
5
|
+
|
|
6
|
+

|
|
7
|
+
|
|
8
|
+
> This repository distributes the **pre-built bundle** (`jhgrid.esm.js` / `jhgrid.js` /
|
|
9
|
+
> `jhgrid.min.js`) plus its documentation, not the buildable source tree. See [`docs/`](docs/README.md)
|
|
10
|
+
> for the full reference.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## Features
|
|
15
|
+
|
|
16
|
+
- Smooth rendering via `requestAnimationFrame` + Canvas 2D, synced to your display's native refresh rate (60Hz, 120Hz, 144Hz, etc.), not capped at 60fps
|
|
17
|
+
- 2D virtual scrolling: only visible cells are drawn
|
|
18
|
+
- Chunk-based async data loading with prefetch & cache
|
|
19
|
+
- HiDPI / Retina display support (devicePixelRatio scaling)
|
|
20
|
+
- Draggable scrollbars (vertical + horizontal)
|
|
21
|
+
- Left/right frozen columns (`frozenCols` / `frozenColsRight`)
|
|
22
|
+
- **Cell click**: single cell selection with blue border highlight
|
|
23
|
+
- **Cell drag**: multi-cell range selection with fill overlay
|
|
24
|
+
- **Row selection**: single/multi row selection (`rowSelection: 'single' | 'multi'`), with an optional select-all header checkbox (`columnDefs[].headerCheckbox`)
|
|
25
|
+
- **Row drag reorder**: drag rows by the row-number gutter (`rowReorder: true`)
|
|
26
|
+
- **Double-click to edit**: per-column editable/readonly control
|
|
27
|
+
- **Ctrl+C / Ctrl+V**: copy & paste (single cell or range, TSV format)
|
|
28
|
+
- **Ctrl+Z / Ctrl+Y**: undo / redo (cell edits, row/column add/delete)
|
|
29
|
+
- **Column validation**: declarative required/pattern/min/max/length/custom rules with red-border + tooltip error display (`min`/`max` compare chronologically on a `type: 'date'` column)
|
|
30
|
+
- **In-cell action buttons**: `type: 'button'` columns render a clickable pill per row (e.g. "Delete", "Approve") independent of `editableCols`
|
|
31
|
+
- **Date / rich-text / image cell types**: `type: 'date'` opens a native date/datetime picker; `type: 'richtext'` opens an inline bold/italic/underline/strikethrough editor; `type: 'image'` renders a cell image (`fit: 'cover' | 'contain'`, size-aware decoding, shared LRU cache), plus a pluggable `CellEditors`/`CellRenderers` registry (`registerCellEditor()`/`registerCellRenderer()`) for fully custom editors and renderers
|
|
32
|
+
- **Set filter**: checkbox list of a column's distinct values in the header filter panel (`setFilterValues()`)
|
|
33
|
+
- **Quick filter**: global cross-column search term (`setQuickFilter()` / `getQuickFilter()` / `clearQuickFilter()`)
|
|
34
|
+
- **Single-column sort**: `setSort()` / `removeSort()` / `clearSort()`
|
|
35
|
+
- **Row / column CRUD**: `addRow()`/`deleteRow()`/`undeleteRow()`, `addColumn()`/`deleteColumn()`/`undeleteColumn()`, with matching `getNew*()`/`getDeleted*()` accessors for diff-based saves
|
|
36
|
+
- **Column hide/show**: `hideColumn()` / `showColumn()` / `isColumnVisible()` / `getHiddenColumns()`, plus per-row/column resize (`setRowHeight()`, `autoFitColumns()`)
|
|
37
|
+
- **Multi-level header groups**: `columnDefs[].group` (or explicit `headerRows`) merges header cells across levels
|
|
38
|
+
- **Per-row / per-cell styling callbacks**: `rowHighlighter` / `cellBackground` for conditional formatting
|
|
39
|
+
- **State snapshot/restore**: `getState()` / `setState()` for saving and restoring grid state (filters, sort, column order/visibility, edits)
|
|
40
|
+
- **Built-in localization**: `locale` option with bundled `KO_I18N` / `JA_I18N` / `ZH_I18N` text packs, per-key `i18n` overrides, and locale-aware number/date/currency cell rendering
|
|
41
|
+
- **Accessibility**: ARIA labeling, keyboard-navigable header/row focus, and automatic high-contrast (`forced-colors`) theme remapping
|
|
42
|
+
- **CSV export + print preview**: `exportCsv()`, `printGrid()`
|
|
43
|
+
- **Arrow key navigation**: keyboard-driven cell movement
|
|
44
|
+
- **Enter / Tab**: commit edit and move to next row / column
|
|
45
|
+
- Text overflow with ellipsis (`…`): O(log n) binary search
|
|
46
|
+
- Fully themeable
|
|
47
|
+
- Zero dependencies
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Installation
|
|
52
|
+
|
|
53
|
+
> **npm package coming soon.** For now, use one of the two options below.
|
|
54
|
+
|
|
55
|
+
### Option A: Static ES module (no bundler)
|
|
56
|
+
|
|
57
|
+
`jhgrid.esm.js` is a single self-contained ES module file: deploy it as-is as a static resource
|
|
58
|
+
(e.g. from a Spring Boot static resource path) and import it directly, no build step required:
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<script type="module">
|
|
62
|
+
import { JHGrid } from '/static/jhgrid.esm.js';
|
|
63
|
+
</script>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Option B: CDN (single bundled script)
|
|
67
|
+
|
|
68
|
+
`jhgrid.min.js` is an IIFE build served straight from this repository via jsDelivr, no npm
|
|
69
|
+
install required. Everything is exposed on a single global, `JHGrid` (the grid constructor is
|
|
70
|
+
`JHGrid.JHGrid`):
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<!-- pin an exact tag/commit for production; @latest always serves the latest commit on that branch -->
|
|
74
|
+
<script src="https://cdn.jsdelivr.net/gh/JH-Grid/JHGrid@latest/dist/jhgrid.min.js"></script>
|
|
75
|
+
<script>
|
|
76
|
+
const grid = new JHGrid.JHGrid({
|
|
77
|
+
container: '#my-grid',
|
|
78
|
+
// ...
|
|
79
|
+
});
|
|
80
|
+
</script>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## Quick Start
|
|
86
|
+
|
|
87
|
+
### Data already in memory (default)
|
|
88
|
+
|
|
89
|
+
Pass an array you already have (an API response, a small/medium table) straight in via `data`,
|
|
90
|
+
no fetch functions needed:
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<div id="my-grid"></div>
|
|
94
|
+
|
|
95
|
+
<script type="module">
|
|
96
|
+
import { JHGrid } from './dist/jhgrid.esm.js'; // adjust to wherever you host the file
|
|
97
|
+
|
|
98
|
+
const grid = new JHGrid({
|
|
99
|
+
container: '#my-grid',
|
|
100
|
+
width: 1200,
|
|
101
|
+
height: 700,
|
|
102
|
+
|
|
103
|
+
data: [
|
|
104
|
+
{ name: 'Alice', age: 30, city: 'Seoul' },
|
|
105
|
+
{ name: 'Bob', age: 25, city: 'Busan' },
|
|
106
|
+
],
|
|
107
|
+
|
|
108
|
+
// Columns allowed to be edited (all columns are readonly if omitted)
|
|
109
|
+
editableCols: '*', // or ['name', 'age'] for a subset
|
|
110
|
+
|
|
111
|
+
// Called whenever a cell value changes. oldValue is the prior edit if the cell was already
|
|
112
|
+
// dirty, otherwise the row's original (pre-edit) value.
|
|
113
|
+
onCellChange: ({ row, field, newValue, oldValue }) => {
|
|
114
|
+
console.log(`[${row}] ${field}: ${oldValue} -> ${newValue}`);
|
|
115
|
+
},
|
|
116
|
+
});
|
|
117
|
+
</script>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
See [Local Array Data](docs/api.md#local-array-data-data) for how filtering/sorting/`refresh()`
|
|
121
|
+
behave against a plain array.
|
|
122
|
+
|
|
123
|
+
### Server-paginated data
|
|
124
|
+
|
|
125
|
+
For a large dataset that shouldn't be loaded into memory all at once, fetch it page by page
|
|
126
|
+
instead:
|
|
127
|
+
|
|
128
|
+
```html
|
|
129
|
+
<div id="my-grid"></div>
|
|
130
|
+
|
|
131
|
+
<script type="module">
|
|
132
|
+
import { JHGrid } from './dist/jhgrid.esm.js'; // adjust to wherever you host the file
|
|
133
|
+
|
|
134
|
+
const grid = new JHGrid({
|
|
135
|
+
container: '#my-grid',
|
|
136
|
+
width: 1200,
|
|
137
|
+
height: 700,
|
|
138
|
+
editableCols: '*',
|
|
139
|
+
|
|
140
|
+
fetchMeta: async () => {
|
|
141
|
+
const res = await fetch('/api/grid/meta');
|
|
142
|
+
return res.json(); // { totalRows: number, columns: string[] }
|
|
143
|
+
},
|
|
144
|
+
|
|
145
|
+
fetchData: async (page, size) => {
|
|
146
|
+
const res = await fetch(`/api/grid/data?page=${page}&size=${size}`);
|
|
147
|
+
return res.json(); // { rows: object[] }
|
|
148
|
+
},
|
|
149
|
+
});
|
|
150
|
+
</script>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
See [`fetchPage`](docs/api.md#fetchpage-single-callback-alternative) for a single-callback
|
|
154
|
+
alternative to `fetchMeta`+`fetchData` when your backend already returns both together.
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## Documentation
|
|
159
|
+
|
|
160
|
+
**[Browse the docs online](https://jh-grid.github.io/JHGrid/)**, or read them directly in
|
|
161
|
+
[`docs/`](docs/README.md):
|
|
162
|
+
|
|
163
|
+
- **[API Reference](docs/api.md)**: every constructor option, the data source interface, pagination, and all public methods
|
|
164
|
+
- **[Theming](docs/theming.md)**: the full theme object, styling with your own CSS via `--jhg-*` custom properties, and canvas motion tuning
|
|
165
|
+
- **[Interaction Reference](docs/interaction.md)**: every mouse and keyboard interaction
|
|
166
|
+
- **[Spring Boot Integration](docs/integration.md)**: backend API shape and SQL pagination
|
|
167
|
+
- **[Architecture](docs/architecture.md)**: internal structure and the virtual rendering flow
|
|
168
|
+
- **[Browser Support](docs/browser-support.md)**: minimum versions and what sets them
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
## Browser Support
|
|
173
|
+
|
|
174
|
+
Chrome/Edge 92+, Firefox 90+, Safari 15.4+: no IE, no legacy Edge, no transpilation or polyfills.
|
|
175
|
+
See [docs/browser-support.md](docs/browser-support.md) for exactly what sets that floor.
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
## License
|
|
180
|
+
|
|
181
|
+
Proprietary: free to use in your own applications, no redistribution or reverse engineering of
|
|
182
|
+
the compiled bundle. See [LICENSE](LICENSE) and [NOTICE](NOTICE).
|