kempo-ui 0.0.11 → 0.0.13
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/docs/components/accordion.html +122 -32
- package/docs/components/card.html +57 -41
- package/docs/components/collapsible.html +158 -36
- package/docs/components/content-slider.html +182 -35
- package/docs/components/dialog.html +79 -45
- package/docs/components/focus-capture.html +78 -40
- package/docs/components/hybrid-component.html +72 -34
- package/docs/components/icon.html +122 -41
- package/docs/components/import.html +39 -41
- package/docs/components/light-component.html +60 -35
- package/docs/components/persistant-collapsible.html +84 -38
- package/docs/components/photo-viewer.html +186 -37
- package/docs/components/resize.html +140 -38
- package/docs/components/shadow-component.html +53 -39
- package/docs/components/show-more.html +93 -40
- package/docs/components/side-menu.html +122 -38
- package/docs/components/sortable.html +94 -36
- package/docs/components/split.html +112 -39
- package/docs/components/table.html +269 -31
- package/docs/components/tableControls.html +54 -51
- package/docs/components/tableCustomFields.html +90 -51
- package/docs/components/tableFetchRecords.html +89 -49
- package/docs/components/tableFieldSortHide.html +52 -51
- package/docs/components/tablePagination.html +77 -51
- package/docs/components/tableRecordEditing.html +121 -51
- package/docs/components/tableRecordFiltering.html +63 -49
- package/docs/components/tableRecordHiding.html +56 -50
- package/docs/components/tableRecordSearching.html +52 -51
- package/docs/components/tableRecordSelection.html +53 -52
- package/docs/components/tableRowControls.html +56 -52
- package/docs/components/tableSorting.html +50 -51
- package/docs/components/tabs.html +147 -43
- package/docs/components/tags.html +72 -38
- package/docs/components/theme-switcher.html +86 -36
- package/docs/components/timestamp.html +44 -38
- package/docs/components/toast.html +25 -44
- package/docs/components/toggle.html +119 -39
- package/docs/components/tree.html +145 -39
- package/docs/dev.config.json +1 -1
- package/docs/index.html +209 -55
- package/docs/utils/debounce.html +31 -28
- package/docs/utils/drag.html +42 -28
- package/docs/utils/formatTimestamp.html +67 -28
- package/docs/utils/propConverters.html +80 -23
- package/docs/utils/toTitleCase.html +24 -28
- package/docs/utils/watchWindowSize.html +96 -5
- package/package.json +1 -1
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
|
-
<link rel="stylesheet" href="../kempo.min.css" />
|
|
6
|
+
<title>Split - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
9
8
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
9
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
10
|
<script>window.litDisableBundleWarning = true;</script>
|
|
@@ -13,59 +12,133 @@
|
|
|
13
12
|
</head>
|
|
14
13
|
<body>
|
|
15
14
|
<k-import src="../nav.inc.html"></k-import>
|
|
15
|
+
<h1 class="ta-center">Split</h1>
|
|
16
16
|
<main>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
<details
|
|
20
|
-
class="b r mb"
|
|
21
|
-
>
|
|
17
|
+
<details class="b r mb">
|
|
22
18
|
<summary class="p">Table of Contents</summary>
|
|
23
19
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
20
|
+
<h6>Examples</h6>
|
|
25
21
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="#
|
|
27
|
-
|
|
22
|
+
<a href="#resizing">Resizing</a><br />
|
|
23
|
+
|
|
24
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
25
|
+
<a href="#constructor">Constructor</a><br />
|
|
26
|
+
<a href="#requirements">Requirements</a><br />
|
|
27
|
+
<a href="#properties">Properties</a><br />
|
|
28
|
+
<a href="#cssCustomProperties">CSS Custom Properties</a><br />
|
|
29
|
+
<a href="#methods">Methods</a><br />
|
|
30
|
+
<a href="#events">Events</a><br />
|
|
28
31
|
</div>
|
|
29
32
|
</details>
|
|
30
33
|
|
|
31
|
-
<h3>Description</h3>
|
|
32
|
-
<p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
|
|
33
|
-
|
|
34
34
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<pre><code class="hljs
|
|
35
|
+
<p>Create a split view using the <code>k-split</code> component. Add content to the left pane by placing it inside the component, and add content to the right pane by using the <code>slot="right"</code> attribute.</p>
|
|
36
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span>Left Pane Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>></span>Right Pane Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-split</span>></span></code></pre>
|
|
37
|
+
<k-split style="height: 10rem" class="b">
|
|
38
|
+
<div>Left Pane Content</div>
|
|
39
|
+
<div slot="right">Right Pane Content</div>
|
|
40
|
+
</k-split>
|
|
37
41
|
|
|
38
|
-
<h3 id="
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
<h3 id="resizing"><a href="#resizing" class="no-link">Resizing</a></h3>
|
|
43
|
+
<p>The split view can be resized by dragging the divider handle. The initial width of the left pane can be set using the <code>--left_width</code> CSS custom property.</p>
|
|
44
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--left_width: 30%; height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span>Left Pane Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>></span>Right Pane Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-split</span>></span></code></pre>
|
|
45
|
+
<k-split style="--left_width: 30%; height: 10rem" class="b">
|
|
46
|
+
<div>Left Pane Content</div>
|
|
47
|
+
<div slot="right">Right Pane Content</div>
|
|
48
|
+
</k-split>
|
|
49
|
+
|
|
50
|
+
<h3>Sizes</h3>
|
|
51
|
+
<p>Set the CSS Custom Property <code>--left_width</code> to set the initial size.</p>
|
|
52
|
+
<p>Set the CSS Custom Property <code>--min_pane_width</code> to set the minimum size each side can be.</p>
|
|
53
|
+
<p>Set the CSS Custom Property <code>--handle_width</code> to set the size of the handle (the draggable region between the sides).</p>
|
|
54
|
+
<div class="row -mx">
|
|
55
|
+
<div class="col m-span-12 px">
|
|
56
|
+
<k-card label="HTML">
|
|
57
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-split</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"<br /> --left_width: 100px;<br /> --min_pane_width: 100px;<br /> --handle_width: 20px;<br /> height: 10rem<br /> "</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>left<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>></span>right<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-split</span>></span></code></pre>
|
|
58
|
+
</k-card>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="col m-span-12 px">
|
|
61
|
+
<k-card label="Output">
|
|
62
|
+
<k-split
|
|
63
|
+
style="
|
|
64
|
+
--left_width: 100px;
|
|
65
|
+
--min_pane_width: 100px;
|
|
66
|
+
--handle_width: 20px;
|
|
67
|
+
height: 10rem
|
|
68
|
+
"
|
|
69
|
+
class="b"
|
|
70
|
+
>
|
|
71
|
+
<p>left</p>
|
|
72
|
+
<p slot="right">right</p>
|
|
73
|
+
</k-split>
|
|
74
|
+
</k-card>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<h3 id="stacking"><a href="#stacking" class="no-link">Stacking</a></h3>
|
|
79
|
+
<p>When the screen size is small (mobile) a split panel may not make sense, rather than changing the markup set the <code>stack-width</code> attribute to stack the contents (disable split view) when the window size is less than the provided size.</p>
|
|
80
|
+
<div class="row -mx">
|
|
81
|
+
<div class="col m-span-12 px">
|
|
82
|
+
<k-card label="HTML">
|
|
83
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">stack-width</span>=<span class="hljs-string">"1080"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span>Left Pane Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>></span>Right Pane Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-split</span>></span></code></pre>
|
|
84
|
+
</k-card>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="col m-span-12 px">
|
|
87
|
+
<k-card label="Output">
|
|
88
|
+
<k-split style="height: 10rem" stack-width="1080">
|
|
89
|
+
<div>Left Pane Content</div>
|
|
90
|
+
<div slot="right">Right Pane Content</div>
|
|
91
|
+
</k-split>
|
|
92
|
+
</k-card>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
98
|
+
|
|
99
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
100
|
+
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
101
|
+
<h5>
|
|
102
|
+
<code>new Split()</code>
|
|
103
|
+
</h5>
|
|
46
104
|
|
|
47
|
-
<
|
|
48
|
-
<p>Unregisters a previously registered handler function.</p>
|
|
105
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
49
106
|
<ul>
|
|
50
|
-
<li><
|
|
107
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
51
108
|
</ul>
|
|
52
109
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
<
|
|
110
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
111
|
+
<h5><code>resizing<i>: boolean</i></code></h5>
|
|
112
|
+
<p>Whether the split view is currently being resized. Syncs to <code>resizing</code> attribute.</p>
|
|
113
|
+
<h5><code>stacked<i>: boolean</i></code></h5>
|
|
114
|
+
<p>Whether the split view is in stacked mode. Syncs to <code>stacked</code> attribute.</p>
|
|
115
|
+
<h5><code>stackWidth<i>: number</i></code></h5>
|
|
116
|
+
<p>The window width threshold for stacking behavior. Syncs to <code>stack-width</code> attribute.</p>
|
|
57
117
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
118
|
+
<h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
|
|
119
|
+
<h5><code>--left_width</code></h5>
|
|
120
|
+
<p>The width of the left pane. Default is <code>calc((100% - var(--handle_width)) / 2)</code>.</p>
|
|
121
|
+
<h5><code>--handle_width</code></h5>
|
|
122
|
+
<p>The width of the draggable divider handle. Default is <code>0.5rem</code>.</p>
|
|
123
|
+
<h5><code>--min_pane_width</code></h5>
|
|
124
|
+
<p>The minimum width each pane can be resized to. Default is <code>6rem</code>.</p>
|
|
60
125
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
126
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
127
|
+
<h5><code>setSize(size)<i>: void</i></code></h5>
|
|
128
|
+
<p>Sets the width of the left pane.</p>
|
|
63
129
|
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<
|
|
130
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
131
|
+
<h5><code>resizestart</code></h5>
|
|
132
|
+
<p>Fired when the user starts dragging the divider handle. Detail contains <code>{ startSize }</code>.</p>
|
|
133
|
+
<h5><code>resize</code></h5>
|
|
134
|
+
<p>Fired during dragging of the divider handle. Detail contains <code>{ size }</code>.</p>
|
|
135
|
+
<h5><code>resizeend</code></h5>
|
|
136
|
+
<p>Fired when the user stops dragging the divider handle. Detail contains <code>{ size }</code>.</p>
|
|
67
137
|
|
|
68
138
|
</main>
|
|
69
139
|
<div style="height:33vh"></div>
|
|
140
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
141
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
142
|
+
<script type="module" src="../src/components/Split.js"></script>
|
|
70
143
|
</body>
|
|
71
|
-
</html>
|
|
144
|
+
</html>
|
|
@@ -3,69 +3,307 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>Table - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
7
|
<link rel="stylesheet" href="../kempo-vars.css" />
|
|
8
8
|
<link rel="stylesheet" href="../kempo.min.css" />
|
|
9
9
|
<link rel="stylesheet" href="../kempo-hljs.css" />
|
|
10
10
|
<link rel="stylesheet" href="../styles.css" />
|
|
11
11
|
<script>window.litDisableBundleWarning = true;</script>
|
|
12
12
|
<script type="module" src="./init.js"></script>
|
|
13
|
+
<script type="module" src="../src/components/Table.js"></script>
|
|
14
|
+
<script>
|
|
15
|
+
|
|
16
|
+
window.contacts = [];
|
|
17
|
+
function generateContact(){
|
|
18
|
+
const maleNames = [
|
|
19
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
20
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
21
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
22
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
23
|
+
"Wyatt", "Matthew"
|
|
24
|
+
];
|
|
25
|
+
const femaleNames = [
|
|
26
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
27
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
28
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
29
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
30
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
31
|
+
];
|
|
32
|
+
const lastNames = [
|
|
33
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
34
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
35
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
36
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
37
|
+
"Ramirez", "Lewis", "Robinson"
|
|
38
|
+
];
|
|
39
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
40
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
41
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
42
|
+
const name = `${firstName} ${lastName}`;
|
|
43
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
44
|
+
const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
|
|
45
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
46
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
47
|
+
}
|
|
48
|
+
for (let i = 0; i < 100; i++) {
|
|
49
|
+
contacts.push(generateContact());
|
|
50
|
+
};
|
|
51
|
+
</script>
|
|
13
52
|
</head>
|
|
14
53
|
<body>
|
|
15
54
|
<k-import src="../nav.inc.html"></k-import>
|
|
55
|
+
<h1 class="ta-center">Table</h1>
|
|
16
56
|
<main>
|
|
17
|
-
<h1>watchWindowSize</h1>
|
|
18
|
-
|
|
19
57
|
<details
|
|
20
58
|
class="b r mb"
|
|
21
59
|
>
|
|
22
60
|
<summary class="p">Table of Contents</summary>
|
|
23
61
|
<div class="m mt0 pl">
|
|
24
|
-
<h6>
|
|
62
|
+
<h6>Examples</h6>
|
|
25
63
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
-
<a href="
|
|
27
|
-
<a href="
|
|
64
|
+
<a href="tableCustomFields.html">Custom Fields</a><br />
|
|
65
|
+
<a href="tableControls.html">Top and Bottom Controls</a><br />
|
|
66
|
+
<a href="tableRowControls.html">Row Controls</a><br />
|
|
67
|
+
<a href="tablePagination.html">Pagination</a><br />
|
|
68
|
+
<a href="tableRecordSelection.html">Record Selection</a><br />
|
|
69
|
+
<a href="tableRecordEditing.html">Record Editing</a><br />
|
|
70
|
+
<a href="tableRecordHiding.html">Record Hiding</a><br />
|
|
71
|
+
<a href="tableRecordFiltering.html">Record Filtering</a><br />
|
|
72
|
+
<a href="tableRecordSearching.html">Record Searching</a><br />
|
|
73
|
+
<a href="tableSorting.html">Sorting</a><br />
|
|
74
|
+
<a href="tableFieldSortHide.html">Field Sorting and Hiding</a><br />
|
|
75
|
+
<a href="tableFetchRecords.html">Fetching Records</a><br />
|
|
76
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
77
|
+
<a href="#constructor">Constructor</a><br />
|
|
78
|
+
<a href="#requirements">Requirements</a><br />
|
|
79
|
+
<a href="#properties">Properties</a><br />
|
|
80
|
+
<a href="#methods">Methods</a><br />
|
|
28
81
|
</div>
|
|
29
82
|
</details>
|
|
30
83
|
|
|
31
84
|
<h3>Description</h3>
|
|
32
|
-
<p>The <code
|
|
85
|
+
<p>The <code><k-table></code> component is used to render data into a <code><table></code> using JavaScript.</p>
|
|
33
86
|
|
|
34
87
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
35
|
-
<p>
|
|
36
|
-
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { watchWindowSize, unwatchWindowSize } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils/watchWindowSize.js'</span>;<br /><br /><span class="hljs-keyword">const</span> handler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Window width:'</span>, width);<br />};<br /><br /><span class="hljs-comment">// Start watching</span><br /><span class="hljs-keyword">const</span> currentWidth = watchWindowSize(handler);<br /><br /><span class="hljs-comment">// Stop watching when done</span><br />unwatchWindowSize(handler);</code></pre>
|
|
37
|
-
|
|
38
|
-
<h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
|
|
88
|
+
<p>In HTML create a <code><k-table></code>, and then in JavaScript call the <code>setData</code> method passing in an options object containing your data.</p>
|
|
39
89
|
|
|
40
|
-
<
|
|
41
|
-
<
|
|
90
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"basicUsageExample"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-table</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'basicUsageExample'</span>).setData({<br /> records: [<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Dustin"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(111) 111-1111"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"dustin@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Male"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Kayla"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(222) 222-2222"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"kayla@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Female"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Alexander"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(333) 333-33333"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"alex@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Male"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Amelia"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(444) 444-44444"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"amelia@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Female"</span><br /> },<br /> ]<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
91
|
+
<k-table id="basicUsageExample"></k-table>
|
|
92
|
+
<script type="module">
|
|
93
|
+
document.getElementById('basicUsageExample').setData({
|
|
94
|
+
records: [
|
|
95
|
+
{
|
|
96
|
+
name: "Dustin",
|
|
97
|
+
phoneNumber: "(111) 111-1111",
|
|
98
|
+
emailAddress: "dustin@mailserver.com",
|
|
99
|
+
gender: "Male"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
name: "Kayla",
|
|
103
|
+
phoneNumber: "(222) 222-2222",
|
|
104
|
+
emailAddress: "kayla@mailserver.com",
|
|
105
|
+
gender: "Female"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
name: "Alexander",
|
|
109
|
+
phoneNumber: "(333) 333-33333",
|
|
110
|
+
emailAddress: "alex@mailserver.com",
|
|
111
|
+
gender: "Male"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
name: "Amelia",
|
|
115
|
+
phoneNumber: "(444) 444-44444",
|
|
116
|
+
emailAddress: "amelia@mailserver.com",
|
|
117
|
+
gender: "Female"
|
|
118
|
+
},
|
|
119
|
+
]
|
|
120
|
+
});
|
|
121
|
+
</script>
|
|
122
|
+
|
|
123
|
+
<h3>Examples</h3>
|
|
42
124
|
<ul>
|
|
43
|
-
<li><
|
|
44
|
-
<li><
|
|
125
|
+
<li><a href="tableCustomFields.html">Custom Fields Example</a></li>
|
|
126
|
+
<li><a href="tableControls.html">Top and Bottom Controls</a></li>
|
|
127
|
+
<li><a href="tableRowControls.html">Row Controls</a></li>
|
|
128
|
+
<li><a href="tablePagination.html">Pagination</a></li>
|
|
129
|
+
<li><a href="tableRecordSelection.html">Record Selection</a></li>
|
|
130
|
+
<li><a href="tableRecordEditing.html">Record Editing</a></li>
|
|
131
|
+
<li><a href="tableRecordHiding.html">Record Hiding</a></li>
|
|
132
|
+
<li><a href="tableRecordFiltering.html">Record Filtering</a></li>
|
|
133
|
+
<li><a href="tableRecordSearching.html">Record Searching</a></li>
|
|
134
|
+
<li><a href="tableSorting.html">Sorting</a></li>
|
|
135
|
+
<li><a href="tableFieldSortHide.html">Field Sorting and Hiding</a></li>
|
|
136
|
+
<li><a href="tableFetchRecords.html">Fetching Records</a></li>
|
|
45
137
|
</ul>
|
|
46
138
|
|
|
47
|
-
<
|
|
48
|
-
<
|
|
139
|
+
<br />
|
|
140
|
+
<hr class="my" />
|
|
141
|
+
|
|
142
|
+
<h2>JavaScript Reference</h2>
|
|
143
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
144
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
145
|
+
<h5>
|
|
146
|
+
<code>new Table()</code><br />
|
|
147
|
+
<code>new Table(<i><Array>object</i> options)</code>
|
|
148
|
+
</h5>
|
|
149
|
+
|
|
150
|
+
<h4>Parameters</h4>
|
|
151
|
+
<h5><code><i>object</i> options</code></h5>
|
|
152
|
+
<p>An object containing the initial configuration for the table. The options object can contain the following properties:</p>
|
|
49
153
|
<ul>
|
|
50
|
-
<li><
|
|
154
|
+
<li><code>records</code>: An array of objects representing the records to be shown in the table.</li>
|
|
155
|
+
<li><code>fields</code>: An array of objects representing the fields of the table, each object must contain a <code>name</code> and a <code>label</code>. If this property is omitted, the fields will be automatically generated from the first 100 records.</li>
|
|
156
|
+
<li><code>controls</code>: An object containing optional arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. The <code>controls</code> object can contain the optional <code>before</code> and <code>after</code> properties, which are arrays of objects containing the <code>icon</code> (string), <code>action</code> (function), <code>html</code> (string), and <code>render</code> (function). If <code>html</code> is present, it overrides the icon and is rendered in its place. If <code>render</code> is present, it is used to render the control.</li>
|
|
157
|
+
<li><code>pageSize</code>: The number of records to display per page.</li>
|
|
158
|
+
<li><code>pageSizeOptions</code>: An array of numbers representing the available page size options.</li>
|
|
51
159
|
</ul>
|
|
52
160
|
|
|
53
|
-
<h3 id="
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
161
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
162
|
+
<ul>
|
|
163
|
+
<li><a href="../utils/string.html"><code>toTitleCase</code> <i>from string.js</i></a></li>
|
|
164
|
+
</ul>
|
|
165
|
+
|
|
166
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
167
|
+
<h5><code>fields<i>: <Array>object</i></code></h5>
|
|
168
|
+
<p>An array of objects containing a <code>name</code>, <code>label</code>, <code>renderer</code> function, and <code>calculator</code> function that represent the fields to be displayed. The <code>renderer</code> function can be used to customize the display of the field, and the <code>calculator</code> function can be used to calculate the value of the field based on other fields in the record.</p>
|
|
169
|
+
|
|
170
|
+
<h5><code>records<i>: <Array>object</i></code></h5>
|
|
171
|
+
<p>An array of objects containing the data that will be the records of the table, where the object keys match the field names.</p>
|
|
172
|
+
|
|
173
|
+
<h5><code>controls<i>: object</i></code></h5>
|
|
174
|
+
<p>An object containing optional arrays of controls to be displayed before and/or after each row, or above and below the table. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. The <code>controls</code> object can contain the optional <code>before</code>, <code>after</code>, <code>top</code>, and <code>bottom</code> properties, which are arrays of objects containing the <code>icon</code> (string), <code>action</code> (function), <code>html</code> (string), and <code>render</code> (function). If <code>html</code> is present, it overrides the icon and is rendered in its place. If <code>render</code> is present, it is used to render the control. Controls in the <code>before</code> or <code>after</code> arrays receive the record and index as the 2nd and 3rd parameters in the action function and the renderer function.</p>
|
|
175
|
+
|
|
176
|
+
<h5><code>pageSize<i>: number</i></code></h5>
|
|
177
|
+
<p>The number of records to display per page.</p>
|
|
178
|
+
|
|
179
|
+
<h5><code>pageSizeOptions<i>: <Array>number</i></code></h5>
|
|
180
|
+
<p>An array of numbers representing the available page size options.</p>
|
|
181
|
+
|
|
182
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
183
|
+
|
|
184
|
+
<h5><code>setData(<i>object</i> options)<i>: undefined</i></code></h5>
|
|
185
|
+
<p>Sets the records and the fields and renders the table. If no fields are provided, they will be automatically generated from the keys of the first 100 records. The options object can contain the following properties:</p>
|
|
186
|
+
<ul>
|
|
187
|
+
<li><code>records</code>: An array of objects representing the records to be shown in the table.</li>
|
|
188
|
+
<li><code>fields</code>: An array of objects representing the fields of the table, each object must contain a <code>name</code> and a <code>label</code>. If this property is omitted, the fields will be automatically generated from the first 100 records.</li>
|
|
189
|
+
<li><code>filters</code>: An array of filter objects to apply to the records.</li>
|
|
190
|
+
<li><code>pageSize</code>: The number of records to display per page.</li>
|
|
191
|
+
<li><code>pageSizeOptions</code>: An array of numbers representing the available page size options.</li>
|
|
192
|
+
<li><code>currentPage</code>: The current page to display.</li>
|
|
193
|
+
<li><code>enableSelection</code>: A boolean to enable or disable record selection.</li>
|
|
194
|
+
<li><code>enablePages</code>: A boolean to enable or disable pagination.</li>
|
|
195
|
+
</ul>
|
|
196
|
+
|
|
197
|
+
<h5><code>renderFields()<i>: undefined</i></code></h5>
|
|
198
|
+
<p>Renders the fields as table headers. This is called automatically by setData, you should never have to call it.</p>
|
|
199
|
+
|
|
200
|
+
<h5><code>renderRecords()<i>: undefined</i></code></h5>
|
|
201
|
+
<p>Renders the records as table rows. This is called automatically by setData, you should never have to call it.</p>
|
|
202
|
+
|
|
203
|
+
<h5><code>addRecord(<i>object</i> record)<i>: undefined</i></code></h5>
|
|
204
|
+
<p>Adds a new record to the table.</p>
|
|
205
|
+
|
|
206
|
+
<h5><code>updateRecord(<i>object</i> record, <i>object</i> newData)<i>: undefined</i></code></h5>
|
|
207
|
+
<p>Updates an existing record with new data.</p>
|
|
208
|
+
|
|
209
|
+
<h5><code>deleteRecord(<i>object</i> record)<i>: undefined</i></code></h5>
|
|
210
|
+
<p>Deletes a record from the table.</p>
|
|
211
|
+
|
|
212
|
+
<h5><code>setRecords(<i>Array</i> records)<i>: undefined</i></code></h5>
|
|
213
|
+
<p>Sets the records for the table and re-renders the rows.</p>
|
|
214
|
+
|
|
215
|
+
<h5><code>setPageSize(<i>number</i> pageSize)<i>: undefined</i></code></h5>
|
|
216
|
+
<p>Sets the number of records to display per page.</p>
|
|
217
|
+
|
|
218
|
+
<h5><code>setPage(<i>number</i> page)<i>: undefined</i></code></h5>
|
|
219
|
+
<p>Sets the current page to display.</p>
|
|
220
|
+
|
|
221
|
+
<h5><code>nextPage()<i>: undefined</i></code></h5>
|
|
222
|
+
<p>Moves to the next page.</p>
|
|
223
|
+
|
|
224
|
+
<h5><code>prevPage()<i>: undefined</i></code></h5>
|
|
225
|
+
<p>Moves to the previous page.</p>
|
|
226
|
+
|
|
227
|
+
<h5><code>getCurrentPage()<i>: number</i></code></h5>
|
|
228
|
+
<p>Returns the current page number.</p>
|
|
229
|
+
|
|
230
|
+
<h5><code>getTotalPages()<i>: number</i></code></h5>
|
|
231
|
+
<p>Returns the total number of pages.</p>
|
|
232
|
+
|
|
233
|
+
<h5><code>getSelectedRecords()<i>: Array</i></code></h5>
|
|
234
|
+
<p>Returns an array of the currently selected records.</p>
|
|
235
|
+
|
|
236
|
+
<h5><code>deleteSelected()<i>: undefined</i></code></h5>
|
|
237
|
+
<p>Deletes all currently selected records from the table.</p>
|
|
238
|
+
|
|
239
|
+
<h5><code>selectAllOnPage()<i>: undefined</i></code></h5>
|
|
240
|
+
<p>Selects all the records on the current page.</p>
|
|
241
|
+
|
|
242
|
+
<h5><code>deselectAllOnPage()<i>: undefined</i></code></h5>
|
|
243
|
+
<p>Deselects all the records on the current page.</p>
|
|
244
|
+
|
|
245
|
+
<h5><code>allOnPageSelected()<i>: boolean</i></code></h5>
|
|
246
|
+
<p>Returns <code>true</code> if all the records on the current page are selected, and <code>false</code> if they are not.</p>
|
|
247
|
+
|
|
248
|
+
<h5><code>editRecord(<i>object</i> record)<i>: undefined</i></code></h5>
|
|
249
|
+
<p>Enables editing mode for a record.</p>
|
|
250
|
+
|
|
251
|
+
<h5><code>saveEditedRecord(<i>object</i> record)<i>: undefined</i></code></h5>
|
|
252
|
+
<p>Saves the changes made to an edited record.</p>
|
|
253
|
+
|
|
254
|
+
<h5><code>cancelEditedRecord(<i>object</i> record)<i>: undefined</i></code></h5>
|
|
255
|
+
<p>Cancels the editing mode for a record.</p>
|
|
256
|
+
|
|
257
|
+
<h5><code>recordIsEditing(<i>object</i> record)<i>: boolean</i></code></h5>
|
|
258
|
+
<p>Returns <code>true</code> if the record is in editing mode, and <code>false</code> if it is not.</p>
|
|
259
|
+
|
|
260
|
+
<h5><code>hideRecord(<i>object</i> record)<i>: undefined</i></code></h5>
|
|
261
|
+
<p>Hides a record from the table.</p>
|
|
262
|
+
|
|
263
|
+
<h5><code>showRecord(<i>object</i> record)<i>: undefined</i></code></h5>
|
|
264
|
+
<p>Shows a hidden record in the table.</p>
|
|
265
|
+
|
|
266
|
+
<h5><code>showAllRecords()<i>: undefined</i></code></h5>
|
|
267
|
+
<p>Shows all hidden records in the table.</p>
|
|
268
|
+
|
|
269
|
+
<h5><code>addFilter(<i>string</i> field, <i>string</i> condition, <i>any</i> value)<i>: undefined</i></code></h5>
|
|
270
|
+
<p>Adds a filter to the table.</p>
|
|
271
|
+
|
|
272
|
+
<h5><code>removeFilter(<i>string</i> field, <i>string</i> condition, <i>any</i> value)<i>: undefined</i></code></h5>
|
|
273
|
+
<p>Removes a filter from the table.</p>
|
|
274
|
+
|
|
275
|
+
<h5><code>removeAllFilters()<i>: undefined</i></code></h5>
|
|
276
|
+
<p>Removes all filters from the table.</p>
|
|
277
|
+
|
|
278
|
+
<h5><code>search(<i>string</i> term)<i>: undefined</i></code></h5>
|
|
279
|
+
<p>Searches the records for the specified term.</p>
|
|
280
|
+
|
|
281
|
+
<h5><code>getDisplayedRecords()<i>: Array</i></code></h5>
|
|
282
|
+
<p>Returns an array of the records currently displayed in the table.</p>
|
|
283
|
+
|
|
284
|
+
<h5><code>getHiddenRecords()<i>: Array</i></code></h5>
|
|
285
|
+
<p>Returns an array of the hidden records in the table.</p>
|
|
286
|
+
|
|
287
|
+
<h5><code>setupFetchRecords(<i>number</i> totalRecords, <i>function</i> callback)<i>: undefined</i></code></h5>
|
|
288
|
+
<p>Sets up the table to fetch records dynamically.</p>
|
|
289
|
+
|
|
290
|
+
<h5><code>sortBy(<i>string</i> field, <i>boolean</i> asc)<i>: undefined</i></code></h5>
|
|
291
|
+
<p>Sorts the records by the specified field in ascending or descending order.</p>
|
|
292
|
+
|
|
293
|
+
<h5><code>setFieldHiddenState(<i>string</i> fieldName, <i>boolean</i> hidden)<i>: undefined</i></code></h5>
|
|
294
|
+
<p>Sets the hidden state of a field.</p>
|
|
57
295
|
|
|
58
|
-
<
|
|
59
|
-
<
|
|
296
|
+
<h5><code>hideField(<i>string</i> fieldName)<i>: undefined</i></code></h5>
|
|
297
|
+
<p>Hides a field in the table.</p>
|
|
60
298
|
|
|
61
|
-
<
|
|
62
|
-
<
|
|
299
|
+
<h5><code>showField(<i>string</i> fieldName)<i>: undefined</i></code></h5>
|
|
300
|
+
<p>Shows a hidden field in the table.</p>
|
|
63
301
|
|
|
64
|
-
<
|
|
65
|
-
<p>
|
|
66
|
-
<pre><code class="hljs javascript"><span class="hljs-comment">// This handler will only be called after resize events stop</span><br /><span class="hljs-keyword">const</span> expensiveHandler = <span class="hljs-function">(<span class="hljs-params">width</span>) =></span> {<br /> <span class="hljs-comment">// Expensive DOM calculations or API calls</span><br /> recalculateLayout();<br /> updateCharts();<br /> reflow();<br />};<br /><br />watchWindowSize(expensiveHandler); <span class="hljs-comment">// Automatically debounced</span></code></pre>
|
|
302
|
+
<h5><code>reorderFields(<i>Array</i> newOrder)<i>: undefined</i></code></h5>
|
|
303
|
+
<p>Reorders the fields in the table based on the new order array.</p>
|
|
67
304
|
|
|
68
305
|
</main>
|
|
69
|
-
<div style="height:
|
|
306
|
+
<div style="height: 33.333vh"></div>
|
|
307
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
70
308
|
</body>
|
|
71
|
-
</html>
|
|
309
|
+
</html>
|