-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
405 lines (372 loc) · 26.8 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fin-hypergrid CDN</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="index.js"></script>
</head>
<body>
<div class="page">
<h1 style="margin-top:0">fin-hypergrid CDN</h1>
<p>
Welcome to the Hypergrid <a target="wiki" href="https://en.wikipedia.org/wiki/Content_delivery_network" title="Content Delivery Network">CDN</a>.
</p>
<p>
This CDN hosts builds, including minified builds, of repos hosted under the <a href="https://github.com/fin-hypergrid">fin-hypergrid</a> GitHub organization.
</p>
<blockquote>
All the fin-hypergrid repos are also published to the npm registry for serious application development using a module bundler (such as <a target="bundler" href="http://browserify.org">Browserify</a>
or <a target="bundler" href="http://webpack.github.io/">webpack</a>) to produce a single downloadable JavaScript file. <em>Such applications do not need the build files on this CDN and should not be loading anything from here at run time</em>.
<p>That said, some developers may choose to use a version of fin-hypergrid.min.js, the Hypergrid core build file, and bundle all other modules into a single additional file for download. This approach has the advantage of having the page load the relatively invariant (and large, at 247KB for v3.0.0) core build, which the browser then caches for future reference. This is particularly advantageous if there are multiple apps using the same core file. Download once; use many times. Downsides include limited access to internal core modules (probably a good thing) and the difficulty in maintaining a flat dependency graph when working with more than one bundled build.</p>
</blockquote>
<p>
Specifically, this CDN hosts build files for:
</p>
<ul>
<li>Hypergrid core</li>
<li>Hypergrid plug-ins</li>
<li>Hypergrid data models</li>
</ul>
<blockquote>
A list of the build files on the CDN along with sample script tags
can be found in the <a href="#index" style="font-weight:bold">CDN index</a>.
</blockquote>
<p>
Applications use <a target="wiki" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"><code><script></code></a>
tags to load these files from the CDN at run time.
In this way, individual modules are loaded onto the client synchronously, one file per <code><script></code> tag.
</p>
<p>
In addition to the build files, this site hosts:
</p>
<ul>
<li>functional builds of Hypergrid demos</li>
<li>Hypergrid API documentation</li>
</ul>
<h2>Editions</h2>
<p>
All build files are offed in two editions:
</p>
<ul>
<li>
<code>module-name.js</code> —
Unminified versions are for debugging purposes and, when bundled, include a
<a target="wiki" href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.
</li>
<li>
<code>module-name.min.js</code> —
<a target="wiki" href="https://en.wikipedia.org/wiki/Minification_(programming)">Minified</a>
versions are smaller and faster and are for use on production.
</li>
</ul>
<h2>Usage</h2>
<ol>
<li>
Copy and paste <code><script></code> tags from the
<a href="#index">CDN index</a>,
as needed, into your application's <code>.html</code> file
to have your application load them at run time.
</li>
<li>
Reference the modules in your in code as illustrated in the next section.
</li>
</ol>
<h2>Exposed modules</h2>
The core build exposes some of its internal modules, namespaces, and external dependencies
<blockquote>
The declarations below all assume:<br>
<code>var require = fin.Hypergrid.require; // (calling context undefined)</code>
</blockquote>
<h3 id="internal-modules">Internal modules</h3>
<p>
The Hypergrid core build exposes a selection of its internal modules with <code>require()</code> syntax:
</p>
<ul>
<li><code>var Base = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/Base.js">fin-hypergrid/src/Base</a>');</code></li>
<li><code>var defaults = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/defaults.js">fin-hypergrid/src/defaults</a>'); // aka Hypergrid.defaults aka Hypergrid.properties</code></li>
<li><code>var Behavior = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/behaviors/Behavior.js">fin-hypergrid/src/behaviors/Behavior</a>');</code></li>
<li><code>var Column = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/behaviors/Column.js">fin-hypergrid/src/behaviors/Column</a>');</code></li>
<li><code>var Local = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/behaviors/Local.js">fin-hypergrid/src/behaviors/Local</a>');</code></li>
<li><code>var assignOrDelete = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/lib/assignOrDelete.js">fin-hypergrid/src/lib/assignOrDelete</a>');</code></li>
<li><code>var cellEventFactory = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/lib/cellEventFactory.js">fin-hypergrid/src/lib/cellEventFactory</a>');</code></li>
<li><code>var dynamicProperties = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/lib/dynamicProperties.js">fin-hypergrid/src/lib/dynamicProperties</a>');</code></li>
<li><code>var dispatchGridEvent = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/lib/dispatchGridEvent.js">fin-hypergrid/src/lib/dispatchGridEvent</a>');</code></li>
<li><code>var fields = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/lib/fields.js">fin-hypergrid/src/lib/fields</a>');</code></li>
<li><code>var graphics = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/lib/graphics.js">fin-hypergrid/src/lib/graphics</a>');</code></li>
<li><code>var Canvas = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/lib/Canvas.js">fin-hypergrid/src/lib/Canvas</a>');</code></li>
<li><code>var InclusiveRectangle = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/lib/InclusiveRectangle.js">fin-hypergrid/src/lib/InclusiveRectangle</a>');</code></li>
<li><code>var Registry = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/lib/Registry.js">fin-hypergrid/src/lib/Registry</a>');</code></li>
</ul>
<h3 id="shared-namespaces">Registries</h3>
<p>The following shared namespaces are instances of <code><a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/Registry.js">Registry</a></code>:</p>
<ul>
<li><code>grid.cellEditors</code></li>
<li><code>grid.cellRenderers</code></li>
<li><code>var dataModels = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/dataModels.js">fin-hypergrid/src/dataModels</a>');</code></li>
<li><code>var features = require('<a class="code" href="https://github.com/fin-hypergrid/core/blob/master/src/features.js">fin-hypergrid/src/features</a>');</code></li>
</ul>
<p>
Members are accessed via the registry's <code>get</code> method.
</p>
<p>
These are all <em>shared</em> registries; they are shared by all grid instances on the page.
</p>
<p>
The <code>cellEditors</code>, <code>dataModels</code>, and <code>features</code> registries are collections of object <em>constructors.</em>
The <code>cellRenderers</code> registry is a collection of cell renderer <em>instances.</em>
(Recall however that access to an instance's constructor is available through its <code>constructor</code> property.)
</p>
<p>
</p>
<h3 id="deprecated-namespaces">Deprecated namespaces</h3>
<p>The following namespaces from version 2.1 are deprecated as of version 3.0.0 and will be removed in a future release.
The comments show the deprecated <em>vs.</em> modern usage (where <code>modname</code> is a module name):</p>
<ul>
<li><code>
fin.Hypergrid.lib
// deprecated: fin.Hypergrid.lib.modname<br>
// modern: fin.Hypergrid.require('fin-hypergrid/src/lib/modname')
</code></li>
<li><code>
fin.Hypergrid.behaviors
// deprecated: fin.Hypergrid.behaviors.modname<br>
// modern: fin.Hypergrid.require('fin-hypergrid/src/behaviors/modname')
</code></li>
<li><code>
fin.Hypergrid.dataModels
// deprecated: fin.Hypergrid.dataModels.modname <em>or</em> fin.Hypergrid.dataModels.get('modname')<br>
// modern: fin.Hypergrid.require('fin-hypergrid/src/dataModels/modname')
</code></li>
<li><code>
fin.Hypergrid.features
// deprecated: fin.Hypergrid.features.items.modname <em>or</em> fin.Hypergrid.features.get('modname')<br>
// modern: fin.Hypergrid.require('fin-hypergrid/src/features/modname')
</code></li>
<li><code>
fin.Hypergrid.rectangular // deprecated
// modern: fin.Hypergrid.require('rectangular')
</code></li>
</ul>
<h3 id="external-dependencies">External dependencies</h3>
<p>
In the interest of aiding developers in maintaining a flat dependency graph
(_i.e.,_ avoiding loading multiple instances of the same module),
the core build also exposes its external dependencies,
using the same <code>require()</code>-like syntax as above
(see <a href="https://github.com/fin-hypergrid/core/blob/master/package.json">package.json</a> for versions):
</p>
<ul>
<li><code>var DatasaurBase = require('<a class="code" target="npmjs" href="https://npmjs.org/package/datasaur-base">datasaur-base</a>');</code></li>
<li><code>var DatasaurLocal = require('<a class="code" target="npmjs" href="https://npmjs.org/package/datasaur-local">datasaur-local</a>');</code></li>
<li><code>var extend = require('<a class="code" target="npmjs" href="https://npmjs.org/package/extend-me">extend-me</a>');</code></li>
<li><code>var _ = require('<a class="code" target="npmjs" href="https://npmjs.org/package/object-iterators">object-iterators</a>');</code></li>
<li><code>var overrider = require('<a class="code" target="npmjs" href="https://npmjs.org/package/overrider">overrider</a>');</code></li>
<li><code>var Point = require('<a class="code" target="npmjs" href="https://npmjs.org/package/rectangular">rectangular</a>').Point;</code></li>
<li><code>var Rectangle = require('<a class="code" target="npmjs" href="https://npmjs.org/package/rectangular">rectangular</a>').Rectangle;</code></li>
<li><code>var SparseBooleanArray = require('<a class="code" target="npmjs" href="https://npmjs.org/package/sparse-boolean-array">sparse-boolean-array</a>');</code></li>
<li><code>var Synonomous = require('<a class="code" target="npmjs" href="https://npmjs.org/package/synonomous">synonomous</a>');</code></li>
</ul>
<p>
All of the above are actually read-only members of the `fin.Hypergrid.modules` namespace.
The above `require` syntax is preferred, however, because it makes a possible future transition to bundling your app just a matter of removing the `var require` definition.
</p>
<h3 id="external-modules">Overridable dependencies</h3>
<p>
In addition, the following writable properties are provided for overriding:
</p>
<ul>
<li><code>fin.Hypergrid.modules.Scrollbar = myScrollBars; // initially exposes require('<a class="code" target="npmjs" href="https://npmjs.org/package/finbars">finbars</a>')</code></li>
<li><code>fin.Hypergrid.modules.templater = myTemplater; // initially exposes require('<a class="code" target="npmjs" href="https://npmjs.org/package/mustache">mustache</a>')</code></li>
</ul>
<p>
Hypergrid always references these two modules through the above properties.
</p>
<h2>Referencing modules in code</h2>
<p>
How your modules reference other modules
— and how other modules reference your modules —
depends on whether or not the modules in question
are wrapped up as Hypergrid Client Modules.
(An HCM wrapper is a closure that defines local <code>require</code>, <code>module</code>, and <code>exports</code> variables).
</p>
<p>See the <a target="wiki" href="https://github.com/fin-hypergrid/core/wiki/Client-Modules">Client Modules</a> wiki for more information.</p>
<h3 id="referencing-hypergrid">Hypergrid core</h3>
<p>
The Hypergrid core object is both a constructor and a namespace and always required.
It is referenced as follows:
</p>
<div class="code-caption">From raw JavaScript:</div>
<pre>var Hypergrid = window.fin.Hypergrid;</pre>
<div class="code-caption">As CommonJS module (requires bundler or an HCM wrapper):</div>
<pre>var Hypergrid = require('fin-hypergrid');</pre>
<h3 id="referencing-client-modules">Hypergrid Client Modules</h3>
<p>
Most modules whose source repositories are hosted under
<a target="repo" href="https://github.com/fin-hypergrid">https://github.com/fin-hypergrid/</a>, in addition to being published as npm modules,
are also "built" into Hypergrid Client Modules and referenced as follows:
<div class="code-caption">From raw JavaScript:</div>
<pre>var myModule = fin.Hypergrid.require('my-module');</pre>
<div class="code-caption">From within another such closure:</div>
<pre>var myModule = require('my-module');</pre>
<h3>Other modules</h3>
<p>
All other modules are referenced using a module-dependent global variable.
Unwrapped modules are free to insert themselves into <code>fin.Hypergrid.modules</code>, which
would let them be referenced as a Client Module; however they would not themselves be able
to reference Hypergrid or Hypergrid Client Modules using <code>require()</code>.
</p>
<hr>
<h1 id="index">CDN index</h1>
<h2 class="modules">Hypergrid core</h2>
<h3><a class="code" target="repo" href="https://github.com/fin-hypergrid/core">fin-hypergrid/core</a></h3>
<p>
The Hypergrid core
<a href="https://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers#modulebundler"
title="A single JavaScript file (loaded with a single <script> tag), that contains an entire hierarchy of JavaScript modules "bundled" together into a single "build" of the application. Click the link for more information.">bundled build</a>
is always required. A version number is required. Include only one of the following scripts in your application:
</p>
<i>Latest Hypergrid 3.3 version</i> (recommended!):
<table><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/core/3.3.2/build/fin-hypergrid.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/core/3.3.2/build/fin-hypergrid.min.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td colspan="2" style="text-align:left; font-size:smaller; border-left:none">As of v3.2.1, also available on the unpkg CDN (via a <code>./umd</code> folder in the npm module):</td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://unpkg.com/fin-hypergrid@^3.3/umd/fin-hypergrid.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://unpkg.com/fin-hypergrid@^3.3/umd/fin-hypergrid.min.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td colspan="2" style="text-align:left; font-size:smaller; border-left:none">The advantage of unpkg is it optionally accepts and applies any valid <a href="https://semver.org">SEMVER</a> string after an @ sign.<br>
The above SEMVER spec <code>^3.2</code> requests the latest <code>3.2</code> version, currently <code>3.3.2</code>.</td>
</tr></table>
<i>Latest Hypergrid 2.1 version:</i>
<table><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/core/2.1.15/build/fin-hypergrid.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/core/2.1.15/build/fin-hypergrid.min.js'></script>"></td>
<td><img src="copy.png"></td>
</tr></table>
<i>Latest Hypergrid 2.0 version:</i>
<table><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/core/2.0.2/build/fin-hypergrid.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/core/2.0.2/build/fin-hypergrid.min.js'></script>"></td>
<td><img src="copy.png"></td>
</tr></table>
<i>Latest Hypergrid 1.3 version:</i>
<table><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/core/1.3.0/build/fin-hypergrid.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/core/1.3.0/build/fin-hypergrid.min.js'></script>"></td>
<td><img src="copy.png"></td>
</tr></table>
<blockquote>
The unminified versions are a hefty ~2.2 <small>MB</small> (largely due to inclusion of the source map for debugging purposes).
Always use a minified version (~0.25 <small>MB</small>) on production.
</blockquote>
<h3>API Documentation</h3>
<p>To see the API documentation for the lastest version, just link to the <code>core/doc</code> folder (a sym-link to <code>core/3.0.0/doc</code>):</p>
<div class="indent"><a target="api-doc" class="code" href='core/doc'>https://fin-hypergrid.github.io/core/doc</a></div>
<p>To see API documentation for older versions, <em>insert</em> a version number + <code>/</code> before <code>doc</code>:</p>
<div class="indent"><a target="api-doc" class="code" href='core/3.3.2/doc'>https://fin-hypergrid.github.io/core/3.3.2/doc</a></div>
<div class="indent"><a target="api-doc" class="code" href='core/2.1.15/doc'>https://fin-hypergrid.github.io/core/2.1.15/doc</a></div>
<div class="indent"><a target="api-doc" class="code" href='core/2.0.2/doc'>https://fin-hypergrid.github.io/core/2.0.2/doc</a></div>
<div class="indent"><a target="api-doc" class="code" href='core/1.3.0/doc'>https://fin-hypergrid.github.io/core/1.3.0/doc</a></div>
<h3>Demo</h3>
<p>To access the latest version's default demo, just link to the <code>core/demo</code> folder (a sym-link to <code>core/3.0.0</code>):</p>
<div class="indent"><a tareget="demo" class="code" href='https://fin-hypergrid.github.io/core/demo'>https://fin-hypergrid.github.io/core/demo</a></div>
<p>To access older demos, <em>substitute</em> a version number for <code>demo</code>:</p>
<div class="indent"><a tareget="demo" class="code" href='https://fin-hypergrid.github.io/core/3.3.2'>https://fin-hypergrid.github.io/core/3.3.2</a></div>
<div class="indent"><a tareget="demo" class="code" href='https://fin-hypergrid.github.io/core/2.1.15'>https://fin-hypergrid.github.io/core/2.1.15</a></div>
<div class="indent"><a tareget="demo" class="code" href='https://fin-hypergrid.github.io/core/2.0.2'>https://fin-hypergrid.github.io/core/2.0.2</a></div>
<div class="indent"><a tareget="demo" class="code" href='https://fin-hypergrid.github.io/core/1.3.0'>https://fin-hypergrid.github.io/core/1.3.0</a></div>
<h4 id="demos">Other demos</h4>
In addition to the default demo, the CDN also hosts additional demos that can be used as sample code <em>(caution: not all of these have been retested with the latest build)</em>:
<ul>
<li class="indent"><a target="demo" class="code" href='core/demo/add-a-row.html'>https://fin-hypergrid.github.io/core/demo/add-a-row.html</a></li>
<li class="indent"><a target="demo" class="code" href='core/demo/basic.html'>https://fin-hypergrid.github.io/core/demo/basic.html</a><br>
<em>Like example.html gets reads data via <a target="wiki" href="https://developer.mozilla.org/docs/Web/Guide/AJAX">AJAX</a> request</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/cell-borders'>https://fin-hypergrid.github.io/core/demo/cell-borders</a>
<em>A tutorial on how to draw left, right, top, and/or bottom borders in cells using overlay cell renderers.</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/computed-column.html'>https://fin-hypergrid.github.io/core/demo/computed-column.html</a></li>
<li class="indent"><a target="demo" class="code" href='core/demo/click-rect.html'>https://fin-hypergrid.github.io/core/demo/click-rect.html</a>
<em>The clickRect feature makes only a subrect specified by cell renderer responsive to mouse clicks.</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/example.html</a>'>https://fin-hypergrid.github.io/core/demo/example.html</a><br>
<em>Simple example</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/filter-row.html'>https://fin-hypergrid.github.io/core/demo/filter-row.html</a><br>
<em>Shows how to get filter cells working</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/formatter-workbench'>https://fin-hypergrid.github.io/core/demo/formatter-workbench</a><br>
<em>Sandbox for playing with cell editors and formatters, includes tutorial</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/hypermods.html'>https://fin-hypergrid.github.io/core/demo/hypermods.html</a><br>
<em>Testbench with discrete module loading (rather than bundling)</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/multiple-grids.html'>https://fin-hypergrid.github.io/core/demo/multiple-grids.html</a><br>
<em>Multiple grid instances on the same page</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/over-render.html'>https://fin-hypergrid.github.io/core/demo/over-render.html</a><br>
<em>Shows how to superimpose additional rendering on cells</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/row-props.html'>https://fin-hypergrid.github.io/core/demo/row-props.html</a><br>
<em>Performance testing w/dashboard for various rendering options</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/setdata-column-autosize.html'>https://fin-hypergrid.github.io/core/demo/setdata-column-autosize.html</a><br>
<em>Simple testbed for column autosizing feature</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/sorting-example.html'>https://fin-hypergrid.github.io/core/demo/sorting-example.html</a><br>
<em>Shows how to sort by multiple columns (broken)</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/tree-column.html'>https://fin-hypergrid.github.io/core/demo/tree-column.html</a><br>
<em>One way to implement row grouping; w/drill-down in tree column</em></li>
<li class="indent"><a target="demo" class="code" href='core/demo/virtual'>https://fin-hypergrid.github.io/core/demo/virtual</a><br>
<em>Testbench for lazy loading of data from a remote using <code>dataModel.fetchData</code>; w/simulated propagation delays & error retries</em></li>
</ul>
<p>Again, to access older versions of the above demos, simply substitute a version number for <code>demo</code>.</p>
<h2 class="modules">Hypergrid plug-ins</h2>
<p><strong>Plug-ins are published as npm modules</strong> (CommonJS modules) to the npm registry (npmjs.org). For example, to install the latest version of the <a class="code" href="https://npmjs.org/package/fin-hypergrid-grouped-header">fin-hypergrid-grouped-header</a> plug-in: <code>npm install --save fin-hypergrid-grouped-header</code>. The plug-in will now be available to your file bundler when referenced in code with `require('fin-hypergrid-grouped-header')`.</p>
<p><strong>Plug-ins are usually published as <a href="#referencing-client-modules">Hypergrid client modules</a></strong> as well, for direct inclusion with <code><script></code> tags. For example, including one of the following <code><script></code> tags in html file will make the file available to your code with `fin.Hypergrid.require('fin-hypergrid-grouped-header'):</p>
<table><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/grouped-header/1.2.0/build/grouped-header.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/grouped-header/1.2.0/build/grouped-header.min.js'></script>"></td>
<td><img src="copy.png"></td>
</tr></table>
<p>
Note that like the Hypergrid build files themselves, these plug-in CDNs do not include sym-links to the latest version; a version number is always required.
</p>
<!--
<h2 class="modules">Other Hypergrid modules, mix-ins, <i>etc.</i></h2>
<h2><a class="code" href="https://github.com/fin-hypergrid/primary-key">fin-hypergrid-primary-key</a></h3>
<table><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/primary-key/1.0.0/build/primary-key.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/primary-key/1.0.0/build/primary-key.min.js'></script>"></td>
<td><img src="copy.png"></td>
</tr></table>
<h2 class="modules">Data Source modules</h2>
<h2><a class="code" href="https://github.com/fin-hypergrid/datasaur-base">datasaur-base</a></h3>
<table><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/datasaur-base/
/build/datasaur-base.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/datasaur-base/3.0.0/build/datasaur-base.min.js'></script>"></td>
<td><img src="copy.png"></td>
</tr></table>
<h2><a class="code" href="https://github.com/fin-hypergrid/datasaur-local">datasaur-local</a></h3>
<table><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/datasaur-local/3.0.0/build/datasaur-local.js'></script>"></td>
<td><img src="copy.png"></td>
</tr><tr>
<td><input type="text" readonly value="<script src='https://fin-hypergrid.github.io/datasaur-local/3.0.0/build/datasaur-local.min.js'></script>"></td>
<td><img src="copy.png"></td>
</tr></table>
-->
</div>
<div class="feedback">Copied!</div>
</body>
</html>