json-renderers 1.18.4 → 1.18.7
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/README.md +2 -3
- package/docs/dist/min.js +1383 -934
- package/docs/dist/v18/min.js +1383 -934
- package/docs/index.html +271 -845
- package/docs/indexV1.html +1091 -0
- package/docs/samples/datalist/cdn.html +505 -0
- package/docs/samples/datalist/index.html +311 -0
- package/docs/samples/datalist/windowks.html +350 -0
- package/docs/samples/index.html +326 -0
- package/docs/samples/select/cdn.html +520 -0
- package/docs/samples/select/index.html +311 -0
- package/docs/samples/select/windowks.html +358 -0
- package/docs/{table → samples/table}/cdn.html +7 -6
- package/docs/samples/table/index.html +314 -0
- package/docs/{table → samples/table}/windowKs.html +11 -6
- package/package.json +5 -5
- package/src/index.js +1 -1
- package/docs/table/index.html +0 -607
- package/docs/table/windowKsV1.html +0 -647
|
@@ -1,647 +0,0 @@
|
|
|
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 window.ks | How to Render HTML Tables via Global Namespace</title>
|
|
7
|
-
<meta name="description" content="Step-by-step beginner guide to building and mounting HTML tables using json-renderers global window.ks namespace." />
|
|
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: '#eef2ff',
|
|
20
|
-
100: '#e0e7ff',
|
|
21
|
-
500: '#6366f1',
|
|
22
|
-
600: '#4f46e5',
|
|
23
|
-
700: '#4338ca',
|
|
24
|
-
800: '#3730a3',
|
|
25
|
-
900: '#312e81'
|
|
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
|
-
#ks-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
|
-
#ks-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
|
-
#ks-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
|
-
#ks-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-indigo-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-indigo-500 via-teal-600 to-emerald-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-indigo-600 transition">json-renderers</a>
|
|
114
|
-
<span class="px-2 py-0.5 text-xs bg-indigo-100 text-indigo-800 rounded-full border border-indigo-200 font-mono font-medium">window.ks Guide</span>
|
|
115
|
-
</div>
|
|
116
|
-
<p class="text-xs text-slate-500">Method 2: Global window.ks Namespace</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-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">Using CDN</a>
|
|
124
|
-
<a href="windowKs.html" class="px-3 py-1.5 rounded-lg bg-indigo-600 text-white font-semibold shadow-sm transition text-xs sm:text-sm">window.ks</a>
|
|
125
|
-
<a href="../../samples/table/byKs/index.html" target="_blank" class="px-3 py-1.5 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-800 border border-indigo-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-indigo-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-indigo-100 border border-indigo-200 text-xs text-indigo-800 font-mono font-medium">
|
|
138
|
-
<span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>
|
|
139
|
-
Method 2 • Global Browser Namespace
|
|
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-indigo-600 to-teal-600">Using Global window.ks</span>
|
|
145
|
-
</h1>
|
|
146
|
-
|
|
147
|
-
<p class="max-w-4xl text-slate-600 text-base sm:text-lg leading-relaxed">
|
|
148
|
-
Learn how to load the bundle once and invoke <code class="text-indigo-700 bg-indigo-50 px-1.5 py-0.5 rounded font-mono font-semibold">window.ks.jsonRenderers.renderToDom(...)</code> from any script, component, or developer console in your web application.
|
|
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-indigo-600 hover:bg-indigo-500 text-white text-xs sm:text-sm font-semibold transition flex items-center gap-1.5 shadow-sm">
|
|
160
|
-
<span>⚡</span> Interactive window.ks Demo
|
|
161
|
-
</a>
|
|
162
|
-
<a href="../../samples/table/byKs/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/byKs →
|
|
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 window.ks Works in Simple Words</h2>
|
|
174
|
-
</div>
|
|
175
|
-
|
|
176
|
-
<p class="text-slate-600 text-sm sm:text-base leading-relaxed">
|
|
177
|
-
When the bundle is imported for side-effects (<code class="text-indigo-700 bg-indigo-50 px-1 py-0.5 rounded font-mono font-medium">import "url";</code>) or loaded as a script, it automatically creates a namespace on the browser's global scope: <code class="text-indigo-700 bg-indigo-50 px-1 py-0.5 rounded font-mono font-semibold">window.ks.jsonRenderers.renderToDom</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-indigo-700 mb-1">1. Global Availability</div>
|
|
183
|
-
<p class="text-xs text-slate-600">Any function or script on your page can call <code class="font-mono text-[11px]">window.ks.jsonRenderers.renderToDom</code> without re-importing.</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-indigo-700 mb-1">2. Console Friendly</div>
|
|
187
|
-
<p class="text-xs text-slate-600">Inspect and run live rendering directly from your browser DevTools console during development.</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-indigo-700 mb-1">3. Multi-Script Layouts</div>
|
|
191
|
-
<p class="text-xs text-slate-600">Perfect for multi-page templates, legacy architectures, or inline HTML event triggers.</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-indigo-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 for window.ks</h2>
|
|
201
|
-
<p class="text-slate-600 text-sm mt-1">This matches the exact setup found in <code class="font-mono text-indigo-700">samples/table/byKs/</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-indigo-500"></span> 1. index.html (The Page)
|
|
211
|
-
</span>
|
|
212
|
-
<button onclick="copyCode('ks-html-snippet')" class="text-xs text-slate-500 hover:text-indigo-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="ks-html-snippet"><!DOCTYPE html>
|
|
216
|
-
<html lang="en">
|
|
217
|
-
<head>
|
|
218
|
-
<meta charset="utf-8">
|
|
219
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
220
|
-
<title>Table DOM Renderer via window.ks</title>
|
|
221
|
-
<!-- Bootstrap CSS for clean styling -->
|
|
222
|
-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
223
|
-
</head>
|
|
224
|
-
<body class="bg-light">
|
|
225
|
-
<main class="container-fluid py-4">
|
|
226
|
-
<h1>Table DOM Renderer Demo</h1>
|
|
227
|
-
|
|
228
|
-
<!-- Target container where table will be mounted -->
|
|
229
|
-
<div id="dom-render-container">
|
|
230
|
-
<div class="text-center py-5 text-muted">Rendering table...</div>
|
|
231
|
-
</div>
|
|
232
|
-
</main>
|
|
233
|
-
|
|
234
|
-
<!-- Load your module script -->
|
|
235
|
-
<script type="module" src="./index.js"></script>
|
|
236
|
-
</body>
|
|
237
|
-
</html></code></pre>
|
|
238
|
-
|
|
239
|
-
<p class="text-xs text-slate-600 leading-relaxed">
|
|
240
|
-
The HTML shell is clean and standard! Notice the container element with <code class="text-indigo-700 font-mono">id="dom-render-container"</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-indigo-500"></span> 2. index.js (Using window.ks)
|
|
249
|
-
</span>
|
|
250
|
-
<button onclick="copyCode('ks-js-snippet')" class="text-xs text-slate-500 hover:text-indigo-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="ks-js-snippet">// 1. Load the bundle (it attaches window.ks globally)
|
|
254
|
-
import "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. Call the globally attached function
|
|
262
|
-
window.ks.jsonRenderers.renderToDom({
|
|
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
|
-
Notice: Instead of <code class="font-mono text-xs">import render from ...</code>, you import for side-effects, and then use <code class="text-indigo-700 font-mono font-medium">window.ks.jsonRenderers.renderToDom</code>.
|
|
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 with window.ks</h3>
|
|
289
|
-
</div>
|
|
290
|
-
<p class="text-slate-600 text-sm leading-relaxed">
|
|
291
|
-
You can pair standard <code class="text-indigo-700 font-mono">fetch()</code> with <code class="text-indigo-700 font-mono">window.ks</code> to load dynamic REST API feeds cleanly:
|
|
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 "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
|
-
window.ks.jsonRenderers.renderToDom({
|
|
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-indigo-700 font-bold">Configuration</span>
|
|
320
|
-
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">Render Parameters for renderToDom</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-indigo-700">type</span>
|
|
327
|
-
<span class="text-[10px] uppercase font-mono bg-indigo-100 text-indigo-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-indigo-800 font-mono font-medium">"table"</code> to generate a table component.</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-indigo-700">targetHtmlId</span>
|
|
335
|
-
<span class="text-[10px] uppercase font-mono bg-indigo-100 text-indigo-800 px-2 py-0.5 rounded font-bold">Required</span>
|
|
336
|
-
</div>
|
|
337
|
-
<p class="text-xs text-slate-600">The DOM <code class="text-indigo-800 font-mono font-medium">id</code> of the container element.</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-indigo-700">data</span>
|
|
343
|
-
<span class="text-[10px] uppercase font-mono bg-indigo-100 text-indigo-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 data.</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-indigo-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.</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-indigo-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-indigo-800 font-mono font-medium">true</code> to print 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-indigo-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-indigo-800 font-mono font-medium">"prepend"</code> or omit to replace container contents.</p>
|
|
370
|
-
</div>
|
|
371
|
-
</div>
|
|
372
|
-
</section>
|
|
373
|
-
|
|
374
|
-
<!-- LIVE INTERACTIVE PLAYGROUND (WINDOW.KS 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-indigo-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 window.ks Playground</h2>
|
|
379
|
-
<p class="text-slate-600 text-sm mt-1">Execute <code class="text-indigo-700 font-mono">window.ks.jsonRenderers.renderToDom</code> directly from this page.</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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-700 font-bold">5</span>
|
|
416
|
-
</div>
|
|
417
|
-
<input id="row-slider" type="range" min="2" max="10" value="5" class="w-full accent-indigo-600 bg-slate-200 rounded-lg cursor-pointer">
|
|
418
|
-
</div>
|
|
419
|
-
|
|
420
|
-
<!-- Action Button -->
|
|
421
|
-
<button id="btn-run-ks" class="w-full py-2.5 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">
|
|
422
|
-
<span>🌐</span> Call window.ks.jsonRenderers.renderToDom
|
|
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-ks-code')" class="text-[11px] text-indigo-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-ks-code">import "https://cdn.jsdelivr.net/...";
|
|
432
|
-
|
|
433
|
-
window.ks.jsonRenderers.renderToDom({
|
|
434
|
-
type: "table",
|
|
435
|
-
data: data.slice(0, 5),
|
|
436
|
-
targetHtmlId: "ks-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-indigo-500 animate-pulse"></span>
|
|
449
|
-
<h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider font-mono">
|
|
450
|
-
Container: <code class="text-indigo-700">#ks-live-output</code>
|
|
451
|
-
</h3>
|
|
452
|
-
</div>
|
|
453
|
-
<span id="status-badge" class="px-2 py-0.5 text-[11px] font-mono rounded bg-indigo-100 text-indigo-800">Ready</span>
|
|
454
|
-
</div>
|
|
455
|
-
|
|
456
|
-
<!-- Table Target -->
|
|
457
|
-
<div id="ks-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 window.ks.
|
|
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="ks-console" class="bg-slate-950 p-3 rounded-xl text-xs text-indigo-300 font-mono border border-slate-800 h-24 overflow-y-auto"><code>[Ready] window.ks namespace initialized.</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="cdn.html" class="bg-white p-4 rounded-xl border border-slate-200 hover:border-emerald-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">Using CDN Guide</div>
|
|
489
|
-
<p class="text-xs text-slate-500 mt-1">Learn how to import render directly from CDN.</p>
|
|
490
|
-
</a>
|
|
491
|
-
<a href="../../samples/table/byKs/index.html" target="_blank" class="bg-white p-4 rounded-xl border border-slate-200 hover:border-indigo-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/byKs/ 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> • Documentation for <code class="text-indigo-700">tableByKs</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="cdn.html" class="text-emerald-700 hover:underline">Using CDN 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-ks");
|
|
535
|
-
const statusBadge = document.getElementById("status-badge");
|
|
536
|
-
const demoConsole = document.getElementById("ks-console");
|
|
537
|
-
const snippetCode = document.getElementById("active-ks-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 2: Global window.ks
|
|
576
|
-
import "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";
|
|
577
|
-
|
|
578
|
-
window.ks.jsonRenderers.renderToDom({
|
|
579
|
-
type: "table",
|
|
580
|
-
data: data.slice(0, ${count}),
|
|
581
|
-
targetHtmlId: "ks-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 window.ks] ${count} rows, columns: [${cols.join(", ")}]`);
|
|
601
|
-
|
|
602
|
-
if (window.ks && window.ks.jsonRenderers && window.ks.jsonRenderers.renderToDom) {
|
|
603
|
-
window.ks.jsonRenderers.renderToDom({
|
|
604
|
-
type: "table",
|
|
605
|
-
data: rows,
|
|
606
|
-
targetHtmlId: "ks-live-output",
|
|
607
|
-
columns: cols,
|
|
608
|
-
showLog: true
|
|
609
|
-
});
|
|
610
|
-
} else {
|
|
611
|
-
// Fallback
|
|
612
|
-
renderDirect({
|
|
613
|
-
type: "table",
|
|
614
|
-
data: rows,
|
|
615
|
-
targetHtmlId: "ks-live-output",
|
|
616
|
-
columns: cols,
|
|
617
|
-
showLog: true
|
|
618
|
-
});
|
|
619
|
-
}
|
|
620
|
-
|
|
621
|
-
logConsole(`[Success] Table successfully mounted via window.ks into #ks-live-output.`);
|
|
622
|
-
statusBadge.textContent = `Mounted (${count} rows)`;
|
|
623
|
-
statusBadge.className = "px-2 py-0.5 text-[11px] font-mono rounded bg-indigo-100 text-indigo-800";
|
|
624
|
-
} catch (err) {
|
|
625
|
-
logConsole(`[Error] ` + err.message);
|
|
626
|
-
statusBadge.textContent = "Error";
|
|
627
|
-
statusBadge.className = "px-2 py-0.5 text-[11px] font-mono rounded bg-rose-100 text-rose-800";
|
|
628
|
-
}
|
|
629
|
-
}
|
|
630
|
-
|
|
631
|
-
if (runBtn) {
|
|
632
|
-
runBtn.addEventListener("click", renderTable);
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
// Auto-render on load
|
|
636
|
-
setTimeout(renderTable, 150);
|
|
637
|
-
|
|
638
|
-
window.copyCode = (elementId) => {
|
|
639
|
-
const el = document.getElementById(elementId);
|
|
640
|
-
if (!el) return;
|
|
641
|
-
navigator.clipboard.writeText(el.textContent).then(() => {
|
|
642
|
-
alert("Code copied to clipboard!");
|
|
643
|
-
});
|
|
644
|
-
};
|
|
645
|
-
</script>
|
|
646
|
-
</body>
|
|
647
|
-
</html>
|