kempo-ui 0.4.19 → 0.4.21

package/docs-src/components/tableCustomFields.page.html

@@ -96,10 +96,10 @@
     <h3>Non-Editable Fields</h3>
     <p>Set <code>editable: false</code> on a field definition to make it read-only when a row is in edit mode. The cell displays its value normally — no input is rendered. This is useful for fields like IDs that should never be changed by the user.</p>
 
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">editableFieldExample</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-edit</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;editableFieldExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alice&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;New York&#x27;</span><br>    }, {<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Bob&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Los Angeles&#x27;</span><br>    }, {<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Charlie&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Chicago&#x27;</span><br>    }],<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;id&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;ID&#x27;</span>,<br>      <span class="hljs-attr">editable</span>: <span class="hljs-literal">false</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;city&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;City&#x27;</span><br>    }]<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">editableFieldExample</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-edit</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;editableFieldExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alice&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;New York&#x27;</span><br>    }, {<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Bob&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Los Angeles&#x27;</span><br>    }, {<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Charlie&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Chicago&#x27;</span><br>    }],<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;id&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;ID&#x27;</span>,<br>      <span class="hljs-attr">editable</span>: <span class="hljs-literal">false</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;city&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;City&#x27;</span><br>    }]<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
 
     <k-table id="editableFieldExample">
-      <k-tc-edit slot="after"></k-tc-edit>
+      <kc-tc-edit slot="after"></kc-tc-edit>
     </k-table>
     <script type="module">
       await window.customElements.whenDefined('k-table');
@@ -119,6 +119,6 @@
   </content>
   <content location="scripts">
     <script type="module" src="{{pathToRoot}}src/components/Table.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/Edit.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcEdit.js"></script>
   </content>
 </page>

package/docs-src/components/tableFetchRecords.page.html

@@ -45,7 +45,7 @@
     <p>The <code>setupFetchRecords</code> function is used to configure the table to fetch records dynamically. It takes two parameters: the total number of records and a function that fetching records. It should be an asynconous function that returns/resolves an array of records that will populate the table.</p>
     <p>In this example, the <code>simulateFetchRecords</code> function generates a specified number of random contact records and resolves the promise after a delay, simulating an asynchronous fetch operation.
     </p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"fetchRecordsExample"</span><br />  <span class="hljs-attr">enable-pages</span>=<span class="hljs-string">"true"</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/FirstPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/PrevPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/NextPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/LastPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/PageSelect.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/tableControls/PageSize.js'</span>;<br /><br />  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">simulateFetchRecords</span>(<span class="hljs-params">start, count</span>)</span>{<br />    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {<br />      <span class="hljs-keyword">const</span> newRecords = [];<br />      <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i&lt;count; i++){<br />        newRecords.push(generateContact());<br />      }<br />      setTimeout(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>res(newRecords), <span class="hljs-number">1000</span>);<br />    });<br />  }<br /><br />  <span class="hljs-keyword">const</span> $table = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fetchRecordsExample'</span>);<br />  <br />  $table.setRecords(contacts);<br />  $table.setupFetchRecords(<span class="hljs-number">100</span>, simulateFetchRecords);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"fetchRecordsExample"</span><br />  <span class="hljs-attr">enable-pages</span>=<span class="hljs-string">"true"</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcFirstPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcPrevPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcNextPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcLastPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcPageSelect.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/src/components/controls/TcPageSize.js'</span>;<br /><br />  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">simulateFetchRecords</span>(<span class="hljs-params">start, count</span>)</span>{<br />    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {<br />      <span class="hljs-keyword">const</span> newRecords = [];<br />      <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i&lt;count; i++){<br />        newRecords.push(generateContact());<br />      }<br />      setTimeout(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>res(newRecords), <span class="hljs-number">1000</span>);<br />    });<br />  }<br /><br />  <span class="hljs-keyword">const</span> $table = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fetchRecordsExample'</span>);<br />  <br />  $table.setRecords(contacts);<br />  $table.setupFetchRecords(<span class="hljs-number">100</span>, simulateFetchRecords);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table
       id="fetchRecordsExample"
       enable-pages="true"
@@ -53,28 +53,28 @@
     >
       <div class="d-f full">
         <div>
-          <k-tc-first-page></k-tc-first-page>
-          <k-tc-prev-page></k-tc-prev-page>
-          <k-tc-next-page></k-tc-next-page>
-          <k-tc-last-page></k-tc-last-page>
+          <kc-tc-first-page></kc-tc-first-page>
+          <kc-tc-prev-page></kc-tc-prev-page>
+          <kc-tc-next-page></kc-tc-next-page>
+          <kc-tc-last-page></kc-tc-last-page>
         </div>
         <div class="flex"></div>
         <div>
