kempo 2.9.4 → 2.10.1

package/docs/components/table.html

@@ -4,7 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Table - Components - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
+  <link rel="stylesheet" href="../kempo/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
   <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
   <script type="module" src="../kempo/components/Table.js"></script>
   <script type="module">
@@ -63,10 +64,18 @@
       <div class="m mt0 pl">
         <h6>Examples</h6>
         <a href="#basicUsage">Basic Usage</a><br />
-        <a href="#customFields">Custom Fields</a><br />
-        <a href="#topBottomControls">Top and Bottom Controls</a><br />
-        <a href="#rowControls">Row Controls</a><br />
-        <a href="#pagination">Pagination</a><br />
+        <a href="tableCustomFields.html">Custom Fields</a><br />
+        <a href="tableControls.html">Top and Bottom Controls</a><br />
+        <a href="tableRowControls.html">Row Controls</a><br />
+        <a href="tablePagination.html">Pagination</a><br />
+        <a href="tableRecordSelection.html">Record Selection</a><br />
+        <a href="tableRecordEditing.html">Record Editing</a><br />
+        <a href="tableRecordHiding.html">Record Hiding</a><br />
+        <a href="tableRecordFiltering.html">Record Filtering</a><br />
+        <a href="tableRecordSearching.html">Record Searching</a><br />
+        <a href="tableSorting.html">Sorting</a><br />
+        <a href="tableFieldSortHide.html">Field Sorting and Hiding</a><br />
+        <a href="tableFetchRecords.html">Fetching Records</a><br />
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
@@ -114,175 +123,21 @@
       });
     </script>
 
