kempo-ui 0.3.4 → 0.3.6

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

@@ -0,0 +1,195 @@
+<page pageName="Split" title="Split - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#resizing">Resizing</a><br />
+          <a href="#verticalSplit">Vertical Split</a><br />
+          <a href="#persistentState">Persistent State</a><br />
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#cssCustomProperties">CSS Custom Properties</a><br />
+          <a href="#methods">Methods</a><br />
+          <a href="#events">Events</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Create a split view using the <code>k-split</code> component. Add content to the first pane by placing it inside the component, and add content to the second pane by using the <code>slot="right"</code> attribute.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-split style="height: 10rem" class="b">
+            <div>Left Pane Content</div>
+            <div slot="right">Right Pane Content</div>
+          </k-split>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="resizing"><a href="#resizing" class="no-link">Resizing</a></h3>
+    <p>The split view can be resized by dragging the divider handle. The initial size of the first pane can be set using the <code>--pane_1_size</code> CSS custom property.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--pane_1_size: 30%; height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-split style="--pane_1_size: 30%; height: 10rem" class="b">
+            <div>Left Pane Content</div>
+            <div slot="right">Right Pane Content</div>
+          </k-split>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Sizes</h3>
+    <p>Set the CSS Custom Property <code>--pane_1_size</code> to set the initial size of the first pane.</p>
+    <p>Set the CSS Custom Property <code>--min_pane_size</code> to set the minimum size each pane can be.</p>
+    <p>Set the CSS Custom Property <code>--handle_width</code> to set the size of the handle (the draggable region between the panes).</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span><br />  <span class="hljs-attr">style</span>=<span class="hljs-string">"<br />    --pane_1_size: 100px;<br />    --min_pane_size: 100px;<br />    --handle_width: 20px;<br />    height: 10rem<br />  "</span><br />  <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>left<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>right<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-split
+            style="
+              --pane_1_size: 100px;
+              --min_pane_size: 100px;
+              --handle_width: 20px;
+              height: 10rem
+            "
+            class="b"
+          >
+            <p>left</p>
+            <p slot="right">right</p>
+          </k-split>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="verticalSplit"><a href="#verticalSplit" class="no-link">Vertical Split</a></h3>
+    <p>Use the <code>direction="vertical"</code> attribute to create a vertical split where the top and bottom panes are divided by a horizontal handle. Set an explicit height on the component for predictable sizing. The default slot provides the top pane content; use <code>slot="right"</code> for the bottom pane content.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"vertical"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 16rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Top Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Bottom Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-split direction="vertical" style="height: 16rem" class="b">
+            <div>Top Pane Content</div>
+            <div slot="right">Bottom Pane Content</div>
+          </k-split>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="stacking"><a href="#stacking" class="no-link">Stacking</a></h3>
+    <p>When the screen size is small (mobile) a split panel may not make sense, rather than changing the markup set the <code>stack-width</code> attribute to stack the contents (disable split view) when the component's size is less than the provided size.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">stack-width</span>=<span class="hljs-string">"1080"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-resize dimension="width">
+            <k-split style="height: 10rem" stack-width="300">
+              <div>Left Pane Content</div>
+              <div slot="right">Right Pane Content</div>
+            </k-split>
+          </k-resize>
+        </k-card>
+      </div>
+    </div>
+
+
+    <h3 id="persistentState"><a href="#persistentState" class="no-link">Persistent State</a></h3>
+    <p>Add the <code>persistent-id</code> attribute to save and restore the pane size across page refreshes using <code>localStorage</code>. Each split that uses persistence must have a unique <code>persistent-id</code> value.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">"my-split"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-split persistent-id="docs-split-example" style="height: 10rem" class="b">
+            <div>Left Pane Content</div>
+            <div slot="right">Right Pane Content</div>
+          </k-split>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new Split()</code>
+    </h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>resizing<i>: boolean</i></code></h5>
+    <p>Whether the split view is currently being resized. Syncs to <code>resizing</code> attribute.</p>
+    <h5><code>stacked<i>: boolean</i></code></h5>
+    <p>Whether the split view is in stacked mode. Syncs to <code>stacked</code> attribute.</p>
+    <h5><code>stackWidth<i>: number</i></code></h5>
+    <p>The window width threshold for stacking behavior. Syncs to <code>stack-width</code> attribute.</p>
+    <h5><code>direction<i>: string</i></code></h5>
+    <p>The direction of the split. Can be <code>"horizontal"</code> (default) or <code>"vertical"</code>. Syncs to <code>direction</code> attribute.</p>
+    <h5><code>persistentId<i>: string</i></code></h5>
+    <p>When set, the pane size is saved to <code>localStorage</code> on resize and restored on initialization. Must be unique per split instance. Syncs to <code>persistent-id</code> attribute.</p>
+
+    <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
+    <h5><code>--pane_1_size</code></h5>
+    <p>The size of pane 1 (width in horizontal mode, height in vertical mode). Default is <code>calc((100% - var(--handle_width)) / 2)</code>.</p>
+    <h5><code>--handle_width</code></h5>
+    <p>The width/height of the draggable divider handle. Default is <code>0.5rem</code>.</p>
+    <h5><code>--min_pane_size</code></h5>
+    <p>The minimum size each pane can be resized to. Default is <code>6rem</code>.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>setSize(size)<i>: void</i></code></h5>
+    <p>Sets the size of pane 1 via <code>--pane_1_size</code>. Controls width in horizontal mode and height in vertical mode.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>resizestart</code></h5>
+    <p>Fired when the user starts dragging the divider handle. Detail contains <code>{ startSize }</code>.</p>
+    <h5><code>resize</code></h5>
+    <p>Fired during dragging of the divider handle. Detail contains <code>{ size }</code>.</p>
+    <h5><code>resizeend</code></h5>
+    <p>Fired when the user stops dragging the divider handle. Detail contains <code>{ size }</code>.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Split.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Resize.js"></script>
+  </content>
+</page>

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

