kempo 2.9.4 → 2.10.0
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/dist/components/Dialog.js +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/Search.js +1 -1
- package/dist/components/Table.js +1 -1
- package/dist/components/tableControls/DeleteSelected.js +1 -1
- package/dist/components/tableControls/Edit.js +1 -0
- package/dist/components/tableControls/Filters.js +1 -0
- package/dist/components/tableControls/HiddenCount.js +1 -0
- package/dist/components/tableControls/Hide.js +1 -0
- package/dist/components/tableControls/PageSelect.js +1 -1
- package/dist/components/tableControls/PageSize.js +1 -1
- package/dist/components/tableControls/ShowAll.js +1 -0
- package/dist/index.js +1 -1
- package/dist/kempo-styles.css +1 -1
- package/dist/kempo-vars.css +1 -1
- package/docs/components/table.html +82 -181
- package/docs/components/tableControls.html +91 -0
- package/docs/components/tableCustomFields.html +112 -0
- package/docs/components/tablePagination.html +92 -0
- package/docs/components/tableRecordEditing.html +144 -0
- package/docs/components/tableRecordFiltering.html +82 -0
- package/docs/components/tableRecordHiding.html +84 -0
- package/docs/components/tableRecordSelection.html +86 -0
- package/docs/components/tableRowControls.html +103 -0
- package/docs/icons/check.svg +1 -0
- package/docs/icons/hide.svg +1 -0
- package/docs/icons/show.svg +1 -0
- package/docs/kempo/components/Dialog.js +1 -1
- package/docs/kempo/components/Icon.js +1 -1
- package/docs/kempo/components/Search.js +1 -1
- package/docs/kempo/components/Table.js +1 -1
- package/docs/kempo/components/tableControls/DeleteSelected.js +1 -1
- package/docs/kempo/components/tableControls/Edit.js +1 -0
- package/docs/kempo/components/tableControls/Filters.js +1 -0
- package/docs/kempo/components/tableControls/HiddenCount.js +1 -0
- package/docs/kempo/components/tableControls/Hide.js +1 -0
- package/docs/kempo/components/tableControls/PageSelect.js +1 -1
- package/docs/kempo/components/tableControls/PageSize.js +1 -1
- package/docs/kempo/components/tableControls/ShowAll.js +1 -0
- package/docs/kempo/index.js +1 -1
- package/docs/kempo/kempo-styles.css +1 -1
- package/docs/kempo/kempo-vars.css +1 -1
- package/icons/check.svg +1 -0
- package/icons/hide.svg +1 -0
- package/icons/show.svg +1 -0
- package/package.json +1 -1
- package/src/components/Dialog.js +12 -4
- package/src/components/Icon.js +3 -1
- package/src/components/Table.js +469 -139
- package/src/components/tableControls/DeleteSelected.js +36 -22
- package/src/components/tableControls/Edit.js +88 -0
- package/src/components/tableControls/Filters.js +128 -0
- package/src/components/tableControls/HiddenCount.js +42 -0
- package/src/components/tableControls/Hide.js +43 -0
- package/src/components/tableControls/PageSelect.js +54 -30
- package/src/components/tableControls/PageSize.js +33 -16
- package/src/components/tableControls/ShowAll.js +40 -0
- package/src/kempo-styles.css +7 -0
- package/src/kempo-vars.css +2 -0
|
@@ -0,0 +1,92 @@
|
|
|
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>Pagination - Table - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
10
|
+
<script type="module" src="../kempo/components/Table.js"></script>
|
|
11
|
+
<script type="module">
|
|
12
|
+
import Icon from '../kempo/components/Icon.js';
|
|
13
|
+
import Search from '../kempo/components/Search.js';
|
|
14
|
+
Icon.pathToIcons = ['../icons'];
|
|
15
|
+
Search.searchDataUrl = '../search.json';
|
|
16
|
+
</script>
|
|
17
|
+
<script>
|
|
18
|
+
window.contacts = [];
|
|
19
|
+
function generateContact(){
|
|
20
|
+
const maleNames = [
|
|
21
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
22
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
23
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
24
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
25
|
+
"Wyatt", "Matthew"
|
|
26
|
+
];
|
|
27
|
+
const femaleNames = [
|
|
28
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
29
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
30
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
31
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
32
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
33
|
+
];
|
|
34
|
+
const lastNames = [
|
|
35
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
36
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
37
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
38
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
39
|
+
"Ramirez", "Lewis", "Robinson"
|
|
40
|
+
];
|
|
41
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
42
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
43
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
44
|
+
const name = `${firstName} ${lastName}`;
|
|
45
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
46
|
+
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')}`;
|
|
47
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
48
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
49
|
+
}
|
|
50
|
+
for (let i = 0; i < 100; i++) {
|
|
51
|
+
contacts.push(generateContact());
|
|
52
|
+
};
|
|
53
|
+
</script>
|
|
54
|
+
</head>
|
|
55
|
+
<body>
|
|
56
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
57
|
+
<h1 class="ta-center">Table - Pagination</h1>
|
|
58
|
+
<main>
|
|
59
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
60
|
+
<p>The table component supports pagination. You can set the page size and navigate through pages using the provided methods.</p>
|
|
61
|
+
<p>There are some predefined controls that you can use directly from <code>Table.controls</code>. These controls include:</p>
|
|
62
|
+
<ul>
|
|
63
|
+
<li><code>prevPage</code>: A control to navigate to the previous page.</li>
|
|
64
|
+
<li><code>nextPage</code>: A control to navigate to the next page.</li>
|
|
65
|
+
<li><code>pageSelect</code>: A control to select a specific page.</li>
|
|
66
|
+
<li><code>pageSize</code>: A control to select the number of records per page.</li>
|
|
67
|
+
</ul>
|
|
68
|
+
<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">"paginationExample"</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-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../kempo/components/Table.js'</span>;<br /> <span class="hljs-keyword">const</span> $paginationExample = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'paginationExample'</span>);<br /> $paginationExample.setData({<br /> <span class="hljs-attr">records</span>: contacts,<br /> <span class="hljs-attr">controls</span>: {<br /> <span class="hljs-attr">bottom</span>: [<br /> Table.controls.prevPage,<br /> Table.controls.nextPage,<br /> Table.controls.pageSelect,<br /> Table.controls.spacer,<br /> Table.controls.pageSize<br /> ]<br /> },<br /> <span class="hljs-attr">pageSize</span>: <span class="hljs-number">10</span>,<br /> <span class="hljs-attr">pageSizeOptions</span>: [<span class="hljs-number">5</span>, <span class="hljs-number">10</span>, <span class="hljs-number">20</span>]<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
69
|
+
<k-table id="paginationExample"></k-table>
|
|
70
|
+
<script type="module">
|
|
71
|
+
import Table from '../kempo/components/Table.js';
|
|
72
|
+
const $paginationExample = document.getElementById('paginationExample');
|
|
73
|
+
$paginationExample.setData({
|
|
74
|
+
records: contacts,
|
|
75
|
+
controls: {
|
|
76
|
+
bottom: [
|
|
77
|
+
Table.controls.prevPage,
|
|
78
|
+
Table.controls.nextPage,
|
|
79
|
+
Table.controls.pageSelect,
|
|
80
|
+
Table.controls.spacer,
|
|
81
|
+
Table.controls.pageSize
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
pageSize: 10,
|
|
85
|
+
pageSizeOptions: [5, 10, 20]
|
|
86
|
+
});
|
|
87
|
+
</script>
|
|
88
|
+
</main>
|
|
89
|
+
<div style="height: 33.333vh"></div>
|
|
90
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
91
|
+
</body>
|
|
92
|
+
</html>
|
|
@@ -0,0 +1,144 @@
|
|
|
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>Record Editing - Table - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
10
|
+
<script type="module" src="../kempo/components/Table.js"></script>
|
|
11
|
+
<script type="module">
|
|
12
|
+
import Icon from '../kempo/components/Icon.js';
|
|
13
|
+
import Search from '../kempo/components/Search.js';
|
|
14
|
+
Icon.pathToIcons = ['../icons'];
|
|
15
|
+
Search.searchDataUrl = '../search.json';
|
|
16
|
+
</script>
|
|
17
|
+
<script>
|
|
18
|
+
window.contacts = [];
|
|
19
|
+
function generateContact(){
|
|
20
|
+
const maleNames = [
|
|
21
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
22
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
23
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
24
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
25
|
+
"Wyatt", "Matthew"
|
|
26
|
+
];
|
|
27
|
+
const femaleNames = [
|
|
28
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
29
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
30
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
31
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
32
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
33
|
+
];
|
|
34
|
+
const lastNames = [
|
|
35
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
36
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
37
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
38
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
39
|
+
"Ramirez", "Lewis", "Robinson"
|
|
40
|
+
];
|
|
41
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
42
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
43
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
44
|
+
const name = `${firstName} ${lastName}`;
|
|
45
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
46
|
+
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')}`;
|
|
47
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
48
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
49
|
+
}
|
|
50
|
+
for (let i = 0; i < 10; i++) {
|
|
51
|
+
contacts.push(generateContact());
|
|
52
|
+
};
|
|
53
|
+
</script>
|
|
54
|
+
</head>
|
|
55
|
+
<body>
|
|
56
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
57
|
+
<h1 class="ta-center">Table - Record Editing</h1>
|
|
58
|
+
<main>
|
|
59
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
60
|
+
|
|
61
|
+
<p>The table component supports record editing. To allow for editing add the "edit" control to the "before" or "after" controls. You may define a "type" on the field, which will tell the table to use a specific editor for that field. If you do not define a "type" it will attempt to find the correct type using the value.</p>
|
|
62
|
+
<p>You can also define a custom editor by adding a generator function to the <code>Table.editors</code> object that will generate an input (or select). This will be global to all tables on the page.</p>
|
|
63
|
+
<p>You can also define a custom editor on a per-field basis by adding an "editor" generator function to the field object. This will override the global editor for that field.</p>
|
|
64
|
+
<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">"recordEditingExample"</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-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../kempo/components/Table.js'</span>;<br /> Table.editors.tel = <span class="hljs-function">(<span class="hljs-params">v</span>) =></span> {<br /> <span class="hljs-keyword">const</span> $input = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"input"</span>);<br /> $input.value = v;<br /> $input.addEventListener(<span class="hljs-string">'change'</span>, () => {<br /> $input.value = $input.value.replace(<span class="hljs-regexp">/\D/g</span>, <span class="hljs-string">''</span>); <span class="hljs-comment">// Remove all non-digit characters</span><br /> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">7</span>) {<br /> $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{4})/</span>, <span class="hljs-string">'$1-$2'</span>);<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">10</span>) {<br /> $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{3})(\d{4})/</span>, <span class="hljs-string">'($1) $2-$3'</span>);<br /> } <span class="hljs-keyword">else</span> {<br /> $input.value = v; <span class="hljs-comment">// Reset to default value if not 7 or 10 digits</span><br /> }<br /> });<br /> <span class="hljs-keyword">return</span> $input;<br /> };<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordEditingExample'</span>).setData({<br /> <span class="hljs-attr">records</span>: contacts,<br /> <span class="hljs-attr">fields</span>: [<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"name"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Name"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"email"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Email"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"birthday"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Birthday"</span>,<br /> <span class="hljs-attr">type</span>: <span class="hljs-string">"date"</span>,<br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"phoneNumber"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Phone Number"</span>,<br /> <span class="hljs-attr">type</span>: <span class="hljs-string">"tel"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"age"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Age"</span>,<br /> <span class="hljs-attr">calculator</span>: <span class="hljs-function">(<span class="hljs-params">record</span>) =></span> {<br /> <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br /> <span class="hljs-keyword">const</span> birthDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(record.birthday);<br /> <span class="hljs-keyword">let</span> age = today.getFullYear() - birthDate.getFullYear();<br /> <span class="hljs-keyword">const</span> monthDifference = today.getMonth() - birthDate.getMonth();<br /> <span class="hljs-keyword">if</span> (monthDifference < <span class="hljs-number">0</span> || (monthDifference === <span class="hljs-number">0</span> && today.getDate() < birthDate.getDate())) {<br /> age--;<br /> }<br /> <span class="hljs-keyword">return</span> age;<br /> }<br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"gender"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Gender"</span>,<br /> <span class="hljs-attr">formatter</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =></span> v === <span class="hljs-string">"m"</span> ? <span class="hljs-string">"Male"</span> : <span class="hljs-string">"Female"</span>,<br /> <span class="hljs-attr">editor</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =></span> {<br /> <span class="hljs-keyword">const</span> $select = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"select"</span>);<br /> $select.innerHTML = <span class="hljs-string">`<br /> <option value="m">Male</option><br /> <option value="f">Female</option><br /> `</span>;<br /> $select.value = v;<br /> <span class="hljs-keyword">return</span> $select;<br /> }<br /> }<br /> ],<br /> <span class="hljs-attr">controls</span>: {<br /> <span class="hljs-attr">after</span>: [<br /> Table.controls.edit,<br /> ]<br /> }<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
65
|
+
<k-table id="recordEditingExample"></k-table>
|
|
66
|
+
<script type="module">
|
|
67
|
+
import Table from '../kempo/components/Table.js';
|
|
68
|
+
Table.editors.tel = (v) => {
|
|
69
|
+
const $input = document.createElement("input");
|
|
70
|
+
$input.value = v;
|
|
71
|
+
$input.addEventListener('change', () => {
|
|
72
|
+
$input.value = $input.value.replace(/\D/g, ''); // Remove all non-digit characters
|
|
73
|
+
if ($input.value.length === 7) {
|
|
74
|
+
$input.value = $input.value.replace(/(\d{3})(\d{4})/, '$1-$2');
|
|
75
|
+
} else if ($input.value.length === 10) {
|
|
76
|
+
$input.value = $input.value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
|
77
|
+
} else {
|
|
78
|
+
$input.value = v; // Reset to default value if not 7 or 10 digits
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
return $input;
|
|
82
|
+
};
|
|
83
|
+
document.getElementById('recordEditingExample').setData({
|
|
84
|
+
records: contacts,
|
|
85
|
+
fields: [
|
|
86
|
+
{
|
|
87
|
+
name: "name",
|
|
88
|
+
label: "Name"
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
name: "email",
|
|
92
|
+
label: "Email"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
name: "birthday",
|
|
96
|
+
label: "Birthday",
|
|
97
|
+
type: "date",
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
name: "phoneNumber",
|
|
101
|
+
label: "Phone Number",
|
|
102
|
+
type: "tel"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
name: "age",
|
|
106
|
+
label: "Age",
|
|
107
|
+
calculator: (record) => {
|
|
108
|
+
const today = new Date();
|
|
109
|
+
const birthDate = new Date(record.birthday);
|
|
110
|
+
let age = today.getFullYear() - birthDate.getFullYear();
|
|
111
|
+
const monthDifference = today.getMonth() - birthDate.getMonth();
|
|
112
|
+
if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
|
|
113
|
+
age--;
|
|
114
|
+
}
|
|
115
|
+
return age;
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
name: "gender",
|
|
120
|
+
label: "Gender",
|
|
121
|
+
formatter: (v) => v === "m" ? "Male" : "Female",
|
|
122
|
+
editor: (v) => {
|
|
123
|
+
const $select = document.createElement("select");
|
|
124
|
+
$select.innerHTML = `
|
|
125
|
+
<option value="m">Male</option>
|
|
126
|
+
<option value="f">Female</option>
|
|
127
|
+
`;
|
|
128
|
+
$select.value = v;
|
|
129
|
+
return $select;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
controls: {
|
|
134
|
+
after: [
|
|
135
|
+
Table.controls.edit,
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
</script>
|
|
140
|
+
</main>
|
|
141
|
+
<div style="height: 33.333vh"></div>
|
|
142
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
143
|
+
</body>
|
|
144
|
+
</html>
|
|
@@ -0,0 +1,82 @@
|
|
|
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>Record Filtering - Table - Kempo Docs</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
10
|
+
<script type="module" src="../kempo/components/Table.js"></script>
|
|
11
|
+
<script type="module">
|
|
12
|
+
import Icon from '../kempo/components/Icon.js';
|
|
13
|
+
import Search from '../kempo/components/Search.js';
|
|
14
|
+
Icon.pathToIcons = ['../icons'];
|
|
15
|
+
Search.searchDataUrl = '../search.json';
|
|
16
|
+
</script>
|
|
17
|
+
<script>
|
|
18
|
+
window.contacts = [];
|
|
19
|
+
function generateContact(){
|
|
20
|
+
const maleNames = [
|
|
21
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
22
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
23
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
24
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
25
|
+
"Wyatt", "Matthew"
|
|
26
|
+
];
|
|
27
|
+
const femaleNames = [
|
|
28
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
29
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
30
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
31
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
32
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
33
|
+
];
|
|
34
|
+
const lastNames = [
|
|
35
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
36
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
37
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
38
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
39
|
+
"Ramirez", "Lewis", "Robinson"
|
|
40
|
+
];
|
|
41
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
42
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
43
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
44
|
+
const name = `${firstName} ${lastName}`;
|
|
45
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
46
|
+
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')}`;
|
|
47
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
48
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
49
|
+
}
|
|
50
|
+
for (let i = 0; i < 10; i++) {
|
|
51
|
+
contacts.push(generateContact());
|
|
52
|
+
};
|
|
53
|
+
</script>
|
|
54
|
+
</head>
|
|
55
|
+
<body>
|
|
56
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
57
|
+
<h1 class="ta-center">Table - Record Filerting</h1>
|
|
58
|
+
<main>
|
|
59
|
+
|
|
60
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
61
|
+
|
|
62
|
+
<p>Record filtering is a feature that allows users to filter the records displayed in the table. The table component provides a filter control that can be used to filter records based on the values in the columns. This control uses a Dialog to display the current filters and allows the user to create filters.</p>
|
|
63
|
+
<p>It is not recommended to use both filters and hidden records in the same table, as you will know know why a specific record is hidden, or how to reshow it.</p>
|
|
64
|
+
<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">"recordHidingExample"</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-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../kempo/components/Table.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordHidingExample'</span>).setData({<br /> <span class="hljs-attr">records</span>: contacts,<br /> <span class="hljs-attr">controls</span>: {<br /> <span class="hljs-attr">top</span>: [<br /> Table.controls.filters<br /> ]<br /> }<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
65
|
+
<k-table id="recordHidingExample"></k-table>
|
|
66
|
+
<script type="module">
|
|
67
|
+
import Table from '../kempo/components/Table.js';
|
|
68
|
+
document.getElementById('recordHidingExample').setData({
|
|
69
|
+
records: contacts,
|
|
70
|
+
controls: {
|
|
71
|
+
top: [
|
|
72
|
+
Table.controls.filters
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
</main>
|
|
79
|
+
<div style="height: 33.333vh"></div>
|
|
80
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
@@ -0,0 +1,84 @@
|
|
|
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>Row Controls - Table - Kempo Docs</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
10
|
+
<script type="module" src="../kempo/components/Table.js"></script>
|
|
11
|
+
<script type="module">
|
|
12
|
+
import Icon from '../kempo/components/Icon.js';
|
|
13
|
+
import Search from '../kempo/components/Search.js';
|
|
14
|
+
Icon.pathToIcons = ['../icons'];
|
|
15
|
+
Search.searchDataUrl = '../search.json';
|
|
16
|
+
</script>
|
|
17
|
+
<script>
|
|
18
|
+
window.contacts = [];
|
|
19
|
+
function generateContact(){
|
|
20
|
+
const maleNames = [
|
|
21
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
22
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
23
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
24
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
25
|
+
"Wyatt", "Matthew"
|
|
26
|
+
];
|
|
27
|
+
const femaleNames = [
|
|
28
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
29
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
30
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
31
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
32
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
33
|
+
];
|
|
34
|
+
const lastNames = [
|
|
35
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
36
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
37
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
38
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
39
|
+
"Ramirez", "Lewis", "Robinson"
|
|
40
|
+
];
|
|
41
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
42
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
43
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
44
|
+
const name = `${firstName} ${lastName}`;
|
|
45
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
46
|
+
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')}`;
|
|
47
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
48
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
49
|
+
}
|
|
50
|
+
for (let i = 0; i < 10; i++) {
|
|
51
|
+
contacts.push(generateContact());
|
|
52
|
+
};
|
|
53
|
+
</script>
|
|
54
|
+
</head>
|
|
55
|
+
<body>
|
|
56
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
57
|
+
<h1 class="ta-center">Table - Record Hiding</h1>
|
|
58
|
+
<main>
|
|
59
|
+
|
|
60
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
61
|
+
|
|
62
|
+
<p>The table component supports record hiding. To allow for hiding add the "hide" control to the "before" or "after" controls. There is a built-in "showAll" control that can be added to the "top" or "bottom" controls to reveal previously hidden fields.</p>
|
|
63
|
+
<k-table id="recordHidingExample"></k-table>
|
|
64
|
+
<script type="module">
|
|
65
|
+
import Table from '../kempo/components/Table.js';
|
|
66
|
+
document.getElementById('recordHidingExample').setData({
|
|
67
|
+
records: contacts,
|
|
68
|
+
controls: {
|
|
69
|
+
after: [
|
|
70
|
+
Table.controls.hide,
|
|
71
|
+
],
|
|
72
|
+
bottom: [
|
|
73
|
+
Table.controls.hiddenCount,
|
|
74
|
+
Table.controls.showAll
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
</script>
|
|
79
|
+
|
|
80
|
+
</main>
|
|
81
|
+
<div style="height: 33.333vh"></div>
|
|
82
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
83
|
+
</body>
|
|
84
|
+
</html>
|
|
@@ -0,0 +1,86 @@
|
|
|
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>Record Selection - Table - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
10
|
+
<script type="module" src="../kempo/components/Table.js"></script>
|
|
11
|
+
<script type="module">
|
|
12
|
+
import Icon from '../kempo/components/Icon.js';
|
|
13
|
+
import Search from '../kempo/components/Search.js';
|
|
14
|
+
Icon.pathToIcons = ['../icons'];
|
|
15
|
+
Search.searchDataUrl = '../search.json';
|
|
16
|
+
</script>
|
|
17
|
+
<script>
|
|
18
|
+
window.contacts = [];
|
|
19
|
+
function generateContact(){
|
|
20
|
+
const maleNames = [
|
|
21
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
22
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
23
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
24
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
25
|
+
"Wyatt", "Matthew"
|
|
26
|
+
];
|
|
27
|
+
const femaleNames = [
|
|
28
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
29
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
30
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
31
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
32
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
33
|
+
];
|
|
34
|
+
const lastNames = [
|
|
35
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
36
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
37
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
38
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
39
|
+
"Ramirez", "Lewis", "Robinson"
|
|
40
|
+
];
|
|
41
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
42
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
43
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
44
|
+
const name = `${firstName} ${lastName}`;
|
|
45
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
46
|
+
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')}`;
|
|
47
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
48
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
49
|
+
}
|
|
50
|
+
for (let i = 0; i < 100; i++) {
|
|
51
|
+
contacts.push(generateContact());
|
|
52
|
+
};
|
|
53
|
+
</script>
|
|
54
|
+
</head>
|
|
55
|
+
<body>
|
|
56
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
57
|
+
<h1 class="ta-center">Table - Record Selection</h1>
|
|
58
|
+
<main>
|
|
59
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
60
|
+
|
|
61
|
+
<p>The table component supports record selection. You can enable selection by setting the <code>enableSelection</code> property to <code>true</code>. This will add a checkbox to each row and a "Select All" checkbox to the header.</p>
|
|
62
|
+
<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">"recordSelectionExample"</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-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../kempo/components/Table.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>).setData({<br /> <span class="hljs-attr">records</span>: contacts,<br /> <span class="hljs-attr">enableSelection</span>: <span class="hljs-literal">true</span>,<br /> <span class="hljs-attr">controls</span>: {<br /> <span class="hljs-attr">bottom</span>: [<br /> Table.controls.prevPage,<br /> Table.controls.nextPage,<br /> Table.controls.pageSelect,<br /> Table.controls.spacer,<br /> Table.controls.selectCount,<br /> Table.controls.deleteSelected<br /> ]<br /> },<br /> <span class="hljs-attr">pageSize</span>: <span class="hljs-number">10</span><br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
63
|
+
<k-table id="recordSelectionExample"></k-table>
|
|
64
|
+
<script type="module">
|
|
65
|
+
import Table from '../kempo/components/Table.js';
|
|
66
|
+
document.getElementById('recordSelectionExample').setData({
|
|
67
|
+
records: contacts,
|
|
68
|
+
enableSelection: true,
|
|
69
|
+
controls: {
|
|
70
|
+
bottom: [
|
|
71
|
+
Table.controls.prevPage,
|
|
72
|
+
Table.controls.nextPage,
|
|
73
|
+
Table.controls.pageSelect,
|
|
74
|
+
Table.controls.spacer,
|
|
75
|
+
Table.controls.selectCount,
|
|
76
|
+
Table.controls.deleteSelected
|
|
77
|
+
]
|
|
78
|
+
},
|
|
79
|
+
pageSize: 10
|
|
80
|
+
});
|
|
81
|
+
</script>
|
|
82
|
+
</main>
|
|
83
|
+
<div style="height: 33.333vh"></div>
|
|
84
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
@@ -0,0 +1,103 @@
|
|
|
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>Row Controls - Table - Kempo Docs</title>
|
|
7
|
+
<link rel="stylesheet" href="../kempo/kempo-vars.css" />
|
|
8
|
+
<link rel="stylesheet" href="../kempo/kempo-styles.css" />
|
|
9
|
+
<link rel="stylesheet" href="../kempo/kempo-hljs.css" />
|
|
10
|
+
<script type="module" src="../kempo/components/Table.js"></script>
|
|
11
|
+
<script type="module">
|
|
12
|
+
import Icon from '../kempo/components/Icon.js';
|
|
13
|
+
import Search from '../kempo/components/Search.js';
|
|
14
|
+
Icon.pathToIcons = ['../icons'];
|
|
15
|
+
Search.searchDataUrl = '../search.json';
|
|
16
|
+
</script>
|
|
17
|
+
<script>
|
|
18
|
+
window.contacts = [];
|
|
19
|
+
function generateContact(){
|
|
20
|
+
const maleNames = [
|
|
21
|
+
"Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
|
|
22
|
+
"Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
|
|
23
|
+
"Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
|
|
24
|
+
"Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
|
|
25
|
+
"Wyatt", "Matthew"
|
|
26
|
+
];
|
|
27
|
+
const femaleNames = [
|
|
28
|
+
"Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
|
|
29
|
+
"Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
|
|
30
|
+
"Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
|
|
31
|
+
"Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
|
|
32
|
+
"Grace", "Nora", "Riley", "Zoey"
|
|
33
|
+
];
|
|
34
|
+
const lastNames = [
|
|
35
|
+
"Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
|
|
36
|
+
"Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
|
|
37
|
+
"Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
|
|
38
|
+
"Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
|
|
39
|
+
"Ramirez", "Lewis", "Robinson"
|
|
40
|
+
];
|
|
41
|
+
const gender = Math.random() > 0.5 ? 'm' : 'f';
|
|
42
|
+
const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
|
|
43
|
+
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
|
44
|
+
const name = `${firstName} ${lastName}`;
|
|
45
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
|
|
46
|
+
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')}`;
|
|
47
|
+
const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
|
|
48
|
+
return { name, email, birthday, phoneNumber, gender };
|
|
49
|
+
}
|
|
50
|
+
for (let i = 0; i < 5; i++) {
|
|
51
|
+
contacts.push(generateContact());
|
|
52
|
+
};
|
|
53
|
+
</script>
|
|
54
|
+
</head>
|
|
55
|
+
<body>
|
|
56
|
+
<k-import src="../nav-1.inc.html"></k-import>
|
|
57
|
+
<h1 class="ta-center">Table - Row Controls</h1>
|
|
58
|
+
<main>
|
|
59
|
+
|
|
60
|
+
<a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
|
|
61
|
+
|
|
62
|
+
<p>The table component can display controls before or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function.</p>
|
|
63
|
+
<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">"rowControlsExample"</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">'rowControlsExample'</span>).setData({<br /> <span class="hljs-attr">records</span>: contacts,<br /> <span class="hljs-attr">controls</span>: {<br /> <span class="hljs-attr">before</span>: [<br /> {<br /> <span class="hljs-attr">html</span>: <span class="hljs-string">'<span>Custom HTML</span> '</span><br /> },<br /> {<br /> <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">table, record</span>) =></span> {<br /> <span class="hljs-keyword">return</span> <span class="hljs-string">`<button onclick="alert('<span class="hljs-subst">${record.name}</span>')">Alert</button>`</span>;<br /> }<br /> }<br /> ],<br /> <span class="hljs-attr">after</span>: [<br /> {<br /> <span class="hljs-attr">icon</span>: <span class="hljs-string">'edit'</span>,<br /> <span class="hljs-attr">action</span>: <span class="hljs-function">(<span class="hljs-params">table, record</span>) =></span> {<br /> <span class="hljs-keyword">const</span> newName = prompt(<span class="hljs-string">"Enter a new name:"</span>, record.name);<br /> <span class="hljs-keyword">if</span> (newName && newName !== record.name) {<br /> table.updateRecord(record, { <span class="hljs-attr">name</span>: newName });<br /> }<br /> }<br /> },<br /> {<br /> <span class="hljs-attr">icon</span>: <span class="hljs-string">'delete'</span>,<br /> <span class="hljs-attr">action</span>: <span class="hljs-function">(<span class="hljs-params">table, record</span>) =></span> {<br /> table.deleteRecord(record);<br /> }<br /> }<br /> ]<br /> }<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
64
|
+
<k-table id="rowControlsExample"></k-table>
|
|
65
|
+
<script type="module">
|
|
66
|
+
document.getElementById('rowControlsExample').setData({
|
|
67
|
+
records: contacts,
|
|
68
|
+
controls: {
|
|
69
|
+
before: [
|
|
70
|
+
{
|
|
71
|
+
html: '<span>Custom HTML</span> '
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
render: (table, record) => {
|
|
75
|
+
return `<button onclick="alert('${record.name}')">Alert</button>`;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
],
|
|
79
|
+
after: [
|
|
80
|
+
{
|
|
81
|
+
icon: 'edit',
|
|
82
|
+
action: (table, record) => {
|
|
83
|
+
const newName = prompt("Enter a new name:", record.name);
|
|
84
|
+
if (newName && newName !== record.name) {
|
|
85
|
+
table.updateRecord(record, { name: newName });
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
icon: 'delete',
|
|
91
|
+
action: (table, record) => {
|
|
92
|
+
table.deleteRecord(record);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
</script>
|
|
99
|
+
</main>
|
|
100
|
+
<div style="height: 33.333vh"></div>
|
|
101
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
102
|
+
</body>
|
|
103
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
|