kempo 2.7.4 → 2.9.0

package/docs/kempo/components/Table.js

@@ -1 +1 @@
-import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1,o={before:[],after:[],top:[],bottom:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[],top:[],bottom:[]}}),e&&this.setData(e,t,o)}async render(e){return!!await super.render(e)&&(this.renderControls(this.controls.top,"top"),this.renderFields(),this.renderRecords(),this.renderControls(this.controls.bottom,"bottom"),!0)}renderFields(){const e=this.controls?.before?.length?"<th></th>":"",t=this.controls?.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){const e=this.shadowRoot.getElementById("records");e.innerHTML="",this.records.forEach((t=>{const o=document.createElement("tr");this.controls?.before?.length&&o.appendChild(this.renderRowControls(this.controls.before,t)),this.fields.forEach((({name:e})=>{const n=document.createElement("td");let r=t[e]||"";Array.isArray(r)&&(r=r.join(", ")),n.innerHTML=r,o.appendChild(n)})),this.controls?.after?.length&&o.appendChild(this.renderRowControls(this.controls.after,t)),e.appendChild(o)}))}renderRowControls(e=[],t){const o=document.createElement("td");return e.forEach((({html:e,icon:n,action:r,render:s})=>{if(e)o.appendChild(document.createRange().createContextualFragment(e));else if(s&&"function"==typeof s){const e=s(this,t);e instanceof HTMLElement?o.appendChild(e):"string"==typeof e&&o.appendChild(document.createRange().createContextualFragment(e))}else if(n){const e=document.createElement("button");e.appendChild(new Icon(n)),r&&e.addEventListener("click",(()=>r(this,t))),o.appendChild(e)}})),o}renderControls(e=[],t){const o=document.createElement("div");e.forEach((({html:e,icon:t,action:n,render:r})=>{if(e)o.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?o.appendChild(e):"string"==typeof e&&o.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.appendChild(new Icon(t)),n&&e.addEventListener("click",(()=>n(this))),o.appendChild(e)}})),this.shadowRoot.getElementById(t).innerHTML="",this.shadowRoot.getElementById(t).appendChild(o)}setData(e,t=!1,o={before:[],after:[],top:[],bottom:[]}){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.controls=o,this.renderControls(this.controls.top,"top"),this.renderFields(),this.renderRecords(),this.renderControls(this.controls.bottom,"bottom")}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <div id="top"></div>\n        <table>\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n        <div id="bottom"></div>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n      }\n    `}static extractFieldsFromRecords(e,t=100){const o=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>o.add(e)))})),[...o].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
+import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";import{onEvent,dispatchEvent}from"../utils/element.js";export default class Table extends Component{static controls={prevPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq"),t.appendChild(new Icon("chevron-left")),onEvent(t,"click",(()=>e.prevPage())),onEvent(e,"pageChange",(()=>{t.disabled=1===e.getCurrentPage()})),t}},nextPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq"),t.appendChild(new Icon("chevron-right")),onEvent(t,"click",(()=>e.nextPage())),onEvent(e,"pageChange",(()=>{t.disabled=e.getCurrentPage()===e.getTotalPages()})),t}},pageSelect:{render:e=>new PageSelect(e)},pageSize:{render:e=>new PageSize(e)},spacer:{html:'<div class="flex"></div>'}};constructor({records:e=[],fields:t=[],controls:n={before:[],after:[],top:[],bottom:[]},pageSize:s=100,pageSizeOptions:r=[10,25,50,100,500],currentPage:a=1}={}){super(),this.registerProps({fields:t,records:e,controls:n,pageSize:s,pageSizeOptions:r,currentPage:a})}async render(e){return!!await super.render(e)&&(this.setData({records:this.records,fields:this.fields,controls:this.controls,pageSize:this.pageSize,pageSizeOptions:this.pageSizeOptions,currentPage:this.currentPage}),!0)}renderFields(){if(!this.rendered)return;const e=this.controls?.before?.length?"<th></th>":"",t=this.controls?.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";const t=(this.currentPage-1)*this.pageSize,n=t+this.pageSize;this.records.slice(t,n).forEach(((s,r)=>{const a=document.createElement("tr");this.controls?.before?.length&&a.appendChild(this.renderRowControls(this.controls.before,s,t+r)),this.fields.forEach((({name:e,formatter:r,calculator:o})=>{const i=document.createElement("td");if(null===s)i.innerHTML="Loading...",dispatchEvent(this,"fetchRecords",{start:t,end:n});else{let t;o?t=o(s,this):(t=s[e]||"",Array.isArray(t)?t=r?t.map(r).join(", "):t.join(", "):r&&(t=r(t))),i.innerHTML=t}a.appendChild(i)})),this.controls?.after?.length&&a.appendChild(this.renderRowControls(this.controls.after,s,t+r)),e.appendChild(a)}))}renderRowControls(e=[],t,n){if(!this.rendered)return;const s=document.createElement("td");return e.forEach((({html:e,icon:r,action:a,render:o})=>{if(e)s.appendChild(document.createRange().createContextualFragment(e));else if(o&&"function"==typeof o){const e=o(this,t,n);e instanceof HTMLElement?s.appendChild(e):"string"==typeof e&&s.appendChild(document.createRange().createContextualFragment(e))}else if(r){const e=document.createElement("button");e.classList.add("pq"),e.appendChild(new Icon(r)),a&&onEvent(e,"click",(()=>a(this,t,n))),s.appendChild(e)}})),s}renderControls(e=[],t){if(!this.rendered)return;const n=this.shadowRoot.getElementById(t);n.innerHTML="",e.forEach((({html:e,icon:t,action:s,render:r})=>{if(e)n.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?n.appendChild(e):"string"==typeof e&&n.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.classList.add("pq"),e.appendChild(new Icon(t)),s&&onEvent(e,"click",(()=>s(this))),n.appendChild(e)}}))}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.records.length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.renderRecords(),dispatchEvent(this,"pageChange"))}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}setPageSize(e){this.pageSize=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"pageSizeChange")}setData({records:e=!1,fields:t=!1,controls:n=!1,pageSize:s=!1,pageSizeOptions:r=!1,currentPage:a=!1}={}){let o=!1,i=!1;e&&(this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),o=!0),s&&(this.pageSize=s,o=!0),r&&(this.pageSizeOptions=r),n&&(this.controls=n,i=!0),a&&(this.currentPage=a,o=!0),o&&(this.renderFields(),this.renderRecords()),i&&(this.renderControls(this.controls.top,"top"),this.renderControls(this.controls.bottom,"bottom"))}setRecords(e){this.records=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"recordsSet",{records:e})}setupFetchRecords(e,t){const n=this.records.length;n<e&&(this.records.length=e,this.records.fill(null,n)),onEvent(this,"fetchRecords",(async e=>{const{start:n,end:s}=e.detail,r=await t(n,s-n);this.records.splice(n,r.length,...r),this.renderRecords()}))}addRecord(e){this.records.push(e),this.renderRecords(),dispatchEvent(this,"recordAdded",{record:e})}updateRecord(e,t){this.records[e]=t;const n=(this.currentPage-1)*this.pageSize,s=n+this.pageSize;e>=n&&e<s&&this.renderRecords()}deleteRecord(e){e>=0&&e<this.records.length&&(this.records.splice(e,1),this.renderRecords(),dispatchEvent(this,"recordDeleted",{index:e}))}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <div id="top"></div>\n        <table class="b0">\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n        <div id="bottom"></div>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n      }\n      #top, #bottom {\n        display: flex;\n      }\n      th {\n        border-top: none;\n      }\n      tr:last-child td:first-child {\n        border-bottom-left-radius: 0;\n      }\n      tr:last-child td:last-child {\n        border-bottom-right-radius: 0;\n      }\n      tr:last-child td {\n        border-bottom: none;\n      }\n      th:first-child, td:first-child {\n        border-left: none;\n      }\n      th:last-child, td:last-child {\n        border-right: none;\n      }\n      #top:not(:empty) {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #bottom:not(:empty) {\n        border-top: 1px solid var(--c_border);\n      }\n    `}static extractFieldsFromRecords(e,t=100){const n=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>n.add(e)))})),[...n].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);class PageSelect extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}connectedCallback(){this.render()}async render(){return!!await super.render()&&(this.updateOptions(),!0)}updateOptions(){const e=this.shadowRoot.getElementById("pageSelect");e.innerHTML="";for(let t=1;t<=this.table.getTotalPages();t++){const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)}e.value=this.table.getCurrentPage();this.shadowRoot.getElementById("totalPages").textContent=this.table.getTotalPages(),onEvent(e,"change",(()=>{this.table.setPage(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{this.updateOptions()})),onEvent(this.table,"pageChange",(()=>{e.value=this.table.getCurrentPage()}))}get shadowTemplate(){return'\n      <select id="pageSelect" class="mxq"></select>\n      <label> out of <span id="totalPages"></span></label>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      #pageSelect, label {\n        display: inline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-select",PageSelect);class PageSize extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}connectedCallback(){this.render()}async render(){if(await super.render()){const e=this.shadowRoot.getElementById("pageSizeSelect");return this.table.pageSizeOptions.forEach((t=>{const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)})),e.value=this.table.pageSize,onEvent(e,"change",(()=>{this.table.setPageSize(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{e.value=this.table.pageSize})),!0}return!1}get shadowTemplate(){return'\n      <label for="pageSizeSelect">Page Size: </label>\n      <select id="pageSizeSelect" class="mxq"></select>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-size",PageSize);

package/icons/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>

package/icons/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.7.4",
+  "version": "2.9.0",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/Table.js

@@ -1,68 +1,196 @@
 import Component from './Component.js';
-import Icon from './Icon.js'; // Import Icon component
+import Icon from './Icon.js';
+import SelectCount from './tableControls/SelectCount.js';
+import PageSelect from './tableControls/PageSelect.js';
+import PageSize from './tableControls/PageSize.js';
+import DeleteSelected from './tableControls/DeleteSelected.js';
 import { toTitleCase } from '../utils/string.js';
+import { onEvent, dispatchEvent } from '../utils/element.js';
 
 export default class Table extends Component {
-  constructor(data = false, fields = false, controls = { before: [], after: [], top: [], bottom: [] }){
+  static controls = {
+    prevPage: {
+      render: (table) => {
+        const $button = document.createElement('button');
+        $button.classList.add('pq');
+        $button.appendChild(new Icon('chevron-left'));
+        onEvent($button, 'click', () => table.prevPage());
+
+        // Disable button if on the first page
+        onEvent(table, 'pageChange', () => {
+          $button.disabled = table.getCurrentPage() === 1;
+        });
+
+        return $button;
+      }
+    },
+    nextPage: {
+      render: (table) => {
+        const $button = document.createElement('button');
+        $button.classList.add('pq');
+        $button.appendChild(new Icon('chevron-right'));
+        onEvent($button, 'click', () => table.nextPage());
+
+        // Disable button if on the last page
+        onEvent(table, 'pageChange', () => {
+          $button.disabled = table.getCurrentPage() === table.getTotalPages();
+        });
+
+        return $button;
+      }
+    },
+    pageSelect: {
+      render: (table) => new PageSelect(table)
+    },
+    pageSize: {
+      render: (table) => new PageSize(table)
+    },
+    selectCount: {
+      render: (table) => new SelectCount(table)
+    },
+    deleteSelected: {
+      render: (table) => new DeleteSelected(table)
+    },
+    spacer: {
+      html: '<div class="flex"></div>'
+    }
+  };
+
+  constructor({
+    records = [],
+    fields = [],
+    controls = { before: [], after: [], top: [], bottom: [] },
+    pageSize = 100,
+    pageSizeOptions = [10, 25, 50, 100, 500],
+    currentPage = 1,
+    enableSelection = false,
+  } = {}) {
     super();
 
     this.registerProps({
-      fields: [],
-      records: [],
-      controls: { before: [], after: [], top: [], bottom: [] }
+      fields: fields,
+      records: records,
+      controls: controls,
+      pageSize,
+      pageSizeOptions,
+      currentPage,
+      enableSelection,
+      selectedIndexes: [], // Renamed property
     });
 
     /* Init */
-    if(data){
-      this.setData(data, fields, controls);
-    }
+    // 
   }
   async render(force){
     if(await super.render(force)){
-      this.renderControls(this.controls.top, 'top');
-      this.renderFields();
-      this.renderRecords();
-      this.renderControls(this.controls.bottom, 'bottom');
+      this.setData({
+        records: this.records,
+        fields: this.fields,
+        controls: this.controls,
+        pageSize: this.pageSize,
+        pageSizeOptions: this.pageSizeOptions,
+        currentPage: this.currentPage
+      });
       return true;
     }
     return false;
   }
   renderFields(){
+    if(!this.rendered) return;
     const beforeControls = this.controls?.before?.length ? '<th></th>' : '';
     const afterControls = this.controls?.after?.length ? '<th></th>' : '';
-    this.shadowRoot.getElementById('fields').innerHTML = `${beforeControls}${this.fields.map(({label})=>`<th>${label}</th>`).join('')}${afterControls}`;
+    const selectionControl = this.enableSelection ? '<th class="selection"><input type="checkbox" id="select-all"></th>' : '';
+    this.shadowRoot.getElementById('fields').innerHTML = `${selectionControl}${beforeControls}${this.fields.map(({label})=>`<th>${label}</th>`).join('')}${afterControls}`;
+
+    if (this.enableSelection) {
+      const selectAllCheckbox = this.shadowRoot.getElementById('select-all');
+      selectAllCheckbox.addEventListener('change', () => {
+        if (selectAllCheckbox.checked) {
+          this.selectAllOnPage();
+        } else {
+          this.deselectAllOnPage();
+        }
+      });
+      onEvent(this, 'selectionChange pageChange', () => {
+        if(this.allOnPageSelected()){
+          selectAllCheckbox.checked = true;
+        } else {
+          selectAllCheckbox.checked = false;
+        }
+      });
+    }
   }
   renderRecords(){
+    if(!this.rendered) return;
     const $records = this.shadowRoot.getElementById('records');
     $records.innerHTML = '';
-    this.records.forEach((record) => {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = start + this.pageSize;
+    const paginatedRecords = this.records.slice(start, end);
+    paginatedRecords.forEach((record, index) => {
       const $tr = document.createElement('tr');
+      if (this.enableSelection) {
+        const $td = document.createElement('td');
+        $td.classList.add('selection');
+        const $checkbox = document.createElement('input');
+        $checkbox.type = 'checkbox';
+        $checkbox.checked = this.selectedIndexes.includes(start + index);
+        $checkbox.addEventListener('change', () => {
+          if ($checkbox.checked) {
+            this.selectedIndexes.push(start + index);
+          } else {
+            this.selectedIndexes = this.selectedIndexes.filter(i => i !== start + index);
+          }
+          dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+        });
+        $td.appendChild($checkbox);
+        $tr.appendChild($td);
+      }
       if(this.controls?.before?.length){
-        $tr.appendChild(this.renderRowControls(this.controls.before, record));
+        $tr.appendChild(this.renderRowControls(this.controls.before, record, start + index));
       }
-      this.fields.forEach(({name}) => {
+      this.fields.forEach(({name, formatter, calculator}) => {
         const $td = document.createElement('td');
-        let value = record[name] || '';
-        if (Array.isArray(value)) {
-          value = value.join(', ');
+        if (record === null) {
+          $td.innerHTML = 'Loading...';
+            dispatchEvent(this, 'fetchRecords', { start, end });
+        } else {
+          let value;
+          if(calculator){
+            value = calculator(record, this);
+          } else {
+            value = record[name] || '';
+            if (Array.isArray(value)) {
+              if(formatter){
+                value = value.map(formatter).join(', ');
+              } else {
+                value = value.join(', ');
+              }
+            } else {
+              if(formatter){
+                value = formatter(value);
+              }
+            }
+          }
+          $td.innerHTML = value;
         }
-        $td.innerHTML = value;
         $tr.appendChild($td);
       });
       if(this.controls?.after?.length){
-        $tr.appendChild(this.renderRowControls(this.controls.after, record));
+        $tr.appendChild(this.renderRowControls(this.controls.after, record, start + index));
       }
       $records.appendChild($tr);
     });
   }
   
-  renderRowControls(controls = [], record) {
+  renderRowControls(controls = [], record, index) {
+    if(!this.rendered) return;
     const $td = document.createElement('td');
     controls.forEach(({ html, icon, action, render }) => {
       if(html){
         $td.appendChild(document.createRange().createContextualFragment(html));
       } else if(render && typeof(render) === 'function'){
-        const rendered = render(this, record);
+        const rendered = render(this, record, index);
         if(rendered instanceof HTMLElement){
           $td.appendChild(rendered);
         } else if(typeof(rendered) === 'string'){
@@ -70,9 +198,10 @@ export default class Table extends Component {
         }
       } else if(icon){
         const $button = document.createElement('button');
+        $button.classList.add('pq');
         $button.appendChild(new Icon(icon));
         if (action) {
-          $button.addEventListener('click', () => action(this, record));
+          onEvent($button, 'click', () => action(this, record, index));
         }
         $td.appendChild($button);
       }
@@ -81,7 +210,9 @@ export default class Table extends Component {
   }
 
   renderControls(controls = [], position) {
-    const $container = document.createElement('div');
+    if(!this.rendered) return;
+    const $container = this.shadowRoot.getElementById(position);
+    $container.innerHTML = '';
     controls.forEach(({ html, icon, action, render }) => {
       if(html){
         $container.appendChild(document.createRange().createContextualFragment(html));
@@ -94,25 +225,178 @@ export default class Table extends Component {
         }
       } else if(icon){
         const $button = document.createElement('button');
+        $button.classList.add('pq');
         $button.appendChild(new Icon(icon));
         if (action) {
-          $button.addEventListener('click', () => action(this));
+          onEvent($button, 'click', () => action(this));
         }
         $container.appendChild($button);
       }
     });
-    this.shadowRoot.getElementById(position).innerHTML = '';
-    this.shadowRoot.getElementById(position).appendChild($container);
   }
 
-  setData(records, fields = false, controls = { before: [], after: [], top: [], bottom: [] }){
+  getCurrentPage() {
+    return this.currentPage;
+  }
+
+  getTotalPages() {
+    return Math.ceil(this.records.length / this.pageSize);
+  }
+
+  setPage(page) {
+    if (page < 1 || page > this.getTotalPages()) return;
+    this.currentPage = page;
+    this.renderRecords();
+    // Trigger page change event
+    dispatchEvent(this, 'pageChange');
+  }
+
+  nextPage() {
+    if (this.currentPage < this.getTotalPages()) {
+      this.setPage(this.currentPage + 1);
+    }
+  }
+
+  prevPage() {
+    if (this.currentPage > 1) {
+      this.setPage(this.currentPage - 1);
+    }
+  }
+
+  setPageSize(pageSize) {
+    this.pageSize = pageSize;
+    this.currentPage = 1;
+    this.renderRecords();
+    // Trigger page size change event
+    dispatchEvent(this, 'pageSizeChange');
+  }
+
+  setData({
+    records = false,
+    fields = false,
+    controls = false,
+    pageSize = false,
+    pageSizeOptions = false,
+    currentPage = false,
+    enableSelection = false // Add enableSelection property
+  } = {}) {
+    let rerender = false;
+    let rerenderControls = false;
+    if(records){
+      this.records = records;
+      this.fields = fields || Table.extractFieldsFromRecords(this.records);
+      rerender = true;
+    }
+    if (pageSize) {
+      this.pageSize = pageSize;
+      rerender = true;
+    }
+    if (pageSizeOptions) {
+      this.pageSizeOptions = pageSizeOptions;
+    }
+    if (controls) {
+      this.controls = controls;
+      rerenderControls = true;
+    }
+    if(currentPage){
+      this.currentPage = currentPage;
+      rerender = true;
+    }
+    if(enableSelection !== undefined){
+      this.enableSelection = enableSelection;
+      rerender = true;
+    }
+    if(rerender){
+      this.renderFields();
+      this.renderRecords();
+    }
+    if(rerenderControls){
+      this.renderControls(this.controls.top, 'top');
+      this.renderControls(this.controls.bottom, 'bottom');
+    }
+  }
+
+  setRecords(records) {
     this.records = records;
-    this.fields = fields || Table.extractFieldsFromRecords(this.records);
-    this.controls = controls;
-    this.renderControls(this.controls.top, 'top');
-    this.renderFields();
+    this.currentPage = 1;
+    this.renderRecords();
+    dispatchEvent(this, 'recordsSet', { records });
+  }
+
+  setupFetchRecords(totalRecords, callback) {
+    const previousLength = this.records.length;
+    if (previousLength < totalRecords) {
+      this.records.length = totalRecords;
+      this.records.fill(null, previousLength);
+    }
+
+    onEvent(this, 'fetchRecords', async (event) => {
+      const { start, end } = event.detail;
+      const records = await callback(start, end - start);
+      this.records.splice(start, records.length, ...records);
+      this.renderRecords();
+    });
+  }
+
+  addRecord(record) {
+    this.records.push(record);
+    this.renderRecords();
+    dispatchEvent(this, 'recordAdded', { record });
+  }
+
+  updateRecord(index, newRecord) {
+    this.records[index] = newRecord;
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = start + this.pageSize;
+    if (index >= start && index < end) {
+      this.renderRecords();
+    }
+  }
+
+  deleteRecord(index) {
+    if (index >= 0 && index < this.records.length) {
+      // Deselect the record before deleting
+      this.selectedIndexes = this.selectedIndexes.filter(i => i !== index);
+      dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+      this.records.splice(index, 1);
+      this.renderRecords();
+      dispatchEvent(this, 'recordDeleted', { index });
+    }
+  }
+
+  getSelectedRecords() {
+    return this.selectedIndexes.map(index => this.records[index]);
+  }
+
+  selectAllOnPage() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = Math.min(start + this.pageSize, this.records.length);
+    for (let i = start; i < end; i++) {
+      if (!this.selectedIndexes.includes(i)) {
+        this.selectedIndexes.push(i);
+      }
+    }
     this.renderRecords();
-    this.renderControls(this.controls.bottom, 'bottom');
+    dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+  }
+
+  deselectAllOnPage() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = Math.min(start + this.pageSize, this.records.length);
+    this.selectedIndexes = this.selectedIndexes.filter(index => index < start || index >= end);
+    this.renderRecords();
+    dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+  }
+
+  allOnPageSelected() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = Math.min(start + this.pageSize, this.records.length);
+    for (let i = start; i < end; i++) {
+      if (!this.selectedIndexes.includes(i)) {
+        return false;
+      }
+    }
+    return true;
   }
 
   get shadowTemplate(){
@@ -120,7 +404,7 @@ export default class Table extends Component {
       ${super.shadowTemplate}
       <div class="responsive-table">
         <div id="top"></div>
-        <table>
+        <table class="b0">
           <thead id="fields"></thead>
           <tbody id="records"></tbody>
         </table>
@@ -134,6 +418,44 @@ export default class Table extends Component {
       :host {
         display: block;
         margin-bottom: var(--spacer);
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+      }
+      #top, #bottom {
+        display: flex;
+      }
+      th {
+        border-top: none;
+      }
+      tr:last-child td:first-child {
+        border-bottom-left-radius: 0;
+      }
+      tr:last-child td:last-child {
+        border-bottom-right-radius: 0;
+      }
+      tr:last-child td {
+        border-bottom: none;
+      }
+      th:first-child, td:first-child {
+        border-left: none;
+      }
+      th:last-child, td:last-child {
+        border-right: none;
+      }
+      #top:not(:empty) {
+        border-bottom: 1px solid var(--c_border);
+      }
+      #bottom:not(:empty) {
+        border-top: 1px solid var(--c_border);
+      }
+      th.selection, td.selection {
+        width: 50px;
+      }
+      th.selection input,
+      td.selection input {
+        margin: 0;
+        width: 1.35rem;
+        height: 1.35rem;
       }
     `;
   }

package/src/components/tableControls/DeleteSelected.js

@@ -0,0 +1,58 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class DeleteSelected extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if (await super.render()) {
+      this.updateButtonState();
+      const $button = this.shadowRoot.getElementById('deleteSelectedButton');
+      onEvent($button, 'click', () => this.deleteSelected());
+      onEvent(this.table, 'selectionChange', () => this.updateButtonState());
+      return true;
+    }
+    return false;
+  }
+
+  deleteSelected() {
+    const selectedIndexes = this.table.selectedIndexes;
+    selectedIndexes.sort((a, b) => b - a); // Sort in descending order
+    selectedIndexes.forEach(index => this.table.deleteRecord(index));
+    this.table.selectedIndexes = [];
+    this.table.renderRecords();
+    this.updateButtonState();
+  }
+
+  updateButtonState() {
+    const $button = this.shadowRoot.getElementById('deleteSelectedButton');
+    $button.disabled = this.table.selectedIndexes.length === 0;
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="deleteSelectedButton" class="pq">
+        <k-icon name="delete"></k-icon>
+      </button>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      button {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-delete-selected', DeleteSelected);

package/src/components/tableControls/PageSelect.js

@@ -0,0 +1,68 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class PageSelect extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if(await super.render()){
+      this.updateOptions();
+      return true;
+    }
+    return false;
+  }
+
+  updateOptions() {
+    const $select = this.shadowRoot.getElementById('pageSelect');
+    $select.innerHTML = '';
+    for (let i = 1; i <= this.table.getTotalPages(); i++) {
+      const $option = document.createElement('option');
+      $option.value = i;
+      $option.textContent = i;
+      $select.appendChild($option);
+    }
+    $select.value = this.table.getCurrentPage();
+    const $totalPages = this.shadowRoot.getElementById('totalPages');
+    $totalPages.textContent = this.table.getTotalPages();
+
+    onEvent($select, 'change', () => {
+      this.table.setPage(parseInt($select.value));
+    });
+
+    onEvent(this.table, 'pageSizeChange', () => {
+      this.updateOptions();
+    });
+
+    onEvent(this.table, 'pageChange', () => {
+      $select.value = this.table.getCurrentPage();
+    });
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <select id="pageSelect" class="mxq"></select>
+      <label> out of <span id="totalPages"></span></label>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      #pageSelect, label {
+        display: inline;
+      }
+      label {
+        white-space: nowrap;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-page-select', PageSelect);