@@ -0,0 +1,283 @@
+<page pageName="Table" title="Table - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <a href="#basicUsage">Basic Usage</a><br />
+          <h6 class="mt">Examples</h6>
+          <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 />
+          <a href="./tableServerSync.html">Server Sync</a><br />
+          <a href="./tablePlaceholder.html">Placeholder</a><br />
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>&lt;k-table></code> component is used to render data into a <code>&lt;table></code> using JavaScript.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>In HTML create a <code>&lt;k-table></code>, and then in JavaScript call the <code>setData</code> method passing in an options object containing your data.</p>
+    
+    <k-card label="HTML">
+      <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">basicUsageExample</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="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;basicUsageExample&#x27;</span>).<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Dustin&#x27;</span>,<br>      <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">&#x27;(111) 111-1111&#x27;</span>,<br>      <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">&#x27;dustin@mailserver.com&#x27;</span>,<br>      <span class="hljs-attr">gender</span>: <span class="hljs-string">&#x27;Male&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Kayla&#x27;</span>,<br>      <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">&#x27;(222) 222-2222&#x27;</span>,<br>      <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">&#x27;kayla@mailserver.com&#x27;</span>,<br>      <span class="hljs-attr">gender</span>: <span class="hljs-string">&#x27;Female&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Alexander&#x27;</span>,<br>      <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">&#x27;(333) 333-33333&#x27;</span>,<br>      <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">&#x27;alex@mailserver.com&#x27;</span>,<br>      <span class="hljs-attr">gender</span>: <span class="hljs-string">&#x27;Male&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Amelia&#x27;</span>,<br>      <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">&#x27;(444) 444-44444&#x27;</span>,<br>      <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">&#x27;amelia@mailserver.com&#x27;</span>,<br>      <span class="hljs-attr">gender</span>: <span class="hljs-string">&#x27;Female&#x27;</span><br>    }]<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    </k-card>
+    <k-card label="Results">
+      <k-table id="basicUsageExample"></k-table>
+      <script type="module">
+        await window.customElements.whenDefined('k-table');
+        document.getElementById('basicUsageExample').setData({
+          records: [
+            {
+              name: "Dustin",
+              phoneNumber: "(111) 111-1111",
+              emailAddress: "dustin@mailserver.com",
+              gender: "Male"
+            },
+            {
+              name: "Kayla",
+              phoneNumber: "(222) 222-2222",
+              emailAddress: "kayla@mailserver.com",
+              gender: "Female"
+            },
+            {
+              name: "Alexander",
+              phoneNumber: "(333) 333-33333",
+              emailAddress: "alex@mailserver.com",
+              gender: "Male"
+            },
+            {
+              name: "Amelia",
+              phoneNumber: "(444) 444-44444",
+              emailAddress: "amelia@mailserver.com",
+              gender: "Female"
+            },
+          ]
+        });
+      </script>
+    </k-card>
+
+    <h3>Examples</h3>
+    <ul>
+      <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>
+      <li><a href="./tableServerSync.html">Server Sync</a></li>
+      <li><a href="./tablePlaceholder.html">Placeholder</a></li>
+    </ul>
+
+    <br />
+    <hr class="my" />
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h5>
+      <code>new Table()</code><br />
+      <code>new Table(<i>&lt;Array>object</i> options)</code>
+    </h5>
+
+    <h4>Parameters</h4>
+    <h5><code><i>object</i> options</code></h5>
+    <p>An object containing the initial configuration for the table. The options object can contain the following properties:</p>
+    <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>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>
+    </ul>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="{{pathToRoot}}utils/string.html"><code>toTitleCase</code> <i>from string.js</i></a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>fields<i>: &lt;Array>object</i></code></h5>
+    <p>An array of objects that represent the fields to be displayed. Each field object supports the following properties:</p>
+    <ul>
+      <li><code>name</code> <i>(string, required)</i>: The key in the record object to display.</li>
+      <li><code>label</code> <i>(string)</i>: The column header label. Defaults to <code>toTitleCase(name)</code>.</li>
+      <li><code>size</code> <i>(number)</i>: The column width in pixels.</li>
+      <li><code>hidden</code> <i>(boolean)</i>: Hides the column when <code>true</code>.</li>
+      <li><code>editable</code> <i>(boolean)</i>: Set to <code>false</code> to make the field read-only during record editing. Defaults to <code>true</code>.</li>
+      <li><code>type</code> <i>(string)</i>: The editor type to use (<code>"string"</code>, <code>"number"</code>, <code>"date"</code>, <code>"boolean"</code>). Inferred from the value if omitted.</li>
+      <li><code>formatter</code> <i>(function)</i>: A function <code>(value) => displayString</code> that formats the display value.</li>
+      <li><code>calculator</code> <i>(function)</i>: A function <code>(record, table) => value</code> that computes a derived value. Calculated fields are always read-only.</li>
+      <li><code>editor</code> <i>(function)</i>: A custom editor generator function <code>(value) => HTMLInputElement</code> for per-field editing.</li>
+    </ul>
+
+    <h5><code>records<i>: &lt;Array>object</i></code></h5>
+    <p>An array of objects containing the data that will be the records of the table, where the object keys match the field names.</p>
+
+    <h5><code>controls<i>: object</i></code></h5>
+    <p>An object containing optional arrays of controls to be displayed before and/or after each row, or above and below the table. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. The <code>controls</code> object can contain the optional <code>before</code>, <code>after</code>, <code>top</code>, and <code>bottom</code> properties, which are arrays of objects containing the <code>icon</code> (string), <code>action</code> (function), <code>html</code> (string), and <code>render</code> (function). If <code>html</code> is present, it overrides the icon and is rendered in its place. If <code>render</code> is present, it is used to render the control. Controls in the <code>before</code> or <code>after</code> arrays receive the record and index as the 2nd and 3rd parameters in the action function and the renderer function.</p>
+
+    <h5><code>pageSize<i>: number</i></code></h5>
+    <p>The number of records to display per page.</p>
+
+    <h5><code>pageSizeOptions<i>: &lt;Array>number</i></code></h5>
+    <p>An array of numbers representing the available page size options.</p>
+
+    <h5><code>placeholder<i>: string</i></code></h5>
+    <p>Text shown when the table has no records. Defaults to <code>"No Records"</code>. Set to an empty string to suppress. See <a href="./tablePlaceholder.html">Placeholder</a>.</p>
+
+    <h5><code>filtered-placeholder<i>: string</i></code></h5>
+    <p>Text shown when records exist but all are currently filtered or hidden. Defaults to <code>""</code> (no row shown). See <a href="./tablePlaceholder.html">Placeholder</a>.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+
+    <h5><code>setData(<i>object</i> options)<i>: undefined</i></code></h5>
+    <p>Sets the records and the fields and renders the table. If no fields are provided, they will be automatically generated from the keys of the first 100 records. The options object can contain the following properties:</p>
+    <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>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>
+    <p>Renders the fields as table headers. This is called automatically by setData, you should never have to call it.</p>
+
+    <h5><code>renderRecords()<i>: undefined</i></code></h5>
+    <p>Renders the records as table rows. This is called automatically by setData, you should never have to call it.</p>
+
+    <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>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>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>
+
+    <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>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>deleteSelected()<i>: undefined</i></code></h5>
+    <p>Deletes all currently selected records from the table.</p>
+
+    <h5><code>selectAllOnPage()<i>: undefined</i></code></h5>
+    <p>Selects all the records on the current page.</p>
+
+    <h5><code>deselectAllOnPage()<i>: undefined</i></code></h5>
+    <p>Deselects all the records on the current page.</p>
+
+    <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>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Table.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Resize.js"></script>
+  </content>
+</page>

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

@@ -0,0 +1,64 @@
+<page pageName="Table - Top and Bottom Controls" title="Top and Bottom Controls - Table - Kempo Docs">
+  <content location="head">
+    <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>
+  </content>
+  <content>
+
+    <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>
+    <p>Controls without a slot will be placed at the bottom of the table by default, to place a control on the top of the table give it a <code>slot="top"</code>.</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">"/src/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">"/src/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-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">'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="{{pathToRoot}}src/components/tableControls/ExportJson.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/tableControls/ExportCsv.js"></script>
+    <script type="module">
+      await window.customElements.whenDefined('k-table');
+      document.getElementById('topBottomControlsExample').setRecords(contacts);
+    </script>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Table.js"></script>
+  </content>
+</page>