json-renderers 1.14.1 → 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,634 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Using CDN | How to Render HTML Tables via CDN Import</title>
7
+ <meta name="description" content="Step-by-step beginner guide to building and mounting HTML tables using json-renderers direct CDN import via ES Modules." />
8
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
11
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
12
+ <script src="https://cdn.tailwindcss.com"></script>
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ brand: {
19
+ 50: '#f0fdf4',
20
+ 100: '#dcfce7',
21
+ 500: '#10b981',
22
+ 600: '#059669',
23
+ 700: '#047857',
24
+ 800: '#065f46',
25
+ 900: '#064e3b'
26
+ }
27
+ },
28
+ fontFamily: {
29
+ sans: ['Inter', 'sans-serif'],
30
+ mono: ['Fira Code', 'monospace']
31
+ }
32
+ }
33
+ }
34
+ };
35
+ </script>
36
+ <style>
37
+ body {
38
+ font-family: 'Inter', sans-serif;
39
+ background-color: #ffffff;
40
+ color: #1e293b;
41
+ }
42
+ pre, code {
43
+ font-family: 'Fira Code', monospace;
44
+ }
45
+ .custom-scrollbar::-webkit-scrollbar {
46
+ width: 6px;
47
+ height: 6px;
48
+ }
49
+ .custom-scrollbar::-webkit-scrollbar-track {
50
+ background: #f1f5f9;
51
+ }
52
+ .custom-scrollbar::-webkit-scrollbar-thumb {
53
+ background: #cbd5e1;
54
+ border-radius: 4px;
55
+ }
56
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
57
+ background: #94a3b8;
58
+ }
59
+ .step-badge {
60
+ width: 2.25rem;
61
+ height: 2.25rem;
62
+ border-radius: 9999px;
63
+ display: inline-flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ font-weight: 700;
67
+ font-size: 0.875rem;
68
+ }
69
+ /* Style bootstrap table inside our container */
70
+ #cdn-live-output table {
71
+ width: 100%;
72
+ margin-bottom: 0;
73
+ color: #1e293b;
74
+ border-collapse: separate;
75
+ border-spacing: 0;
76
+ border-radius: 0.75rem;
77
+ overflow: hidden;
78
+ border: 1px solid #e2e8f0;
79
+ background-color: #ffffff;
80
+ }
81
+ #cdn-live-output th {
82
+ background: #f8fafc;
83
+ color: #0f172a;
84
+ font-weight: 600;
85
+ padding: 0.75rem 1rem;
86
+ border-bottom: 2px solid #e2e8f0;
87
+ text-transform: capitalize;
88
+ font-size: 0.875rem;
89
+ }
90
+ #cdn-live-output td {
91
+ padding: 0.65rem 1rem;
92
+ border-bottom: 1px solid #f1f5f9;
93
+ background: #ffffff;
94
+ font-size: 0.875rem;
95
+ color: #334155;
96
+ }
97
+ #cdn-live-output tr:hover td {
98
+ background: #f8fafc;
99
+ }
100
+ </style>
101
+ </head>
102
+ <body class="bg-white text-slate-800 min-h-screen antialiased flex flex-col font-sans selection:bg-emerald-500 selection:text-white">
103
+
104
+ <!-- Top Sticky Navigation Bar -->
105
+ <header class="border-b border-slate-200 bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm">
106
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between gap-4">
107
+ <div class="flex items-center gap-3">
108
+ <a href="../index.html" 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">
109
+ 📊
110
+ </a>
111
+ <div>
112
+ <div class="flex items-center gap-2">
113
+ <a href="../index.html" class="text-base font-bold text-slate-900 tracking-tight hover:text-emerald-600 transition">json-renderers</a>
114
+ <span class="px-2 py-0.5 text-xs bg-emerald-100 text-emerald-800 rounded-full border border-emerald-200 font-mono font-medium">CDN Guide</span>
115
+ </div>
116
+ <p class="text-xs text-slate-500">Method 1: Direct ES Module CDN Import</p>
117
+ </div>
118
+ </div>
119
+
120
+ <nav class="flex items-center gap-1.5 sm:gap-2 text-sm">
121
+ <a href="../index.html" 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>
122
+ <a href="index.html" 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">HTML Process</a>
123
+ <a href="cdn.html" class="px-3 py-1.5 rounded-lg bg-emerald-600 text-white font-semibold shadow-sm transition text-xs sm:text-sm">Using CDN</a>
124
+ <a href="windowKs.html" 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>
125
+ <a href="../../samples/table/byCdn/index.html" target="_blank" class="px-3 py-1.5 rounded-lg bg-emerald-50 hover:bg-emerald-100 text-emerald-800 border border-emerald-200 font-semibold transition hidden sm:inline-flex items-center gap-1 text-xs sm:text-sm">
126
+ <span>▶️</span> Run Sample
127
+ </a>
128
+ </nav>
129
+ </div>
130
+ </header>
131
+
132
+ <main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-10">
133
+
134
+ <!-- Hero Section -->
135
+ <section class="bg-gradient-to-br from-slate-50 via-emerald-50/50 to-teal-50/30 rounded-3xl p-6 sm:p-10 border border-slate-200 shadow-sm relative overflow-hidden">
136
+ <div class="relative z-10 space-y-5">
137
+ <div 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">
138
+ <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
139
+ Method 1 &bull; Direct CDN Import
140
+ </div>
141
+
142
+ <h1 class="text-3xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
143
+ How to Render HTML Tables <br class="hidden sm:inline" />
144
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Using Direct CDN Import</span>
145
+ </h1>
146
+
147
+ <p class="max-w-4xl text-slate-600 text-base sm:text-lg leading-relaxed">
148
+ Learn how to import the <code class="text-emerald-700 bg-emerald-50 px-1.5 py-0.5 rounded font-mono font-semibold">render</code> function directly from jsDelivr into your browser ES Module without any build step, bundlers, or npm installations.
149
+ </p>
150
+
151
+ <!-- Action Links -->
152
+ <div class="flex flex-wrap gap-2.5 pt-2">
153
+ <a href="#how-it-works" class="px-3.5 py-2 rounded-xl bg-white hover:bg-slate-50 text-slate-800 text-xs sm:text-sm font-semibold transition border border-slate-300 shadow-sm flex items-center gap-1.5">
154
+ <span>💡</span> How It Works
155
+ </a>
156
+ <a href="#code-walkthrough" class="px-3.5 py-2 rounded-xl bg-white hover:bg-slate-50 text-slate-800 text-xs sm:text-sm font-semibold transition border border-slate-300 shadow-sm flex items-center gap-1.5">
157
+ <span>📄</span> Code Walkthrough
158
+ </a>
159
+ <a href="#live-demo" class="px-3.5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs sm:text-sm font-semibold transition flex items-center gap-1.5 shadow-sm">
160
+ <span>⚡</span> Interactive CDN Demo
161
+ </a>
162
+ <a href="../../samples/table/byCdn/index.html" target="_blank" class="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs sm:text-sm font-semibold transition flex items-center gap-1.5 shadow-sm">
163
+ <span>📂</span> Open samples/table/byCdn &rarr;
164
+ </a>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- HOW IT WORKS IN SIMPLE WORDS -->
170
+ <section id="how-it-works" class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-4">
171
+ <div class="flex items-center gap-2">
172
+ <span class="text-xl">💡</span>
173
+ <h2 class="text-xl sm:text-2xl font-bold text-slate-900 tracking-tight">How CDN Import Works in Simple Words</h2>
174
+ </div>
175
+
176
+ <p class="text-slate-600 text-sm sm:text-base leading-relaxed">
177
+ With CDN import, your JavaScript file imports the renderer directly from the web URL as an <strong>ES Module</strong>. The browser downloads the bundle, resolves dependencies, and gives you a standard JavaScript function named <code class="text-emerald-700 bg-emerald-50 px-1 py-0.5 rounded font-mono font-medium">render()</code>.
178
+ </p>
179
+
180
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
181
+ <div class="p-4 rounded-xl bg-slate-50 border border-slate-200">
182
+ <div class="text-xs font-mono font-bold text-emerald-700 mb-1">1. Zero Tooling</div>
183
+ <p class="text-xs text-slate-600">No Webpack, Vite, or npm install required. Open your HTML in any modern browser.</p>
184
+ </div>
185
+ <div class="p-4 rounded-xl bg-slate-50 border border-slate-200">
186
+ <div class="text-xs font-mono font-bold text-emerald-700 mb-1">2. Clean Scope</div>
187
+ <p class="text-xs text-slate-600">Does not pollute the global <code class="font-mono text-[11px]">window</code> object. The function stays safely scoped inside your module.</p>
188
+ </div>
189
+ <div class="p-4 rounded-xl bg-slate-50 border border-slate-200">
190
+ <div class="text-xs font-mono font-bold text-emerald-700 mb-1">3. Always Updated</div>
191
+ <p class="text-xs text-slate-600">Served via jsDelivr with global edge caching for lightning fast downloads.</p>
192
+ </div>
193
+ </div>
194
+ </section>
195
+
196
+ <!-- 2 FILES CODE BREAKDOWN -->
197
+ <section id="code-walkthrough" class="space-y-6">
198
+ <div class="border-b border-slate-200 pb-4">
199
+ <span class="text-xs uppercase font-mono tracking-wider text-emerald-700 font-bold">Implementation Files</span>
200
+ <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">The 2 Files Needed to Render via CDN</h2>
201
+ <p class="text-slate-600 text-sm mt-1">This matches the exact setup found in <code class="font-mono text-emerald-700">samples/table/byCdn/</code>.</p>
202
+ </div>
203
+
204
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
205
+
206
+ <!-- File 1: index.html -->
207
+ <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
208
+ <div class="flex items-center justify-between">
209
+ <span class="text-xs font-bold text-slate-900 uppercase tracking-wider font-mono flex items-center gap-1.5">
210
+ <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span> 1. index.html (The Page)
211
+ </span>
212
+ <button onclick="copyCode('cdn-html-snippet')" class="text-xs text-slate-500 hover:text-emerald-700 font-mono transition">📋 Copy</button>
213
+ </div>
214
+
215
+ <pre class="bg-slate-950 rounded-xl p-4 text-xs text-slate-300 font-mono overflow-x-auto border border-slate-800"><code id="cdn-html-snippet">&lt;!DOCTYPE html&gt;
216
+ &lt;html lang="en"&gt;
217
+ &lt;head&gt;
218
+ &lt;meta charset="utf-8"&gt;
219
+ &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
220
+ &lt;title&gt;Table DOM Renderer Demo&lt;/title&gt;
221
+ &lt;!-- Bootstrap CSS for clean styling --&gt;
222
+ &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
223
+ &lt;/head&gt;
224
+ &lt;body class="bg-light"&gt;
225
+ &lt;main class="container-fluid py-4"&gt;
226
+ &lt;h1&gt;Table DOM Renderer Demo&lt;/h1&gt;
227
+
228
+ &lt;!-- Target container where table will be mounted --&gt;
229
+ &lt;div id="dom-render-container"&gt;
230
+ &lt;div class="text-center py-5 text-muted"&gt;Rendering table...&lt;/div&gt;
231
+ &lt;/div&gt;
232
+ &lt;/main&gt;
233
+
234
+ &lt;!-- Load your module script --&gt;
235
+ &lt;script type="module" src="./index.js"&gt;&lt;/script&gt;
236
+ &lt;/body&gt;
237
+ &lt;/html&gt;</code></pre>
238
+
239
+ <p class="text-xs text-slate-600 leading-relaxed">
240
+ <strong>Key Requirement:</strong> A container element with an <code class="text-emerald-700 font-mono">id</code> (e.g. <code class="text-emerald-700 font-mono">dom-render-container</code>) and a script tag with <code class="text-emerald-700 font-mono">type="module"</code>.
241
+ </p>
242
+ </div>
243
+
244
+ <!-- File 2: index.js -->
245
+ <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
246
+ <div class="flex items-center justify-between">
247
+ <span class="text-xs font-bold text-slate-900 uppercase tracking-wider font-mono flex items-center gap-1.5">
248
+ <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span> 2. index.js (The JavaScript)
249
+ </span>
250
+ <button onclick="copyCode('cdn-js-snippet')" class="text-xs text-slate-500 hover:text-emerald-700 font-mono transition">📋 Copy</button>
251
+ </div>
252
+
253
+ <pre class="bg-slate-950 rounded-xl p-4 text-xs text-slate-300 font-mono overflow-x-auto border border-slate-800"><code id="cdn-js-snippet">// 1. Import render directly from jsDelivr CDN
254
+ import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";
255
+
256
+ // 2. Import your JSON data
257
+ import data from "./batches.json" with { type: "json" };
258
+
259
+ const start = () => {
260
+ try {
261
+ // 3. Mount table into the container
262
+ render({
263
+ type: "table",
264
+ data: data.slice(0, 50),
265
+ targetHtmlId: "dom-render-container",
266
+ columns: ["itemName", "baseUnit"],
267
+ showLog: true
268
+ });
269
+ } catch (err) {
270
+ console.log("error : ", err);
271
+ }
272
+ };
273
+
274
+ start();</code></pre>
275
+
276
+ <p class="text-xs text-slate-600 leading-relaxed">
277
+ <strong>Key Requirement:</strong> Direct import statement pointing to the minified CDN bundle. You pass your rows and visible columns.
278
+ </p>
279
+ </div>
280
+
281
+ </div>
282
+ </section>
283
+
284
+ <!-- ALTERNATIVE: LOADING DATA WITH FETCH() -->
285
+ <section class="bg-slate-50 rounded-2xl p-6 sm:p-8 border border-slate-200 space-y-4">
286
+ <div class="flex items-center gap-2">
287
+ <span class="text-xl">🌐</span>
288
+ <h3 class="text-lg font-bold text-slate-900">Alternative: Fetching Data from API or Remote JSON</h3>
289
+ </div>
290
+ <p class="text-slate-600 text-sm leading-relaxed">
291
+ If your browser environment doesn't support <code class="text-emerald-700 font-mono">import with { type: "json" }</code>, or if you are retrieving rows dynamically from a backend REST API endpoint, use standard modern <code class="text-emerald-700 font-mono">fetch()</code>:
292
+ </p>
293
+
294
+ <pre class="bg-slate-950 rounded-xl p-4 text-xs text-slate-300 font-mono overflow-x-auto border border-slate-800"><code>import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";
295
+
296
+ async function loadTable() {
297
+ try {
298
+ const res = await fetch("./batches.json");
299
+ const data = await res.json();
300
+
301
+ render({
302
+ type: "table",
303
+ data: data.slice(0, 25),
304
+ targetHtmlId: "dom-render-container",
305
+ columns: ["itemName", "baseUnit"],
306
+ showLog: true
307
+ });
308
+ } catch (error) {
309
+ console.error("Failed to render table:", error);
310
+ }
311
+ }
312
+
313
+ loadTable();</code></pre>
314
+ </section>
315
+
316
+ <!-- PARAMETER GUIDE -->
317
+ <section class="space-y-6">
318
+ <div class="border-b border-slate-200 pb-4">
319
+ <span class="text-xs uppercase font-mono tracking-wider text-emerald-700 font-bold">Configuration</span>
320
+ <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">Render Parameters Explained</h2>
321
+ </div>
322
+
323
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
324
+ <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-2">
325
+ <div class="flex items-center justify-between">
326
+ <span class="font-mono text-sm font-bold text-emerald-700">type</span>
327
+ <span class="text-[10px] uppercase font-mono bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-bold">Required</span>
328
+ </div>
329
+ <p class="text-xs text-slate-600">Must be set to <code class="text-emerald-800 font-mono font-medium">"table"</code> to instruct the builder to generate an HTML table.</p>
330
+ </div>
331
+
332
+ <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-2">
333
+ <div class="flex items-center justify-between">
334
+ <span class="font-mono text-sm font-bold text-emerald-700">targetHtmlId</span>
335
+ <span class="text-[10px] uppercase font-mono bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-bold">Required</span>
336
+ </div>
337
+ <p class="text-xs text-slate-600">The HTML <code class="text-emerald-800 font-mono font-medium">id</code> of the element where the table will be inserted.</p>
338
+ </div>
339
+
340
+ <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-2">
341
+ <div class="flex items-center justify-between">
342
+ <span class="font-mono text-sm font-bold text-emerald-700">data</span>
343
+ <span class="text-[10px] uppercase font-mono bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-bold">Required</span>
344
+ </div>
345
+ <p class="text-xs text-slate-600">Array of objects containing row records to be converted into table rows.</p>
346
+ </div>
347
+
348
+ <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-2">
349
+ <div class="flex items-center justify-between">
350
+ <span class="font-mono text-sm font-bold text-emerald-700">columns</span>
351
+ <span class="text-[10px] uppercase font-mono bg-teal-100 text-teal-800 px-2 py-0.5 rounded font-bold">Recommended</span>
352
+ </div>
353
+ <p class="text-xs text-slate-600">Array of key names to show as columns. Filters out any unwanted keys.</p>
354
+ </div>
355
+
356
+ <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-2">
357
+ <div class="flex items-center justify-between">
358
+ <span class="font-mono text-sm font-bold text-emerald-700">showLog</span>
359
+ <span class="text-[10px] uppercase font-mono bg-slate-100 text-slate-700 px-2 py-0.5 rounded font-bold">Optional</span>
360
+ </div>
361
+ <p class="text-xs text-slate-600">Set to <code class="text-emerald-800 font-mono font-medium">true</code> to enable informative debug logs in the browser console.</p>
362
+ </div>
363
+
364
+ <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-2">
365
+ <div class="flex items-center justify-between">
366
+ <span class="font-mono text-sm font-bold text-emerald-700">appendPosition</span>
367
+ <span class="text-[10px] uppercase font-mono bg-slate-100 text-slate-700 px-2 py-0.5 rounded font-bold">Optional</span>
368
+ </div>
369
+ <p class="text-xs text-slate-600">Set to <code class="text-emerald-800 font-mono font-medium">"prepend"</code> to place the table before existing children, or omit to replace.</p>
370
+ </div>
371
+ </div>
372
+ </section>
373
+
374
+ <!-- LIVE INTERACTIVE PLAYGROUND (CDN SPECIFIC) -->
375
+ <section id="live-demo" class="space-y-6">
376
+ <div class="border-b border-slate-200 pb-4">
377
+ <span class="text-xs uppercase font-mono tracking-wider text-emerald-700 font-bold">Try It Live</span>
378
+ <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">Interactive CDN Import Playground</h2>
379
+ <p class="text-slate-600 text-sm mt-1">Configure options and render a live table using the CDN render function right now.</p>
380
+ </div>
381
+
382
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
383
+
384
+ <!-- Controls Column -->
385
+ <div class="lg:col-span-5 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-5">
386
+ <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider font-mono">Playground Controls</h3>
387
+
388
+ <!-- Columns Selector -->
389
+ <div>
390
+ <label class="text-xs font-mono text-slate-600 block mb-2 font-medium">Select Columns to Display:</label>
391
+ <div class="flex flex-wrap gap-2 text-xs font-mono">
392
+ <label class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-slate-50 border border-slate-200 text-slate-700 cursor-pointer hover:bg-slate-100">
393
+ <input type="checkbox" id="col-itemName" checked class="rounded text-emerald-600">
394
+ <span>itemName</span>
395
+ </label>
396
+ <label class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-slate-50 border border-slate-200 text-slate-700 cursor-pointer hover:bg-slate-100">
397
+ <input type="checkbox" id="col-baseUnit" checked class="rounded text-emerald-600">
398
+ <span>baseUnit</span>
399
+ </label>
400
+ <label class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-slate-50 border border-slate-200 text-slate-700 cursor-pointer hover:bg-slate-100">
401
+ <input type="checkbox" id="col-category" checked class="rounded text-emerald-600">
402
+ <span>category</span>
403
+ </label>
404
+ <label class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-slate-50 border border-slate-200 text-slate-700 cursor-pointer hover:bg-slate-100">
405
+ <input type="checkbox" id="col-stock" class="rounded text-emerald-600">
406
+ <span>stock</span>
407
+ </label>
408
+ </div>
409
+ </div>
410
+
411
+ <!-- Row Slider -->
412
+ <div>
413
+ <div class="flex justify-between text-xs font-mono mb-1">
414
+ <span class="text-slate-600">Rows to Render:</span>
415
+ <span id="row-count-label" class="text-emerald-700 font-bold">5</span>
416
+ </div>
417
+ <input id="row-slider" type="range" min="2" max="10" value="5" class="w-full accent-emerald-600 bg-slate-200 rounded-lg cursor-pointer">
418
+ </div>
419
+
420
+ <!-- Action Button -->
421
+ <button id="btn-run-cdn" class="w-full py-2.5 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">
422
+ <span>⚡</span> Render Table via CDN Now
423
+ </button>
424
+
425
+ <!-- Generated Code -->
426
+ <div>
427
+ <div class="flex items-center justify-between mb-1">
428
+ <span class="text-xs font-mono text-slate-500">Live Code Snippet:</span>
429
+ <button onclick="copyCode('active-cdn-code')" class="text-[11px] text-emerald-700 hover:underline">Copy</button>
430
+ </div>
431
+ <pre class="bg-slate-950 p-3 rounded-xl text-[11px] text-slate-300 font-mono border border-slate-800 overflow-x-auto"><code id="active-cdn-code">import render from "https://cdn.jsdelivr.net/...";
432
+
433
+ render({
434
+ type: "table",
435
+ data: data.slice(0, 5),
436
+ targetHtmlId: "cdn-live-output",
437
+ columns: ["itemName", "baseUnit", "category"],
438
+ showLog: true
439
+ });</code></pre>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Output Column -->
444
+ <div class="lg:col-span-7 space-y-4">
445
+ <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
446
+ <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100">
447
+ <div class="flex items-center gap-2">
448
+ <span class="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></span>
449
+ <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider font-mono">
450
+ Container: <code class="text-emerald-700">#cdn-live-output</code>
451
+ </h3>
452
+ </div>
453
+ <span id="status-badge" class="px-2 py-0.5 text-[11px] font-mono rounded bg-emerald-100 text-emerald-800">Ready</span>
454
+ </div>
455
+
456
+ <!-- Table Target -->
457
+ <div id="cdn-live-output" class="overflow-x-auto min-h-[200px] flex items-center justify-center text-slate-400 text-sm">
458
+ Click the button above to render the table via CDN.
459
+ </div>
460
+ </div>
461
+
462
+ <!-- Console Output -->
463
+ <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
464
+ <div class="flex items-center justify-between mb-2">
465
+ <span class="text-xs font-mono text-slate-500 flex items-center gap-1.5">
466
+ <span>💻</span> Execution Console
467
+ </span>
468
+ <button id="btn-clear-console" class="text-[11px] text-slate-400 hover:text-slate-600 font-mono">Clear</button>
469
+ </div>
470
+ <pre id="cdn-console" class="bg-slate-950 p-3 rounded-xl text-xs text-emerald-400 font-mono border border-slate-800 h-24 overflow-y-auto"><code>[Ready] Loaded CDN module runtime.</code></pre>
471
+ </div>
472
+ </div>
473
+
474
+ </div>
475
+ </section>
476
+
477
+ <!-- NAVIGATION TO OTHER GUIDES -->
478
+ <section class="bg-slate-50 rounded-2xl p-6 sm:p-8 border border-slate-200 space-y-4">
479
+ <h3 class="text-lg font-bold text-slate-900">Explore More Documentation</h3>
480
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-1">
481
+ <a href="index.html" class="bg-white p-4 rounded-xl border border-slate-200 hover:border-emerald-400 hover:shadow-xs transition">
482
+ <div class="text-lg mb-1">🔄</div>
483
+ <div class="font-bold text-slate-900 text-xs sm:text-sm">HTML Process Guide</div>
484
+ <p class="text-xs text-slate-500 mt-1">Read the short note and internal 4-stage pipeline.</p>
485
+ </a>
486
+ <a href="windowKs.html" class="bg-white p-4 rounded-xl border border-slate-200 hover:border-indigo-400 hover:shadow-xs transition">
487
+ <div class="text-lg mb-1">🌐</div>
488
+ <div class="font-bold text-slate-900 text-xs sm:text-sm">window.ks Guide</div>
489
+ <p class="text-xs text-slate-500 mt-1">Learn how to use global window.ks namespace.</p>
490
+ </a>
491
+ <a href="../../samples/table/byCdn/index.html" target="_blank" class="bg-white p-4 rounded-xl border border-slate-200 hover:border-teal-400 hover:shadow-xs transition">
492
+ <div class="text-lg mb-1">📂</div>
493
+ <div class="font-bold text-slate-900 text-xs sm:text-sm">Run Sample Directly</div>
494
+ <p class="text-xs text-slate-500 mt-1">Open samples/table/byCdn/ in your browser.</p>
495
+ </a>
496
+ </div>
497
+ </section>
498
+
499
+ </main>
500
+
501
+ <!-- Clean Light Footer -->
502
+ <footer class="border-t border-slate-200 bg-slate-50 py-6 mt-12">
503
+ <div 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">
504
+ <div>
505
+ <span class="text-slate-900 font-semibold">json-renderers</span> &bull; Documentation for <code class="text-emerald-700">tableByCdn</code>
506
+ </div>
507
+ <div class="flex items-center gap-4">
508
+ <a href="index.html" class="text-slate-700 hover:underline">HTML Process</a>
509
+ <a href="windowKs.html" class="text-indigo-700 hover:underline">window.ks Guide</a>
510
+ <a href="../index.html" class="text-slate-700 hover:underline">Main Docs</a>
511
+ </div>
512
+ </div>
513
+ </footer>
514
+
515
+ <!-- Script for Interactive Playground -->
516
+ <script type="module">
517
+ import renderDirect from "../dist/v14/min.js";
518
+
519
+ const sampleData = [
520
+ { itemName: "0.09/30mm Steel Wire", baseUnit: "kgs", category: "Raw Materials", stock: 1200 },
521
+ { itemName: "0.11-25 Copper Alloy", baseUnit: "kgs", category: "Metals", stock: 450 },
522
+ { itemName: "0.11-30 Aluminum Rod", baseUnit: "kgs", category: "Metals", stock: 890 },
523
+ { itemName: "0.11/32mm Brass Tube", baseUnit: "kgs", category: "Pipes", stock: 320 },
524
+ { itemName: "Industrial Gear G-14", baseUnit: "pcs", category: "Machinery", stock: 75 },
525
+ { itemName: "High-Tensile Fastener", baseUnit: "pcs", category: "Hardware", stock: 2500 },
526
+ { itemName: "Hydraulic Seal Ring", baseUnit: "pcs", category: "Seals", stock: 640 },
527
+ { itemName: "Precision Bearing 6205", baseUnit: "pcs", category: "Bearings", stock: 180 },
528
+ { itemName: "Synthetic Oil 5W-40", baseUnit: "ltrs", category: "Lubricants", stock: 95 },
529
+ { itemName: "Carbon Fiber Sheet 3mm", baseUnit: "sqm", category: "Composites", stock: 40 }
530
+ ];
531
+
532
+ const slider = document.getElementById("row-slider");
533
+ const rowCountLabel = document.getElementById("row-count-label");
534
+ const runBtn = document.getElementById("btn-run-cdn");
535
+ const statusBadge = document.getElementById("status-badge");
536
+ const demoConsole = document.getElementById("cdn-console");
537
+ const snippetCode = document.getElementById("active-cdn-code");
538
+ const clearBtn = document.getElementById("btn-clear-console");
539
+
540
+ function logConsole(msg) {
541
+ if (!demoConsole) return;
542
+ demoConsole.innerHTML += "\n" + msg;
543
+ demoConsole.scrollTop = demoConsole.scrollHeight;
544
+ }
545
+
546
+ if (clearBtn) {
547
+ clearBtn.addEventListener("click", () => {
548
+ demoConsole.innerHTML = "<code>Console cleared.</code>";
549
+ });
550
+ }
551
+
552
+ const colCheckboxes = ["itemName", "baseUnit", "category", "stock"];
553
+ colCheckboxes.forEach((id) => {
554
+ const el = document.getElementById("col-" + id);
555
+ if (el) el.addEventListener("change", updateSnippet);
556
+ });
557
+
558
+ if (slider) {
559
+ slider.addEventListener("input", (e) => {
560
+ rowCountLabel.textContent = e.target.value;
561
+ updateSnippet();
562
+ });
563
+ }
564
+
565
+ function getSelectedColumns() {
566
+ return colCheckboxes.filter(id => {
567
+ const el = document.getElementById("col-" + id);
568
+ return el && el.checked;
569
+ });
570
+ }
571
+
572
+ function updateSnippet() {
573
+ const cols = getSelectedColumns();
574
+ const count = slider ? slider.value : 5;
575
+ snippetCode.textContent = `// Method 1: Direct CDN Import
576
+ import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";
577
+
578
+ render({
579
+ type: "table",
580
+ data: data.slice(0, ${count}),
581
+ targetHtmlId: "cdn-live-output",
582
+ columns: ${JSON.stringify(cols)},
583
+ showLog: true
584
+ });`;
585
+ }
586
+
587
+ function renderTable() {
588
+ const cols = getSelectedColumns();
589
+ if (cols.length === 0) {
590
+ alert("Please select at least one column!");
591
+ return;
592
+ }
593
+ const count = parseInt(slider ? slider.value : 5, 10);
594
+ const rows = sampleData.slice(0, count);
595
+
596
+ statusBadge.textContent = "Rendering...";
597
+ statusBadge.className = "px-2 py-0.5 text-[11px] font-mono rounded bg-amber-100 text-amber-800";
598
+
599
+ try {
600
+ logConsole(`[Calling render] ${count} rows, columns: [${cols.join(", ")}]`);
601
+ renderDirect({
602
+ type: "table",
603
+ data: rows,
604
+ targetHtmlId: "cdn-live-output",
605
+ columns: cols,
606
+ showLog: true
607
+ });
608
+ logConsole(`[Success] Table successfully mounted via CDN into #cdn-live-output.`);
609
+ statusBadge.textContent = `Mounted (${count} rows)`;
610
+ statusBadge.className = "px-2 py-0.5 text-[11px] font-mono rounded bg-emerald-100 text-emerald-800";
611
+ } catch (err) {
612
+ logConsole(`[Error] ` + err.message);
613
+ statusBadge.textContent = "Error";
614
+ statusBadge.className = "px-2 py-0.5 text-[11px] font-mono rounded bg-rose-100 text-rose-800";
615
+ }
616
+ }
617
+
618
+ if (runBtn) {
619
+ runBtn.addEventListener("click", renderTable);
620
+ }
621
+
622
+ // Auto-render on load
623
+ setTimeout(renderTable, 150);
624
+
625
+ window.copyCode = (elementId) => {
626
+ const el = document.getElementById(elementId);
627
+ if (!el) return;
628
+ navigator.clipboard.writeText(el.textContent).then(() => {
629
+ alert("Code copied to clipboard!");
630
+ });
631
+ };
632
+ </script>
633
+ </body>
634
+ </html>