-    <h3 id="customFields"><a href="#customFields" class="no-link">Custom Fields</a></h3>
-    <p>Use the <code>fields</code> property of the options object in <code>setData</code> to define custom fields. This is useful for hiding fields, reordering fields, changing the labels, formatting the output, or creating a calculated field.</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">"customFieldsExample"</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>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'customFieldsExample'</span>).setData({<br />    records: contacts.slice(<span class="hljs-number">0</span>,<span class="hljs-number">10</span>),<br />    fields: [<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">'phoneNumber'</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">'Phone Number'</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 Address'</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 />      },<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-comment">// record.birthday is a string in the format "YYYY-MM-DD"</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> <span class="hljs-comment">// original value is "m" or "f"</span><br />      }<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
-    <k-table id="customFieldsExample"></k-table>
-    <script type="module">
-      document.getElementById('customFieldsExample').setData({
-        records: contacts.slice(0,10),
-        fields: [
-          {
-            name: "name",
-            label: "Name"
-          },
-          {
-            name: 'phoneNumber',
-            label: 'Phone Number'
-          },
-          {
-            name: 'email',
-            label: 'Email Address'
-          },
-          {
-            name: 'birthday',
-            label: 'Birthday'
-          },
-          {
-            name: 'age',
-            label: 'Age',
-            calculator: (record) => {
-              // record.birthday is a string in the format "YYYY-MM-DD"
-              const today = new Date();
-              const birthDate = new Date(record.birthday);
-              let age = today.getFullYear() - birthDate.getFullYear();
-              const monthDifference = today.getMonth() - birthDate.getMonth();
-              if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
-                age--;
-              }
-              return age;
-            }
-          },
-          {
-            name: 'gender',
-            label: 'Gender',
-            formatter: (v) => v==='m'?'Male':'Female' // original value is "m" or "f"
-          }
-        ]
-      });
-    </script>
-
-    <h3 id="topBottomControls"><a href="#topBottomControls" class="no-link">Top and Bottom Controls</a></h3>
-    <p>The table component can display controls at the top and bottom of the table. These controls can be used for pagination, adding new records, or any other actions. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function.</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">"topBottomControlsExample"</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>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'topBottomControlsExample'</span>).setData({<br />    records: contacts.slice(<span class="hljs-number">10</span>, <span class="hljs-number">20</span>),<br />    controls: {<br />      <span class="hljs-attr">top</span>: [<br />        {<br />          <span class="hljs-attr">icon</span>: <span class="hljs-string">'add'</span>,<br />          <span class="hljs-attr">action</span>: <span class="hljs-function">(<span class="hljs-params">table</span>) =&gt;</span> table.addRecord(generateContact())<br />        }<br />      ],<br />      <span class="hljs-attr">bottom</span>: [<br />        {<br />          <span class="hljs-attr">icon</span>: <span class="hljs-string">'refresh'</span>,<br />          <span class="hljs-attr">action</span>: <span class="hljs-function">(<span class="hljs-params">table</span>) =&gt;</span> {<br />            contacts = contacts.sort(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-built_in">Math</span>.random() - <span class="hljs-number">0.5</span>);<br />            table.setRecords(contacts.slice(<span class="hljs-number">0</span>, <span class="hljs-number">10</span>));<br />          }<br />        }<br />      ]<br />    }<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
-    <k-table id="topBottomControlsExample"></k-table>
-    <script type="module">
-      document.getElementById('topBottomControlsExample').setData({
-        records: contacts.slice(10, 20),
-        controls: {
-          top: [
-            {
-              icon: 'add',
-              action: (table) => table.addRecord(generateContact())
-            }
-          ],
-          bottom: [
-            {
-              icon: 'refresh',
-              action: (table) => {
-                contacts = contacts.sort(() => Math.random() - 0.5);
-                table.setRecords(contacts.slice(0, 10));
-              }
-            }
-          ]
-        }
-      });
-    </script>
-
-    <h3 id="rowControls"><a href="#rowControls" class="no-link">Row Controls</a></h3>
-    <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>
-    <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><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">'rowControlsExample'</span>).setData({<br />    records: contacts.slice(20, 25),<br />    controls: {<br />      <span class="hljs-attr">before</span>: [<br />        {<br />          <span class="hljs-attr">html</span>: <span class="hljs-string">'&lt;span&gt;Custom HTML&lt;/span&gt; '</span><br />        },<br />        {<br />          <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">table, record</span>) =&gt;</span> {<br />            <span class="hljs-keyword">return</span> <span class="hljs-string">`&lt;button onclick="alert('<span class="hljs-subst">${record.name}</span>')"&gt;Alert&lt;/button&gt;`</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, index</span>) =&gt;</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) {<br />              record.name = newName;<br />              table.updateRecord(index, record);<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, index</span>) =&gt;</span> {<br />            table.deleteRecord(index);<br />          }<br />        }<br />      ]<br />    }<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
-    <k-table id="rowControlsExample"></k-table>
-    <script type="module">
-      document.getElementById('rowControlsExample').setData({
-        records: contacts.slice(20, 25),
-        controls: {
-          before: [
-            {
-              html: '<span>Custom HTML</span> '
-            },
-            {
-              render: (table, record) => {
-                return `<button onclick="alert('${record.name}')">Alert</button>`;
-              }
-            }
-          ],
-          after: [
-            {
-              icon: 'edit',
-              action: (table, record, index) => {
-                const newName = prompt("Enter a new name:", record.name);
-                if (newName) {
-                  record.name = newName;
-                  table.updateRecord(index, record);
-                }
-              }
-            },
-            {
-              icon: 'delete',
-              action: (table, record, index) => {
-                table.deleteRecord(index);
-              }
-            }
-          ]
-        }
-      });
-    </script>
-
-
-    <h3 id="pagination"><a href="#pagination" class="no-link">Pagination</a></h3>
-    <p>The table component supports pagination. You can set the page size and navigate through pages using the provided methods.</p>
-    <p>There are some predefined controls that you can use directly from <code>Table.controls</code>. These controls include:</p>
+    <h3>Examples</h3>
     <ul>
-      <li><code>prevPage</code>: A control to navigate to the previous page.</li>
-      <li><code>nextPage</code>: A control to navigate to the next page.</li>
-      <li><code>pageSelect</code>: A control to select a specific page.</li>
-      <li><code>spacer</code>: A spacer that flexes to separate the other controls to before it to the left, and after it to the far right.</li>
-      <li><code>pageSize</code>: A control to select the number of records per page.</li>
+      <li><a href="tableCustomFields.html">Custom Fields Example</a></li>
+      <li><a href="tableControls.html">Top and Bottom Controls</a></li>
+      <li><a href="tableRowControls.html">Row Controls</a></li>
+      <li><a href="tablePagination.html">Pagination</a></li>
+      <li><a href="tableRecordSelection.html">Record Selection</a></li>
+      <li><a href="tableRecordEditing.html">Record Editing</a></li>
+      <li><a href="tableRecordHiding.html">Record Hiding</a></li>
+      <li><a href="tableRecordFiltering.html">Record Filtering</a></li>
+      <li><a href="tableRecordSearching.html">Record Searching</a></li>
+      <li><a href="tableSorting.html">Sorting</a></li>
+      <li><a href="tableFieldSortHide.html">Field Sorting and Hiding</a></li>
+      <li><a href="tableFetchRecords.html">Fetching Records</a></li>
     </ul>
