json-renderers 1.13.7 → 1.16.1

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.
@@ -0,0 +1,607 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>HTML Table Process &amp; Architecture | json-renderers</title>
8
+ <meta name="description"
9
+ content="Learn the internal process of rendering HTML tables from JSON data using json-renderers, json-renderers-build, and @keshavsoft/json-to-tag." />
10
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12
+ <link
13
+ href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&display=swap"
14
+ rel="stylesheet" />
15
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
16
+ <script src="https://cdn.tailwindcss.com"></script>
17
+ <script>
18
+ tailwind.config = {
19
+ theme: {
20
+ extend: {
21
+ colors: {
22
+ brand: {
23
+ 50: '#f0fdf4',
24
+ 100: '#dcfce7',
25
+ 500: '#10b981',
26
+ 600: '#059669',
27
+ 700: '#047857',
28
+ 800: '#065f46',
29
+ 900: '#064e3b'
30
+ }
31
+ },
32
+ fontFamily: {
33
+ sans: ['Inter', 'sans-serif'],
34
+ mono: ['Fira Code', 'monospace']
35
+ }
36
+ }
37
+ }
38
+ };
39
+ </script>
40
+ <style>
41
+ body {
42
+ font-family: 'Inter', sans-serif;
43
+ background-color: #ffffff;
44
+ color: #1e293b;
45
+ }
46
+
47
+ pre,
48
+ code {
49
+ font-family: 'Fira Code', monospace;
50
+ }
51
+
52
+ .custom-scrollbar::-webkit-scrollbar {
53
+ width: 6px;
54
+ height: 6px;
55
+ }
56
+
57
+ .custom-scrollbar::-webkit-scrollbar-track {
58
+ background: #f1f5f9;
59
+ }
60
+
61
+ .custom-scrollbar::-webkit-scrollbar-thumb {
62
+ background: #cbd5e1;
63
+ border-radius: 4px;
64
+ }
65
+
66
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
67
+ background: #94a3b8;
68
+ }
69
+
70
+ .step-badge {
71
+ width: 2.25rem;
72
+ height: 2.25rem;
73
+ border-radius: 9999px;
74
+ display: inline-flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ font-weight: 700;
78
+ font-size: 0.875rem;
79
+ }
80
+
81
+ /* Style bootstrap table inside our light container */
82
+ #live-process-output table {
83
+ width: 100%;
84
+ margin-bottom: 0;
85
+ color: #1e293b;
86
+ border-collapse: separate;
87
+ border-spacing: 0;
88
+ border-radius: 0.75rem;
89
+ overflow: hidden;
90
+ border: 1px solid #e2e8f0;
91
+ background-color: #ffffff;
92
+ }
93
+
94
+ #live-process-output th {
95
+ background: #f8fafc;
96
+ color: #0f172a;
97
+ font-weight: 600;
98
+ padding: 0.75rem 1rem;
99
+ border-bottom: 2px solid #e2e8f0;
100
+ text-transform: capitalize;
101
+ font-size: 0.875rem;
102
+ }
103
+
104
+ #live-process-output td {
105
+ padding: 0.65rem 1rem;
106
+ border-bottom: 1px solid #f1f5f9;
107
+ background: #ffffff;
108
+ font-size: 0.875rem;
109
+ color: #334155;
110
+ }
111
+
112
+ #live-process-output tr:hover td {
113
+ background: #f8fafc;
114
+ }
115
+ </style>
116
+ </head>
117
+
118
+ <body
119
+ class="bg-white text-slate-800 min-h-screen antialiased flex flex-col font-sans selection:bg-emerald-500 selection:text-white">
120
+
121
+ <!-- Top Sticky Navigation Bar -->
122
+ <header class="border-b border-slate-200 bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm">
123
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between gap-4">
124
+ <div class="flex items-center gap-3">
125
+ <a href="../index.html"
126
+ class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 via-teal-600 to-indigo-600 flex items-center justify-center font-bold text-white shadow-md text-lg hover:scale-105 transition">
127
+ 📊
128
+ </a>
129
+ <div>
130
+ <div class="flex items-center gap-2">
131
+ <a href="../index.html"
132
+ class="text-base font-bold text-slate-900 tracking-tight hover:text-emerald-600 transition">json-renderers</a>
133
+ <span
134
+ class="px-2 py-0.5 text-xs bg-emerald-100 text-emerald-800 rounded-full border border-emerald-200 font-mono font-medium">Table
135
+ Documentation</span>
136
+ </div>
137
+ <p class="text-xs text-slate-500">HTML Table Generation Process &amp; Architecture</p>
138
+ </div>
139
+ </div>
140
+
141
+ <nav class="flex items-center gap-1.5 sm:gap-2 text-sm">
142
+ <a href="../index.html"
143
+ class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">Home</a>
144
+ <a href="index.html"
145
+ class="px-3 py-1.5 rounded-lg bg-emerald-600 text-white font-semibold shadow-sm transition text-xs sm:text-sm">HTML
146
+ Process</a>
147
+ <a href="cdn.html"
148
+ class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">Using
149
+ CDN</a>
150
+ <a href="windowKs.html"
151
+ class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">window.ks</a>
152
+ <a href="../aboutSelect.html"
153
+ class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition hidden md:inline text-xs sm:text-sm">About
154
+ Select</a>
155
+ <a href="https://github.com/keshavsoft/json-renderers" target="_blank" rel="noopener noreferrer"
156
+ class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200 font-medium transition hidden lg:inline-flex items-center gap-1.5 text-xs sm:text-sm">
157
+ <svg class="w-4 h-4 fill-current text-slate-700" viewBox="0 0 24 24">
158
+ <path
159
+ d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
160
+ </svg>
161
+ <span>GitHub</span>
162
+ </a>
163
+ </nav>
164
+ </div>
165
+ </header>
166
+
167
+ <main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-10">
168
+
169
+ <!-- Hero Section -->
170
+ <section
171
+ class="bg-gradient-to-br from-slate-50 via-emerald-50/40 to-teal-50/30 rounded-3xl p-6 sm:p-10 border border-slate-200 shadow-sm relative overflow-hidden">
172
+ <div class="relative z-10 space-y-5">
173
+ <div
174
+ class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-100 border border-emerald-200 text-xs text-emerald-800 font-mono font-medium">
175
+ <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
176
+ HTML Rendering Pipeline &bull; Mental Model
177
+ </div>
178
+
179
+ <h1 class="text-3xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
180
+ The Process of Rendering HTML Tables <br class="hidden sm:inline" />
181
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 via-teal-600 to-indigo-600">From
182
+ Raw JSON to Browser DOM</span>
183
+ </h1>
184
+
185
+ <p class="max-w-4xl text-slate-600 text-base sm:text-lg leading-relaxed">
186
+ Understanding the inner mechanics of how <code
187
+ class="text-emerald-700 bg-emerald-50 px-1.5 py-0.5 rounded font-mono font-semibold">json-renderers</code>
188
+ orchestrates data parsing, JSON blueprint generation via <code
189
+ class="text-teal-700 bg-teal-50 px-1.5 py-0.5 rounded font-mono font-semibold">json-renderers-build</code>,
190
+ and tag construction via <code
191
+ class="text-indigo-700 bg-indigo-50 px-1.5 py-0.5 rounded font-mono font-semibold">@keshavsoft/json-to-tag</code>.
192
+ </p>
193
+
194
+
195
+ </div>
196
+ </section>
197
+
198
+ <!-- SHORT NOTE SECTION -->
199
+ <section id="short-note"
200
+ class="bg-gradient-to-r from-emerald-50 via-teal-50 to-indigo-50 rounded-2xl p-6 sm:p-8 border-2 border-emerald-200 shadow-sm space-y-4">
201
+ <div class="flex items-center gap-3">
202
+ <span class="text-2xl">📝</span>
203
+ <div>
204
+ <span class="text-xs uppercase font-mono tracking-wider text-emerald-800 font-bold">Executive Summary</span>
205
+ <h2 class="text-xl sm:text-2xl font-bold text-slate-900 tracking-tight">Short Note: How the HTML Process Works
206
+ </h2>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="text-slate-700 text-sm sm:text-base leading-relaxed space-y-3">
211
+ <p>
212
+ In traditional frontend development, rendering an HTML table from dynamic data requires manual <code
213
+ class="text-slate-800 bg-white px-1.5 py-0.5 rounded border border-slate-200 font-mono text-xs">&lt;tr&gt;</code>
214
+ and <code
215
+ class="text-slate-800 bg-white px-1.5 py-0.5 rounded border border-slate-200 font-mono text-xs">&lt;td&gt;</code>
216
+ loops, repetitive string concatenation, or hazardous <code
217
+ class="text-rose-700 bg-white px-1.5 py-0.5 rounded border border-slate-200 font-mono text-xs">innerHTML</code>
218
+ assignments.
219
+ </p>
220
+ <p>
221
+ <strong>json-renderers</strong> abstracts this entirely into a clean, 4-stage pipeline:
222
+ </p>
223
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-3 pt-2">
224
+ <div class="bg-white p-3.5 rounded-xl border border-emerald-200 shadow-xs">
225
+ <div class="text-xs font-mono font-bold text-emerald-700 mb-1">1. Business JSON</div>
226
+ <p class="text-xs text-slate-600">You pass an array of raw JavaScript objects (from API or static file) and
227
+ chosen columns.</p>
228
+ </div>
229
+ <div class="bg-white p-3.5 rounded-xl border border-teal-200 shadow-xs">
230
+ <div class="text-xs font-mono font-bold text-teal-700 mb-1">2. Runtime Call</div>
231
+ <p class="text-xs text-slate-600"><code class="font-mono text-[11px] text-teal-800">render({...})</code>
232
+ acts as orchestrator and initiates the transformation.</p>
233
+ </div>
234
+ <div class="bg-white p-3.5 rounded-xl border border-indigo-200 shadow-xs">
235
+ <div class="text-xs font-mono font-bold text-indigo-700 mb-1">3. Spec to DOM</div>
236
+ <p class="text-xs text-slate-600"><code class="font-mono text-[11px] text-indigo-800">json-to-tag</code>
237
+ transforms the JSON schema into native browser table elements.</p>
238
+ </div>
239
+ <div class="bg-white p-3.5 rounded-xl border border-cyan-200 shadow-xs">
240
+ <div class="text-xs font-mono font-bold text-cyan-700 mb-1">4. DOM Mount</div>
241
+ <p class="text-xs text-slate-600">The browser mounts the live table directly into your target container with
242
+ zero reload.</p>
243
+ </div>
244
+ </div>
245
+ <p class="text-xs sm:text-sm text-slate-600 bg-white p-3.5 rounded-xl border border-slate-200 mt-2">
246
+ 💡 <strong>Key Takeaway:</strong> You never write loop code. The library converts your data specification into
247
+ an abstract syntax tree and converts that tree into true HTML nodes using standard DOM APIs.
248
+ </p>
249
+ </div>
250
+ </section>
251
+
252
+ <!-- 4 PROCESS STAGES DEEP DIVE -->
253
+ <section id="pipeline-steps" class="space-y-6">
254
+ <div class="border-b border-slate-200 pb-4">
255
+ <span class="text-xs uppercase font-mono tracking-wider text-emerald-700 font-bold">Deep Dive</span>
256
+ <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">The 4 Process Stages of HTML Table
257
+ Generation</h2>
258
+ <p class="text-slate-600 text-sm mt-1">What happens behind the scenes from the moment you call render to when
259
+ pixels draw on screen.</p>
260
+ </div>
261
+
262
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
263
+
264
+ <!-- Stage 1 -->
265
+ <div
266
+ class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between hover:border-emerald-400 hover:shadow-md transition">
267
+ <div class="space-y-3">
268
+ <div class="flex items-center justify-between">
269
+ <span class="step-badge bg-emerald-100 text-emerald-800 border border-emerald-300">1</span>
270
+ <span class="text-xs font-mono text-slate-500 font-medium">Input Phase</span>
271
+ </div>
272
+ <h3 class="font-bold text-slate-900 text-base">Raw Business Data</h3>
273
+ <p class="text-xs text-slate-600 leading-relaxed">
274
+ Your application supplies data as plain JSON records:
275
+ </p>
276
+ <pre class="bg-slate-950 p-3 rounded-xl text-[11px] text-emerald-300 font-mono overflow-x-auto"><code>[
277
+ { "itemName": "Steel Wire", "baseUnit": "kgs" },
278
+ { "itemName": "Alloy Rod", "baseUnit": "pcs" }
279
+ ]</code></pre>
280
+ </div>
281
+ <div class="text-[11px] font-mono text-emerald-700 pt-3 border-t border-slate-100 mt-3 font-semibold">
282
+ Input Data &rarr;
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Stage 2 -->
287
+ <div
288
+ class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between hover:border-teal-400 hover:shadow-md transition">
289
+ <div class="space-y-3">
290
+ <div class="flex items-center justify-between">
291
+ <span class="step-badge bg-teal-100 text-teal-800 border border-teal-300">2</span>
292
+ <span class="text-xs font-mono text-slate-500 font-medium">Invocation</span>
293
+ </div>
294
+ <h3 class="font-bold text-slate-900 text-base">Runtime Orchestration</h3>
295
+ <p class="text-xs text-slate-600 leading-relaxed">
296
+ You invoke the renderer with column definitions and container id:
297
+ </p>
298
+ <pre class="bg-slate-950 p-3 rounded-xl text-[11px] text-teal-300 font-mono overflow-x-auto"><code>render({
299
+ type: "table",
300
+ data: data,
301
+ columns: ["itemName", "baseUnit"],
302
+ targetHtmlId: "dom-container"
303
+ });</code></pre>
304
+ </div>
305
+ <div class="text-[11px] font-mono text-teal-700 pt-3 border-t border-slate-100 mt-3 font-semibold">
306
+ Orchestrator &rarr;
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Stage 3 -->
311
+ <div
312
+ class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between hover:border-indigo-400 hover:shadow-md transition">
313
+ <div class="space-y-3">
314
+ <div class="flex items-center justify-between">
315
+ <span class="step-badge bg-indigo-100 text-indigo-800 border border-indigo-300">3</span>
316
+ <span class="text-xs font-mono text-slate-500 font-medium">Schema to Tag</span>
317
+ </div>
318
+ <h3 class="font-bold text-slate-900 text-base">Blueprint to DOM Nodes</h3>
319
+ <p class="text-xs text-slate-600 leading-relaxed">
320
+ <code class="text-indigo-700 font-mono text-[11px]">json-renderers-build</code> creates an AST spec, and
321
+ <code class="text-indigo-700 font-mono text-[11px]">json-to-tag</code> instantiates real browser nodes:
322
+ </p>
323
+ <div class="text-[11px] font-mono bg-slate-950 p-3 rounded-xl text-indigo-200 leading-relaxed">
324
+ &lt;table class="table"&gt;<br />
325
+ &nbsp;&nbsp;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;...&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;<br />
326
+ &nbsp;&nbsp;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;...&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;<br />
327
+ &lt;/table&gt;
328
+ </div>
329
+ </div>
330
+ <div class="text-[11px] font-mono text-indigo-700 pt-3 border-t border-slate-100 mt-3 font-semibold">
331
+ Native DOM Creation &rarr;
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Stage 4 -->
336
+ <div
337
+ class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between hover:border-cyan-400 hover:shadow-md transition">
338
+ <div class="space-y-3">
339
+ <div class="flex items-center justify-between">
340
+ <span class="step-badge bg-cyan-100 text-cyan-800 border border-cyan-300">4</span>
341
+ <span class="text-xs font-mono text-slate-500 font-medium">Mounting</span>
342
+ </div>
343
+ <h3 class="font-bold text-slate-900 text-base">Container Mounted</h3>
344
+ <p class="text-xs text-slate-600 leading-relaxed">
345
+ The engine safely appends the generated table into the host DOM element:
346
+ </p>
347
+ <pre class="bg-slate-950 p-3 rounded-xl text-[11px] text-cyan-300 font-mono overflow-x-auto"><code>&lt;div id="dom-container"&gt;
348
+ &lt;!-- Cleanly mounted table --&gt;
349
+ &lt;table ...&gt;...&lt;/table&gt;
350
+ &lt;/div&gt;</code></pre>
351
+ </div>
352
+ <div class="text-[11px] font-mono text-cyan-700 pt-3 border-t border-slate-100 mt-3 font-semibold">
353
+ ✅ Live in Browser
354
+ </div>
355
+ </div>
356
+
357
+ </div>
358
+ </section>
359
+
360
+ <!-- LIVE PROCESS DEMONSTRATION -->
361
+ <section id="live-pipeline" class="bg-slate-50 rounded-2xl p-6 sm:p-8 border border-slate-200 space-y-6">
362
+ <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-200 pb-4">
363
+ <div>
364
+ <span class="text-xs uppercase font-mono tracking-wider text-emerald-700 font-bold">Interactive
365
+ Verification</span>
366
+ <h2 class="text-xl sm:text-2xl font-bold text-slate-900 tracking-tight mt-1">Live Process Pipeline in Action
367
+ </h2>
368
+ <p class="text-slate-600 text-xs sm:text-sm mt-0.5">Watch the HTML process transform sample data into live DOM
369
+ table elements right now.</p>
370
+ </div>
371
+ <button id="btn-trigger-pipeline"
372
+ class="px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs sm:text-sm shadow-sm transition flex items-center gap-2 w-fit">
373
+ <span>⚡</span> Re-run Process Pipeline
374
+ </button>
375
+ </div>
376
+
377
+ <!-- Pipeline Steps Visualizer -->
378
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
379
+
380
+ <!-- Controls & Stages Summary -->
381
+ <div class="lg:col-span-5 space-y-4">
382
+ <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-3">
383
+ <h3 class="text-xs font-bold text-slate-700 uppercase font-mono tracking-wider">Process Status Tracker</h3>
384
+
385
+ <div class="space-y-2 text-xs font-mono">
386
+ <div class="flex items-center justify-between p-2 rounded bg-slate-50 border border-slate-100">
387
+ <span class="text-slate-600">Stage 1: Input JSON</span>
388
+ <span class="text-emerald-700 font-bold">✓ 3 Records Loaded</span>
389
+ </div>
390
+ <div class="flex items-center justify-between p-2 rounded bg-slate-50 border border-slate-100">
391
+ <span class="text-slate-600">Stage 2: Orchestrator Call</span>
392
+ <span class="text-teal-700 font-bold">✓ Config Validated</span>
393
+ </div>
394
+ <div class="flex items-center justify-between p-2 rounded bg-slate-50 border border-slate-100">
395
+ <span class="text-slate-600">Stage 3: DOM Construction</span>
396
+ <span class="text-indigo-700 font-bold">✓ json-to-tag Active</span>
397
+ </div>
398
+ <div class="flex items-center justify-between p-2 rounded bg-slate-50 border border-slate-100">
399
+ <span class="text-slate-600">Stage 4: Mount Status</span>
400
+ <span id="pipeline-status" class="text-emerald-700 font-bold">✓ Table Mounted</span>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- Console Log Output -->
405
+ <div class="pt-2">
406
+ <div class="text-[11px] font-mono text-slate-500 mb-1 flex items-center justify-between">
407
+ <span>Pipeline Event Log:</span>
408
+ <span class="text-[10px] text-emerald-600 font-bold">Live</span>
409
+ </div>
410
+ <pre id="process-log"
411
+ class="bg-slate-950 p-3 rounded-lg text-xs text-emerald-400 font-mono h-28 overflow-y-auto border border-slate-800"><code>[Process] Ready to execute pipeline...</code></pre>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- Render Target Output -->
417
+ <div class="lg:col-span-7 bg-white p-5 sm:p-6 rounded-xl border border-slate-200 shadow-sm space-y-3">
418
+ <div class="flex items-center justify-between pb-3 border-b border-slate-100">
419
+ <div class="flex items-center gap-2">
420
+ <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
421
+ <h3 class="text-xs font-bold text-slate-800 uppercase font-mono tracking-wider">
422
+ Rendered HTML Output: <code class="text-emerald-700">#live-process-output</code>
423
+ </h3>
424
+ </div>
425
+ <span class="text-[11px] font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded">Live HTML Table</span>
426
+ </div>
427
+
428
+ <div id="live-process-output"
429
+ class="overflow-x-auto min-h-[180px] flex items-center justify-center text-slate-400 text-sm">
430
+ Rendering table via json-renderers...
431
+ </div>
432
+ </div>
433
+
434
+ </div>
435
+ </section>
436
+
437
+ <!-- CHOOSE YOUR INTEGRATION (SEPARATE HTML FILES) -->
438
+ <section id="integration-files" class="space-y-6 pt-4">
439
+ <div class="border-b border-slate-200 pb-4">
440
+ <span class="text-xs uppercase font-mono tracking-wider text-indigo-700 font-bold">Integration Methods</span>
441
+ <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">Ready to Use in Your Project?</h2>
442
+ <p class="text-slate-600 text-sm mt-1">We have prepared dedicated, standalone guides for each implementation
443
+ approach:</p>
444
+ </div>
445
+
446
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
447
+
448
+ <!-- Card 1: Using CDN -->
449
+ <div
450
+ class="bg-white p-6 sm:p-8 rounded-2xl border-2 border-emerald-200 shadow-sm hover:border-emerald-400 hover:shadow-md transition flex flex-col justify-between">
451
+ <div class="space-y-4">
452
+ <div
453
+ class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-100 text-emerald-800 text-xs font-mono font-bold">
454
+ <span>⚡</span> Method 1: Standalone Guide
455
+ </div>
456
+ <h3 class="text-2xl font-bold text-slate-900 tracking-tight">Using CDN (Direct Import)</h3>
457
+ <p class="text-slate-600 text-sm leading-relaxed">
458
+ Import the <code class="text-emerald-700 font-mono font-semibold">render</code> function directly from the
459
+ jsDelivr CDN into an ES Module. Clean scope, zero global variables, and modern modular structure.
460
+ </p>
461
+ <div class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-xs font-mono text-slate-700">
462
+ <code>import render from "https://cdn.jsdelivr.net/...";</code>
463
+ </div>
464
+ <ul class="text-xs text-slate-600 space-y-1.5 list-disc list-inside">
465
+ <li>Complete <code class="font-mono">index.html</code> and <code class="font-mono">index.js</code>
466
+ breakdown</li>
467
+ <li>Parameter options guide</li>
468
+ <li>Dedicated live interactive playground</li>
469
+ <li>Direct link to <code class="font-mono text-emerald-700">samples/table/byCdn/</code></li>
470
+ </ul>
471
+ </div>
472
+
473
+ <div class="pt-6">
474
+ <a href="cdn.html"
475
+ class="w-full py-3 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm shadow-sm transition flex items-center justify-center gap-2">
476
+ <span>Open Using CDN Guide</span> &rarr;
477
+ </a>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Card 2: Using window.ks -->
482
+ <div
483
+ class="bg-white p-6 sm:p-8 rounded-2xl border-2 border-indigo-200 shadow-sm hover:border-indigo-400 hover:shadow-md transition flex flex-col justify-between">
484
+ <div class="space-y-4">
485
+ <div
486
+ class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 text-xs font-mono font-bold">
487
+ <span>🌐</span> Method 2: Standalone Guide
488
+ </div>
489
+ <h3 class="text-2xl font-bold text-slate-900 tracking-tight">Using window.ks (Global Namespace)</h3>
490
+ <p class="text-slate-600 text-sm leading-relaxed">
491
+ Load the bundle and call <code
492
+ class="text-indigo-700 font-mono font-semibold">window.ks.jsonRenderers.renderToDom</code> from anywhere
493
+ in your web app, multi-script layouts, or browser console.
494
+ </p>
495
+ <div class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-xs font-mono text-slate-700">
496
+ <code>window.ks.jsonRenderers.renderToDom({ ... });</code>
497
+ </div>
498
+ <ul class="text-xs text-slate-600 space-y-1.5 list-disc list-inside">
499
+ <li>Ideal for multi-script, non-module, or legacy projects</li>
500
+ <li>Global window access without repetitive imports</li>
501
+ <li>Dedicated live interactive playground</li>
502
+ <li>Direct link to <code class="font-mono text-indigo-700">samples/table/byKs/</code></li>
503
+ </ul>
504
+ </div>
505
+
506
+ <div class="pt-6">
507
+ <a href="windowKs.html"
508
+ class="w-full py-3 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm shadow-sm transition flex items-center justify-center gap-2">
509
+ <span>Open window.ks Guide</span> &rarr;
510
+ </a>
511
+ </div>
512
+ </div>
513
+
514
+ </div>
515
+ </section>
516
+
517
+
518
+ </main>
519
+
520
+ <!-- Clean Light Footer -->
521
+ <footer class="border-t border-slate-200 bg-slate-50 py-6 mt-12">
522
+ <div
523
+ class="max-w-7xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-600">
524
+ <div>
525
+ <span class="text-slate-900 font-semibold">json-renderers</span> &bull; HTML Table Process Guide
526
+ </div>
527
+ <div class="flex items-center gap-4">
528
+ <a href="cdn.html" class="text-emerald-700 hover:underline">Using CDN Guide</a>
529
+ <a href="windowKs.html" class="text-indigo-700 hover:underline">window.ks Guide</a>
530
+ <a href="../index.html" class="text-slate-700 hover:underline">Main Docs</a>
531
+ </div>
532
+ </div>
533
+ </footer>
534
+
535
+ <!-- Script for Live Pipeline Demonstration -->
536
+ <script type="module">
537
+ import renderDirect from "../dist/v14/min.js";
538
+
539
+ const sampleRows = [
540
+ { itemName: "0.09/30mm Steel Wire", baseUnit: "kgs", category: "Raw Materials" },
541
+ { itemName: "0.11-25 Copper Alloy", baseUnit: "kgs", category: "Metals" },
542
+ { itemName: "Industrial Gear G-14", baseUnit: "pcs", category: "Machinery" }
543
+ ];
544
+
545
+ const logEl = document.getElementById("process-log");
546
+ const statusEl = document.getElementById("pipeline-status");
547
+ const triggerBtn = document.getElementById("btn-trigger-pipeline");
548
+
549
+ function appendLog(msg) {
550
+ if (!logEl) return;
551
+ logEl.innerHTML += "\n" + msg;
552
+ logEl.scrollTop = logEl.scrollHeight;
553
+ }
554
+
555
+ function runPipeline() {
556
+ if (logEl) logEl.innerHTML = "<code>[Process] Starting table rendering pipeline...</code>";
557
+ if (statusEl) {
558
+ statusEl.textContent = "Processing...";
559
+ statusEl.className = "text-amber-600 font-bold";
560
+ }
561
+
562
+ setTimeout(() => {
563
+ appendLog("[Stage 1] 3 sample records provided as input data.");
564
+ }, 50);
565
+
566
+ setTimeout(() => {
567
+ appendLog("[Stage 2] Invoking render({ type: 'table', columns: ['itemName', 'baseUnit', 'category'] })...");
568
+ }, 120);
569
+
570
+ setTimeout(() => {
571
+ appendLog("[Stage 3] json-to-tag converting spec schema into native DOM elements...");
572
+ }, 200);
573
+
574
+ setTimeout(() => {
575
+ try {
576
+ renderDirect({
577
+ type: "table",
578
+ data: sampleRows,
579
+ targetHtmlId: "live-process-output",
580
+ columns: ["itemName", "baseUnit", "category"],
581
+ showLog: true
582
+ });
583
+ appendLog("[Stage 4] Successfully mounted table into #live-process-output!");
584
+ if (statusEl) {
585
+ statusEl.textContent = "✓ Table Mounted";
586
+ statusEl.className = "text-emerald-700 font-bold";
587
+ }
588
+ } catch (err) {
589
+ appendLog("[Error] Failed: " + err.message);
590
+ if (statusEl) {
591
+ statusEl.textContent = "Error";
592
+ statusEl.className = "text-rose-600 font-bold";
593
+ }
594
+ }
595
+ }, 280);
596
+ }
597
+
598
+ if (triggerBtn) {
599
+ triggerBtn.addEventListener("click", runPipeline);
600
+ }
601
+
602
+ // Auto-run once on page load
603
+ runPipeline();
604
+ </script>
605
+ </body>
606
+
607
+ </html>