-          <k-tc-page-select></k-tc-page-select>
+          <kc-tc-page-select></kc-tc-page-select>
         </div>
         <div class="flex"></div>
         <div>
-          <k-tc-page-size></k-tc-page-size>
+          <kc-tc-page-size></kc-tc-page-size>
         </div>
       </div>
     </k-table>
     <script type="module">
-      import '/src/components/tableControls/FirstPage.js';
-      import '/src/components/tableControls/PrevPage.js';
-      import '/src/components/tableControls/NextPage.js';
-      import '/src/components/tableControls/LastPage.js';
-      import '/src/components/tableControls/PageSelect.js';
-      import '/src/components/tableControls/PageSize.js';
+      import '/src/components/controls/TcFirstPage.js';
+      import '/src/components/controls/TcPrevPage.js';
+      import '/src/components/controls/TcNextPage.js';
+      import '/src/components/controls/TcLastPage.js';
+      import '/src/components/controls/TcPageSelect.js';
+      import '/src/components/controls/TcPageSize.js';
 
       function simulateFetchRecords(start, count){
         return new Promise(res => {

package/docs-src/components/tableFieldSortHide.page.html

@@ -43,12 +43,12 @@
 
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
 
-    <p>This example shows how to use the <code>&lt;k-tc-field-sort-hide&gt;</code> component to allow users to show or hide fields in the table, and sort fields.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"fieldVisibilityExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-field-sort-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-field-sort-hide</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/FieldSortHide.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fieldVisibilityExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <p>This example shows how to use the <code>&lt;kc-tc-field-sort-hide&gt;</code> component to allow users to show or hide fields in the table, and sort fields.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"fieldVisibilityExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-field-sort-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-field-sort-hide</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcFieldSortHide.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fieldVisibilityExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="fieldVisibilityExample">
-      <k-tc-field-sort-hide slot="top"></k-tc-field-sort-hide>
+      <kc-tc-field-sort-hide slot="top"></kc-tc-field-sort-hide>
     </k-table>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/FieldSortHide.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcFieldSortHide.js"></script>
     <script type="module">
       document.getElementById('fieldVisibilityExample').setRecords(contacts);
     </script>

package/docs-src/components/tablePagination.page.html

@@ -43,7 +43,7 @@
         <p>The table component supports pagination, enable it by adding the <code>enable-pages</code> attribute to the <code>k-table</code> element.</p>
     <p>You can optionally set the page size and page size options by setting the <code>page-size</code> and <code>page-size-options</code> attributes respectively. <code>page-size-options</code> must be in the format of an array of numbers (with brackets).</p>
     
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"paginationExample"</span><br />  <span class="hljs-attr">enable-pages</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />  <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"align-items: center;"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'paginationExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"paginationExample"</span><br />  <span class="hljs-attr">enable-pages</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />  <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"align-items: center;"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'paginationExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
 
     <k-table
       id="paginationExample"
@@ -53,18 +53,18 @@
     >
       <div class="d-f full" style="align-items: center;">
         <div>
-          <k-tc-first-page></k-tc-first-page>
-          <k-tc-prev-page></k-tc-prev-page>
-          <k-tc-next-page></k-tc-next-page>
-          <k-tc-last-page></k-tc-last-page>
+          <kc-tc-first-page></kc-tc-first-page>
+          <kc-tc-prev-page></kc-tc-prev-page>
+          <kc-tc-next-page></kc-tc-next-page>
+          <kc-tc-last-page></kc-tc-last-page>
         </div>
         <div class="flex"></div>
         <div>
-          <k-tc-page-select></k-tc-page-select>
+          <kc-tc-page-select></kc-tc-page-select>
         </div>
         <div class="flex"></div>
         <div>
-          <k-tc-page-size></k-tc-page-size>
+          <kc-tc-page-size></kc-tc-page-size>
         </div>
       </div>
     </k-table>
@@ -75,11 +75,11 @@
   </content>
   <content location="scripts">
     <script type="module" src="{{pathToRoot}}src/components/Table.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/FirstPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/PrevPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/NextPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/LastPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/PageSelect.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/PageSize.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcFirstPage.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcPrevPage.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcNextPage.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcLastPage.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcPageSelect.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcPageSize.js"></script>
   </content>
 </page>

package/docs-src/components/tablePlaceholder.page.html

@@ -45,12 +45,12 @@
 
     <h3>Filtered Placeholder</h3>
     <p>Use <code>filtered-placeholder</code> to show a distinct message when records exist but all are filtered out. Try searching for something that does not match any record below.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">filteredTableExample</span> <span class="hljs-attr">filtered-placeholder</span>=<span class="hljs-string">&#x27;No records match your search.&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">top</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#x27;width: 20rem&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-search</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span> <span class="hljs-attr">src</span>=<span class="hljs-string">/src/components/tableControls/Search.js</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;filteredTableExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;city&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;City&#x27;</span><br>    }],<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alice&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;New York&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Bob&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Chicago&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Charlie&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Houston&#x27;</span><br>    }]<br>  })<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">filteredTableExample</span> <span class="hljs-attr">filtered-placeholder</span>=<span class="hljs-string">&#x27;No records match your search.&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">top</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#x27;width: 20rem&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-search</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span> <span class="hljs-attr">src</span>=<span class="hljs-string">/src/components/controls/TcSearch.js</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;filteredTableExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;city&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;City&#x27;</span><br>    }],<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alice&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;New York&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Bob&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Chicago&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Charlie&#x27;</span>,<br>      <span class="hljs-attr">city</span>: <span class="hljs-string">&#x27;Houston&#x27;</span><br>    }]<br>  })<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-card label="Result">
       <k-table id="filteredTableExample" filtered-placeholder="No records match your search.">
-        <k-tc-search slot="top" style="width: 20rem"></k-tc-search>
+        <kc-tc-search slot="top" style="width: 20rem"></kc-tc-search>
       </k-table>
-      <script type="module" src="{{pathToRoot}}src/components/tableControls/Search.js"></script>
+      <script type="module" src="{{pathToRoot}}src/components/controls/TcSearch.js"></script>
       <script type="module">
         await window.customElements.whenDefined('k-table');
         document.getElementById('filteredTableExample').setData({

package/docs-src/components/tableRecordEditing.page.html

@@ -45,12 +45,12 @@
     <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>
     <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>
     
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"recordEditingExample"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-edit</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Table.js'</span>;<br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  Table.editors.tel = <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</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>, () =&gt; {<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>) =&gt;</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 &lt; <span class="hljs-number">0</span> || (monthDifference === <span class="hljs-number">0</span> &amp;&amp; today.getDate() &lt; 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>) =&gt;</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>) =&gt;</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 />            &lt;option value="m"&gt;Male&lt;/option&gt;<br />            &lt;option value="f"&gt;Female&lt;/option&gt;<br />          `</span>;<br />          $select.value = v;<br />          <span class="hljs-keyword">return</span> $select;<br />        }<br />      }<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"recordEditingExample"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-edit</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Table.js'</span>;<br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  Table.editors.tel = <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</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>, () =&gt; {<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>) =&gt;</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 &lt; <span class="hljs-number">0</span> || (monthDifference === <span class="hljs-number">0</span> &amp;&amp; today.getDate() &lt; 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>) =&gt;</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>) =&gt;</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 />            &lt;option value="m"&gt;Male&lt;/option&gt;<br />            &lt;option value="f"&gt;Female&lt;/option&gt;<br />          `</span>;<br />          $select.value = v;<br />          <span class="hljs-keyword">return</span> $select;<br />        }<br />      }<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
 
     <k-table
       id="recordEditingExample"
     >
-      <k-tc-edit slot="after"></k-tc-edit>
+      <kc-tc-edit slot="after"></kc-tc-edit>
     </k-table>
     <script type="module">
       import Table from '{{pathToRoot}}src/components/Table.js';
@@ -129,7 +129,7 @@
     <pre><code class="hljs javascript"><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;nonEditableFieldExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>  <span class="hljs-attr">records</span>: contacts,<br>  <span class="hljs-attr">fields</span>: [{<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>    <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span>,<br>    <span class="hljs-attr">editable</span>: <span class="hljs-literal">false</span><br>  }, {<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;email&#x27;</span>,<br>    <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Email&#x27;</span><br>  }, {<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;birthday&#x27;</span>,<br>    <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Birthday&#x27;</span>,<br>    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;date&#x27;</span><br>  }]<br>});</code></pre>
 
     <k-table id="nonEditableFieldExample">
-      <k-tc-edit slot="after"></k-tc-edit>
+      <kc-tc-edit slot="after"></kc-tc-edit>
     </k-table>
     <script type="module">
       await window.customElements.whenDefined('k-table');
@@ -156,6 +156,6 @@
   </content>
   <content location="scripts">
     <script type="module" src="{{pathToRoot}}src/components/Table.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/Edit.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcEdit.js"></script>
   </content>
 </page>

package/docs-src/components/tableRecordFiltering.page.html

@@ -47,20 +47,20 @@
     
     <h3>Basic Filtering (Case-Insensitive)</h3>
     <p>By default, filters are case-insensitive. This means that filtering for "smith" will match "Smith", "SMITH", and "smith".</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordFilteringExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/Filters.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordFilteringExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordFilteringExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcFilters.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordFilteringExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="recordFilteringExample">
-      <k-tc-filters slot="top"></k-tc-filters>
+      <kc-tc-filters slot="top"></kc-tc-filters>
     </k-table>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/Filters.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcFilters.js"></script>
     <script type="module">
       document.getElementById('recordFilteringExample').setRecords(contacts);
     </script>
 
     <h3>Case-Sensitive Filtering</h3>
     <p>You can enable case-sensitive filtering by adding the <code>case-sensitive-filters</code> attribute. With this enabled, filtering for "smith" will only match "smith", not "Smith" or "SMITH".</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"caseSensitiveExample"</span> <span class="hljs-attr">case-sensitive-filters</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'caseSensitiveExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"caseSensitiveExample"</span> <span class="hljs-attr">case-sensitive-filters</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'caseSensitiveExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="caseSensitiveExample" case-sensitive-filters>
-      <k-tc-filters slot="top"></k-tc-filters>
+      <kc-tc-filters slot="top"></kc-tc-filters>
     </k-table>
     <script type="module">
       document.getElementById('caseSensitiveExample').setRecords(contacts);

package/docs-src/components/tableRecordHiding.page.html

@@ -44,12 +44,12 @@
 
     <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>
     
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordHidingExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hide</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-show-all</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-show-all</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordHidingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordHidingExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-hide</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-hidden-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-hidden-count</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-show-all</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-show-all</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordHidingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
 
     <k-table id="recordHidingExample">
-      <k-tc-hide slot="after"></k-tc-hide>
-      <k-tc-hidden-count></k-tc-hidden-count>
-      <k-tc-show-all></k-tc-show-all>
+      <kc-tc-hide slot="after"></kc-tc-hide>
+      <kc-tc-hidden-count></kc-tc-hidden-count>
+      <kc-tc-show-all></kc-tc-show-all>
     </k-table>
     <script type="module">
       await window.customElements.whenDefined('k-table');
@@ -58,8 +58,8 @@
   </content>
   <content location="scripts">
     <script type="module" src="{{pathToRoot}}src/components/Table.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/Hide.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/HiddenCount.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/ShowAll.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcHide.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcHiddenCount.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcShowAll.js"></script>
   </content>
 </page>

package/docs-src/components/tableRecordSearching.page.html

@@ -44,11 +44,11 @@
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
 
     <p>The search control (aka quick filter) is a feature that allows users to filter the records displayed in the table. The control is a search input that can be used to filter records based on the values in the columns.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"quickFilterExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 20rem"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-search</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/Search.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'quickFilterExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"quickFilterExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 20rem"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-search</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcSearch.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'quickFilterExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="quickFilterExample">
-      <k-tc-search slot="top" style="width: 20rem"></k-tc-search>
+      <kc-tc-search slot="top" style="width: 20rem"></kc-tc-search>
     </k-table>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/Search.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcSearch.js"></script>
     <script type="module">
       document.getElementById('quickFilterExample').setRecords(contacts);
     </script>

package/docs-src/components/tableRowControls.page.html

@@ -42,12 +42,12 @@
 
     <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
     <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. Use <code>slot="before"</code> to add the control before each row, and use <code>slot="after"</code> to add the control after each row.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rowControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span> <span class="hljs-attr">max-width</span>=<span class="hljs-string">"40"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"export-file"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-record</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'rowControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rowControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span> <span class="hljs-attr">max-width</span>=<span class="hljs-string">"40"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"export-file"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-delete-record</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'rowControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="rowControlsExample">
-      <k-tc-export-json slot="before" max-width="40">
+      <kc-tc-export-json slot="before" max-width="40">
         <k-icon name="export-file"></k-icon>
-      </k-tc-export-json>
-      <k-tc-delete-record slot="after"></k-tc-delete-record>
+      </kc-tc-export-json>
+      <kc-tc-delete-record slot="after"></kc-tc-delete-record>
     </k-table>
     <script type="module">
       await window.customElements.whenDefined('k-table');
@@ -56,7 +56,7 @@
   </content>
   <content location="scripts">
     <script type="module" src="{{pathToRoot}}src/components/Table.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/ExportJson.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/DeleteRecord.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcExportJson.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcDeleteRecord.js"></script>
   </content>
 </page>