-    <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">"paginationExample"</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>&gt;</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">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
-    <k-table id="paginationExample"></k-table>
-    <script type="module">
-      import Table from '../kempo/components/Table.js';
-      const $paginationExample = document.getElementById('paginationExample');
-      $paginationExample.setData({
-        records: contacts,
-        controls: {
-          bottom: [
-            Table.controls.prevPage,
-            Table.controls.nextPage,
-            Table.controls.pageSelect,
-            Table.controls.spacer,
-            Table.controls.pageSize
-          ]
-        },
-        pageSize: 10,
-        pageSizeOptions: [5, 10, 20]
-      });
-    </script>
-
-    <h3 id="recordSelection"><a href="#recordSelection" class="no-link">Record Selection</a></h3>
-    <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>
-    <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">"recordSelectionExample"</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>&gt;</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">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
-    <k-table id="recordSelectionExample"></k-table>
-    <script type="module">
-      import Table from '../kempo/components/Table.js';
-      document.getElementById('recordSelectionExample').setData({
-        records: contacts,
-        enableSelection: true,
-        controls: {
-          bottom: [
-            Table.controls.prevPage,
-            Table.controls.nextPage,
-            Table.controls.pageSelect,
-            Table.controls.spacer,
-            Table.controls.selectCount,
-            Table.controls.deleteSelected
-          ]
-        },
-        pageSize: 10
-      });
-    </script>
 
     <br />
     <hr class="my" />
@@ -334,9 +189,12 @@
     <ul>
       <li><code>records</code>: An array of objects representing the records to be shown in the table.</li>
       <li><code>fields</code>: An array of objects representing the fields of the table, each object must contain a <code>name</code> and a <code>label</code>. If this property is omitted, the fields will be automatically generated from the first 100 records.</li>
-      <li><code>controls</code>: An object containing optional arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. The <code>controls</code> object can contain the optional <code>before</code> and <code>after</code> properties, which are arrays of objects containing the <code>icon</code> (string), <code>action</code> (function), <code>html</code> (string), and <code>render</code> (function). If <code>html</code> is present, it overrides the icon and is rendered in its place. If <code>render</code> is present, it is used to render the control.</li>
+      <li><code>filters</code>: An array of filter objects to apply to the records.</li>
       <li><code>pageSize</code>: The number of records to display per page.</li>
       <li><code>pageSizeOptions</code>: An array of numbers representing the available page size options.</li>
+      <li><code>currentPage</code>: The current page to display.</li>
+      <li><code>enableSelection</code>: A boolean to enable or disable record selection.</li>
+      <li><code>enablePages</code>: A boolean to enable or disable pagination.</li>
     </ul>
 
     <h5><code>renderFields()<i>: undefined</i></code></h5>
@@ -348,11 +206,11 @@
     <h5><code>addRecord(<i>object</i> record)<i>: undefined</i></code></h5>
     <p>Adds a new record to the table.</p>
 
-    <h5><code>updateRecord(<i>number</i> index, <i>object</i> record)<i>: undefined</i></code></h5>
-    <p>Updates an existing record at the specified index.</p>
+    <h5><code>updateRecord(<i>object</i> record, <i>object</i> newData)<i>: undefined</i></code></h5>
+    <p>Updates an existing record with new data.</p>
 
-    <h5><code>deleteRecord(<i>number</i> index)<i>: undefined</i></code></h5>
-    <p>Deletes a record at the specified index.</p>
+    <h5><code>deleteRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Deletes a record from the table.</p>
 
     <h5><code>setRecords(<i>Array</i> records)<i>: undefined</i></code></h5>
     <p>Sets the records for the table and re-renders the rows.</p>
@@ -360,13 +218,25 @@
     <h5><code>setPageSize(<i>number</i> pageSize)<i>: undefined</i></code></h5>
     <p>Sets the number of records to display per page.</p>
 
-    <h5><code>goToPage(<i>number</i> pageNumber)<i>: undefined</i></code></h5>
-    <p>Navigates to the specified page number.</p>
+    <h5><code>setPage(<i>number</i> page)<i>: undefined</i></code></h5>
+    <p>Sets the current page to display.</p>
+
+    <h5><code>nextPage()<i>: undefined</i></code></h5>
+    <p>Moves to the next page.</p>
+
+    <h5><code>prevPage()<i>: undefined</i></code></h5>
+    <p>Moves to the previous page.</p>
+
+    <h5><code>getCurrentPage()<i>: number</i></code></h5>
+    <p>Returns the current page number.</p>
+
+    <h5><code>getTotalPages()<i>: number</i></code></h5>
+    <p>Returns the total number of pages.</p>
 
     <h5><code>getSelectedRecords()<i>: Array</i></code></h5>
     <p>Returns an array of the currently selected records.</p>
 
-    <h5><code>deleteSelectedRecords()<i>: undefined</i></code></h5>
+    <h5><code>deleteSelected()<i>: undefined</i></code></h5>
     <p>Deletes all currently selected records from the table.</p>
 
     <h5><code>selectAllOnPage()<i>: undefined</i></code></h5>
@@ -375,9 +245,65 @@
     <h5><code>deselectAllOnPage()<i>: undefined</i></code></h5>
     <p>Deselects all the records on the current page.</p>
 
-    <h5><code>allOnPageSelected()<i>: undefined</i></code></h5>
+    <h5><code>allOnPageSelected()<i>: boolean</i></code></h5>
     <p>Returns <code>true</code> if all the records on the current page are selected, and <code>false</code> if they are not.</p>
-    
+
+    <h5><code>editRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Enables editing mode for a record.</p>
+
+    <h5><code>saveEditedRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Saves the changes made to an edited record.</p>
+
+    <h5><code>cancelEditedRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Cancels the editing mode for a record.</p>
+
+    <h5><code>recordIsEditing(<i>object</i> record)<i>: boolean</i></code></h5>
+    <p>Returns <code>true</code> if the record is in editing mode, and <code>false</code> if it is not.</p>
+
+    <h5><code>hideRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Hides a record from the table.</p>
+
+    <h5><code>showRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Shows a hidden record in the table.</p>
+
+    <h5><code>showAllRecords()<i>: undefined</i></code></h5>
+    <p>Shows all hidden records in the table.</p>
+
+    <h5><code>addFilter(<i>string</i> field, <i>string</i> condition, <i>any</i> value)<i>: undefined</i></code></h5>
+    <p>Adds a filter to the table.</p>
+
+    <h5><code>removeFilter(<i>string</i> field, <i>string</i> condition, <i>any</i> value)<i>: undefined</i></code></h5>
+    <p>Removes a filter from the table.</p>
+
+    <h5><code>removeAllFilters()<i>: undefined</i></code></h5>
+    <p>Removes all filters from the table.</p>
+
+    <h5><code>search(<i>string</i> term)<i>: undefined</i></code></h5>
+    <p>Searches the records for the specified term.</p>
+
+    <h5><code>getDisplayedRecords()<i>: Array</i></code></h5>
+    <p>Returns an array of the records currently displayed in the table.</p>
+
+    <h5><code>getHiddenRecords()<i>: Array</i></code></h5>
+    <p>Returns an array of the hidden records in the table.</p>
+
+    <h5><code>setupFetchRecords(<i>number</i> totalRecords, <i>function</i> callback)<i>: undefined</i></code></h5>
+    <p>Sets up the table to fetch records dynamically.</p>
+
+    <h5><code>sortBy(<i>string</i> field, <i>boolean</i> asc)<i>: undefined</i></code></h5>
+    <p>Sorts the records by the specified field in ascending or descending order.</p>
+
+    <h5><code>setFieldHiddenState(<i>string</i> fieldName, <i>boolean</i> hidden)<i>: undefined</i></code></h5>
+    <p>Sets the hidden state of a field.</p>
+
+    <h5><code>hideField(<i>string</i> fieldName)<i>: undefined</i></code></h5>
+    <p>Hides a field in the table.</p>
+
+    <h5><code>showField(<i>string</i> fieldName)<i>: undefined</i></code></h5>
+    <p>Shows a hidden field in the table.</p>
+
+    <h5><code>reorderFields(<i>Array</i> newOrder)<i>: undefined</i></code></h5>
+    <p>Reorders the fields in the table based on the new order array.</p>
 
   </main>
   <div style="height: 33.333vh"></div>

package/docs/components/tableControls.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Top and Bottom Controls - Table - Kempo Docs</title>
+  <link rel="stylesheet" href="../kempo/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
+  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module" src="../kempo/components/Table.js"></script>
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin", 
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel", 
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack", 
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David", 
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia", 
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth", 
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett", 
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor", 
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", 
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez", 
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin", 
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark", 
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      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')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 10; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <h1 class="ta-center">Table - Top and Bottom Controls</h1>
+  <main>
+
+    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+
+    <p>The table component supports controls at both the top and bottom. These controls can handle pagination, adding new records, or other actions. They are web components that interact with their parent <code>k-table</code> by accessing its methods and listening for its events.</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">"topBottomControlsExample"</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">"top"</span>&gt;</span><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-export-csv</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-csv</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">"../kempo/components/tableControls/ExportJson.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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../kempo/components/tableControls/ExportCsv.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">'topBottomControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="topBottomControlsExample">
+      <k-tc-export-json slot="top"></k-tc-export-json>
+      <k-tc-export-csv></k-tc-export-csv>
+    </k-table>
+    <script type="module" src="../kempo/components/tableControls/ExportJson.js"></script>
+    <script type="module" src="../kempo/components/tableControls/ExportCsv.js"></script>
+    <script type="module">
+      document.getElementById('topBottomControlsExample').setRecords(contacts);
+    </script>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../kempo/components/Import.js"></script> 
+</body>
+</html>

package/docs/components/tableCustomFields.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Custom Fields - Table - Kempo Docs</title>
+  <link rel="stylesheet" href="../kempo/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
+  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module" src="../kempo/components/Table.js"></script>
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin", 
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel", 
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack", 
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David", 
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia", 
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth", 
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett", 
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor", 
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", 
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez", 
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin", 
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark", 
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      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')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 10; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <h1 class="ta-center">Table - Custom Fields</h1>
+  <main>
+
+    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+
+    <p>Use the <code>fields</code> property of the options object in <code>setData</code> to define custom fields. This is useful for hiding fields, reordering fields, changing the labels, formatting the output, or creating a calculated field.</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">"customFieldsExample"</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>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'customFieldsExample'</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">'phoneNumber'</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">'Phone Number'</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 Address'</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 />      },<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-comment">// record.birthday is a string in the format "YYYY-MM-DD"</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> <span class="hljs-comment">// original value is "m" or "f"</span><br />      }<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="customFieldsExample"></k-table>
+    <script type="module">
+      document.getElementById('customFieldsExample').setData({
+        records: contacts,
+        fields: [
+          {
+            name: "name",
+            label: "Name"
+          },
+          {
+            name: 'phoneNumber',
+            label: 'Phone Number'
+          },
+          {
+            name: 'email',
+            label: 'Email Address'
+          },
+          {
+            name: 'birthday',
+            label: 'Birthday'
+          },
+          {
+            name: 'age',
+            label: 'Age',
+            calculator: (record) => {
+              // record.birthday is a string in the format "YYYY-MM-DD"
+              const today = new Date();
+              const birthDate = new Date(record.birthday);
+              let age = today.getFullYear() - birthDate.getFullYear();
+              const monthDifference = today.getMonth() - birthDate.getMonth();
+              if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
+                age--;
+              }
+              return age;
+            }
+          },
+          {
+            name: 'gender',
+            label: 'Gender',
+            formatter: (v) => v==='m'?'Male':'Female' // original value is "m" or "f"
+          }
+        ]
+      });
+    </script>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../kempo/components/Import.js"></script> 
+</body>
+</html>