kempo 2.9.2 → 2.10.0

package/src/components/Table.js

@@ -4,62 +4,26 @@ 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 Edit from './tableControls/Edit.js';
+import Hide from './tableControls/Hide.js';
+import HiddenCount from './tableControls/HiddenCount.js';
+import ShowAll from './tableControls/ShowAll.js';
+import Filters from './tableControls/Filters.js';
 import { toTitleCase } from '../utils/string.js';
-import { onEvent, dispatchEvent } from '../utils/element.js';
+import { onEvent, offEvent, dispatchEvent } from '../utils/element.js';
 
-export default class Table extends Component {
-  static controls = {
-    prevPage: {
-      render: (table) => {
-        const $button = document.createElement('button');
-        $button.classList.add('pq', 'no-btn');
-        $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', 'no-btn');
-        $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>'
-    }
-  };
+const selected = Symbol('selected');
+const hidden = Symbol('hidden');
+const index = Symbol('index');
+const editing = Symbol('editing');
 
+export default class Table extends Component {
   constructor({
     records = [],
     fields = [],
+    filters = [],
     controls = { before: [], after: [], top: [], bottom: [] },
+    enablePages = false,
     pageSize = 100,
     pageSizeOptions = [10, 25, 50, 100, 500],
     currentPage = 1,
@@ -71,11 +35,13 @@ export default class Table extends Component {
       fields: fields,
       records: records,
       controls: controls,
+      filters: filters,
       pageSize,
       pageSizeOptions,
       currentPage,
       enableSelection,
-      selectedIndexes: [], // Renamed property
+      enablePages,
+      sort: []
     });
 
     /* Init */
@@ -87,6 +53,7 @@ export default class Table extends Component {
         records: this.records,
         fields: this.fields,
         controls: this.controls,
+        filters: this.filters,
         pageSize: this.pageSize,
         pageSizeOptions: this.pageSizeOptions,
         currentPage: this.currentPage
@@ -95,6 +62,7 @@ export default class Table extends Component {
     }
     return false;
   }
+
   renderFields(){
     if(!this.rendered) return;
     const beforeControls = this.controls?.before?.length ? '<th></th>' : '';
@@ -120,84 +88,128 @@ export default class Table extends Component {
       });
     }
   }
-  renderRecords(){
-    if(!this.rendered) return;
+
+  renderRecords() {
+    if (!this.rendered) return;
     const $records = this.shadowRoot.getElementById('records');
     $records.innerHTML = '';
     const start = (this.currentPage - 1) * this.pageSize;
     const end = start + this.pageSize;
-    const paginatedRecords = this.records.slice(start, end);
+    const paginatedRecords = this.getDisplayedRecords().slice(start, end);
     let fetchRecords = false;
-    paginatedRecords.forEach((record, index) => {
-      const $tr = document.createElement('tr');
-      if (this.enableSelection) {
+    paginatedRecords.forEach((record) => {
+      $records.appendChild(this.renderRecord(record));
+    });
+    if (fetchRecords) {
+      dispatchEvent(this, 'fetchRecords', { start, end });
+    }
+  }
+
+  renderRecord(record){
+    const $tr = document.createElement('tr');
+    $tr.dataset.index = record[index];
+    if (this.enableSelection) {
+      const $td = document.createElement('td');
+      $td.classList.add('selection');
+      const $checkbox = document.createElement('input');
+      $checkbox.type = 'checkbox';
+      $checkbox.checked = record[selected];
+      $checkbox.addEventListener('change', (event) => {
+        record[selected] = !!event.target.checked;
+        dispatchEvent(this, 'selectionChange');
+      });
+      $td.appendChild($checkbox);
+      $tr.appendChild($td);
+    }
+    if (this.controls?.before?.length) {
+      $tr.appendChild(this.renderRowControls(this.controls.before, record));
+    }
+    if (record === null) {
+      const $td = document.createElement('td');
+      $td.colSpan = this.fields.length;
+      $td.innerHTML = '<i>Loading...</i>';
+      fetchRecords = true;
+      $tr.appendChild($td);
+    } else {
+      this.fields.forEach(({ name, formatter, calculator, type, editor }) => {
         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);
+        $td.dataset.field = name;
+        let value = record[name] || '';
+        if(record[editing]){
+          $tr.setAttribute('editing', true);
+          if (calculator) {
+            $td.appendChild(Table.editors.calculated(calculator(record, this)));
+          } else if(editor){
+            $td.appendChild(editor(value));
           } else {
-            this.selectedIndexes = this.selectedIndexes.filter(i => i !== start + index);
+            let editorGen = Table.editors[type || typeof value];
+            if(!editorGen){
+              editorGen = Table.editors.string;
+            }
+            $td.appendChild(editorGen(value));
           }
-          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, start + index));
-      }
-      if(record === null){
-        const $td = document.createElement('td');
-        $td.colSpan = this.fields.length;
-        $td.innerHTML = '<i>Loading...</i>';
-        fetchRecords = true;
-        $tr.appendChild($td);
-      } else {
-        this.fields.forEach(({name, formatter, calculator}, index) => {
-          const $td = document.createElement('td');
-          let value;
-          if(calculator){
-            value = calculator(record, this);
+        } else {
+          if (calculator) {
+            $td.innerHTML = calculator(record, this);
+          } else if (formatter) {
+            $td.innerHTML = formatter(value);
           } 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, start + index));
+        }
+        $tr.appendChild($td);
+      });
+    }
+    if (this.controls?.after?.length) {
+      $tr.appendChild(this.renderRowControls(this.controls.after, record));
+    }
+    return $tr;
+  }
+
+  editRecord(record){
+    record[editing] = true;
+    const $currentTr = this.shadowRoot.querySelector(`tr[data-index="${record[index]}"]`);
+    const $newTr = this.renderRecord(record);
+    $currentTr.replaceWith($newTr);
+    dispatchEvent(this, 'editingChange');
+  }
+  
+  saveEditedRecord(record){
+    record[editing] = false;
+    const $currentTr = this.shadowRoot.querySelector(`tr[data-index="${record[index]}"]`);
+    $currentTr.querySelectorAll('td').forEach(($td) => {
+      const field = $td.dataset.field;
+      const fieldDef = this.fields.find(f => f.name === field);
+      if(fieldDef && !fieldDef.calculator){ // calculated fields cannot be udated
+        const $input = $td.children.length === 1 ? $td.firstChild : $td.querySelector('input, select');
+        if ($input) {
+          record[field] = $input.value;
+        }
       }
-      $records.appendChild($tr);
     });
-    if(fetchRecords){
-      dispatchEvent(this, 'fetchRecords', { start, end });
-    }
+    const $newTr = this.renderRecord(record);
+    $currentTr.replaceWith($newTr);
+  }
+
+  cancelEditedRecord(record){
+    record[editing] = false;
+    const $currentTr = this.shadowRoot.querySelector(`tr[data-index="${record[index]}"]`);
+    const $newTr = this.renderRecord(record);
+    $currentTr.replaceWith($newTr);
+  }
+
+  recordIsEditing(record){
+    return record[editing];
   }
   
-  renderRowControls(controls = [], record, index) {
+  renderRowControls(controls = [], record) {
     if(!this.rendered) return;
     const $td = document.createElement('td');
-    controls.forEach(({ html, icon, action, render }) => {
+    controls.filter(c=>!!c).forEach(({ html, icon, action, render }) => {
       if(html){
         $td.appendChild(document.createRange().createContextualFragment(html));
       } else if(render && typeof(render) === 'function'){
-        const rendered = render(this, record, index);
+        const rendered = render(this, record);
         if(rendered instanceof HTMLElement){
           $td.appendChild(rendered);
         } else if(typeof(rendered) === 'string'){
@@ -208,7 +220,7 @@ export default class Table extends Component {
         $button.classList.add('pq', 'no-btn');
         $button.appendChild(new Icon(icon));
         if (action) {
-          onEvent($button, 'click', () => action(this, record, index));
+          onEvent($button, 'click', () => action(this, record));
         }
         $td.appendChild($button);
       }
@@ -220,7 +232,7 @@ export default class Table extends Component {
     if(!this.rendered) return;
     const $container = this.shadowRoot.getElementById(position);
     $container.innerHTML = '';
-    controls.forEach(({ html, icon, action, render }) => {
+    controls.filter(c=>!!c).forEach(({ html, icon, action, render }) => {
       if(html){
         $container.appendChild(document.createRange().createContextualFragment(html));
       } else if(render && typeof(render) === 'function'){
@@ -247,7 +259,7 @@ export default class Table extends Component {
   }
 
   getTotalPages() {
-    return Math.ceil(this.records.length / this.pageSize);
+    return Math.ceil(this.getDisplayedRecords().length / this.pageSize);
   }
 
   setPage(page) {
@@ -287,10 +299,18 @@ export default class Table extends Component {
     currentPage = false,
     enableSelection = false // Add enableSelection property
   } = {}) {
-    let rerender = false;
-    let rerenderControls = false;
+    let rerender = false,
+        rerenderControls = false,
+        pageCountBefore = this.getTotalPages(),
+        pageBefore = this.currentPage;
     if(records){
-      this.records = records;
+      this.records = records.map(r=>({...r}));
+      this.records.forEach((record, idx) => {
+        record[index] = idx;
+        record[selected] = false;
+        record[hidden] = false;
+        record[editing] = false;
+      });
       this.fields = fields || Table.extractFieldsFromRecords(this.records);
       rerender = true;
     }
@@ -321,13 +341,34 @@ export default class Table extends Component {
       this.renderControls(this.controls.top, 'top');
       this.renderControls(this.controls.bottom, 'bottom');
     }
+    const newPageCount = this.getTotalPages();
+    if(newPageCount !== pageCountBefore){
+      dispatchEvent(this, 'pageCountChanged', { totalPages: this.getTotalPages() });
+    }
+    if(pageBefore > newPageCount){
+      this.setPage(newPageCount); 
+    }
   }
 
   setRecords(records) {
-    this.records = records;
-    this.currentPage = 1;
+    let pageCountBefore = this.getTotalPages(),
+        pageBefore = this.currentPage;
+    this.records = records.map(r=>({...r}));
+    this.records.forEach((record, idx) => {
+      record[index] = idx;
+      record[selected] = false;
+      record[hidden] = false;
+      record[editing] = false;
+    });
     this.renderRecords();
     dispatchEvent(this, 'recordsSet', { records });
+    const newPageCount = this.getTotalPages();
+    if(newPageCount !== pageCountBefore){
+      dispatchEvent(this, 'pageCountChanged', { totalPages: this.getTotalPages() });
+    }
+    if(pageBefore > newPageCount){
+      this.setPage(newPageCount); 
+    }
   }
 
   setupFetchRecords(totalRecords, callback) {
@@ -346,66 +387,232 @@ export default class Table extends Component {
   }
 
   addRecord(record) {
+    record[selected] = false;
+    record[hidden] = false;
+    record[index] = this.records.length;
     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();
+  updateRecord(record, newData) {
+    let updated = false;
+    let originalRecord = this.records.find(r => r === record);
+    if (!originalRecord && record[index] !== undefined) {
+      originalRecord = this.records[record[index]];
+    }
+    Object.keys(newData).forEach(key => {
+      if (originalRecord.hasOwnProperty(key)) {
+        originalRecord[key] = newData[key];
+        updated = true;
+      }
+    });
+    if(updated){
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      if (
+        !this.enablePages ||
+        (originalRecord[index] >= start && originalRecord[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);
+  deleteRecord(record) {
+    let originalRecord = this.records.find(r => r === record),
+        totalPagesBefore = this.getTotalPages();
+    if (!originalRecord && record[index] !== undefined) {
+      originalRecord = this.records[record[index]];
+    }
+    if (originalRecord) {
+      const recordIndex = this.records.indexOf(originalRecord);
+      this.records.splice(recordIndex, 1);
+      // Update the index of remaining records
+      this.records.forEach((rec, idx) => {
+        rec[index] = idx;
+      });
       this.renderRecords();
-      dispatchEvent(this, 'recordDeleted', { index });
+      dispatchEvent(this, 'selectionChange');
+      dispatchEvent(this, 'recordDeleted', { index: recordIndex });
+      const totalPages = this.getTotalPages();
+      if (this.currentPage > totalPages) {
+        this.setPage(totalPages);
+      }
+      if(totalPages !== totalPagesBefore){
+        dispatchEvent(this, 'pageCountChanged', { totalPages });
+      }
     }
   }
 
+  deleteSelected() {
+    let totalPagesBefore = this.getTotalPages();
+    const selectedRecords = this.getSelectedRecords();
+    selectedRecords.forEach(record => {
+      let originalRecord = this.records.find(r => r === record);
+      if (!originalRecord && record[index] !== undefined) {
+        originalRecord = this.records[record[index]];
+      }
+      if (originalRecord) {
+        const recordIndex = this.records.indexOf(originalRecord);
+        this.records.splice(recordIndex, 1);
+      }
+    });
+    this.records.forEach((rec, idx) => {
+      rec[index] = idx;
+    });
+    this.renderRecords();
+    const totalPages = this.getTotalPages();
+      if (this.currentPage > totalPages) {
+        this.setPage(totalPages);
+      }
+      if(totalPages !== totalPagesBefore){
+        dispatchEvent(this, 'pageCountChanged', { totalPages });
+      }
+    dispatchEvent(this, 'selectionChange');
+  }
+
   getSelectedRecords() {
-    return this.selectedIndexes.map(index => this.records[index]);
+    const selectedRecords = this.records.filter(record => {
+      const isSelected = record[selected];
+      return isSelected;
+    });
+    return selectedRecords;
   }
 
   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.records[i][selected] = true;
     }
     this.renderRecords();
-    dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+    setTimeout(() => {
+      dispatchEvent(this, 'selectionChange');
+    }, 0);
   }
 
   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);
+    for (let i = start; i < end; i++) {
+      this.records[i][selected] = false;
+    }
     this.renderRecords();
-    dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+    setTimeout(() => {
+      dispatchEvent(this, 'selectionChange');
+    }, 0);
   }
 
   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)) {
+      if (!this.records[i][selected]) {
         return false;
       }
     }
     return true;
   }
 
+  sortBy(field, asc = true) {
+    this.sort = this.sort.filter(item => item.name !== field);
+    this.sort.push({ name: field, asc });
+    this.renderRecords();
+  }
+
+  hideRecord(record) {
+    let originalRecord = this.records.find(r => r === record);
+    if (!originalRecord && record[index] !== undefined) {
+      originalRecord = this.records[record[index]];
+    }
+    if (originalRecord) {
+      originalRecord[hidden] = true;
+      this.renderRecords();
+      dispatchEvent(this, 'recordHidden');
+    }
+  }
+
+  showRecord(record) {
+    let originalRecord = this.records.find(r => r === record);
+    if (!originalRecord && record[index] !== undefined) {
+      originalRecord = this.records[record[index]];
+    }
+    if (originalRecord) {
+      originalRecord[hidden] = false;
+      this.renderRecords();
+      dispatchEvent(this, 'recordShown');
+    }
+  }
+
+  showAllRecords() {
+    this.records.forEach(record => {
+      record[hidden] = false; 
+    });
+    this.renderRecords();
+    dispatchEvent(this, 'recordShown allRecordsShown');
+  }
+
+  addFilter(field, condition, value) {
+    this.filters.push({ field, condition, value });
+    dispatchEvent(this, 'filterAdded filterChange');
+    this.renderRecords();
+  }
+  
+  removeFilter(field, condition, value) {
+    this.filters = this.filters.filter(f => f.field !== field || f.condition !== condition || f.value !== value);
+    dispatchEvent(this, 'filterRemoved filterChange');
+    this.renderRecords();
+  }
+
+  getDisplayedRecords() {
+    let displayedRecords = this.records.filter(record => !record[hidden]);
+
+    this.filters.forEach(({ field, condition, value }) => {
+      displayedRecords = displayedRecords.filter(record => {  
+        if (condition === 'eq') {
+          return record[field] === value;
+        }
+        if (condition === 'neq') {
+          return record[field] !== value;
+        }
+        if (condition === 'gt') {
+          return record[field] > value;
+        }
+        if (condition === 'lt') {
+          return record[field] < value;
+        }
+        if (condition === 'gte') {
+          return record[field] >= value;
+        }
+        if (condition === 'lte') {
+          return record[field] <= value;
+        }
+        if (condition === 'contains') {
+          return record[field].includes(value);
+        }
+        if (condition === 'ncontains') {
+          return !record[field].includes(value);
+        }
+        return true;
+      });
+    });
+
+    this.sort.forEach(({ name, asc }) => {
+      displayedRecords.sort((a, b) => {
+        if (a[name] < b[name]) return asc ? -1 : 1;
+        if (a[name] > b[name]) return asc ? 1 : -1;
+        return 0;
+      });
+    });
+
+    return displayedRecords;
+  }
+
+  getHiddenRecords() {
+    return this.records.filter(record => record[hidden]);
+  }
+
   get shadowTemplate(){
     return /*html*/`
       ${super.shadowTemplate}
@@ -419,6 +626,7 @@ export default class Table extends Component {
       </div>
     `;
   }
+
   get shadowStyles(){
     return /*css*/`
       ${super.shadowStyles}
@@ -464,6 +672,15 @@ export default class Table extends Component {
         width: 1.35rem;
         height: 1.35rem;
       }
+      tr[editing] td {
+        padding: 0;
+      }
+      tr[editing] input,
+      tr[editing] select,
+      tr[editing] .input {
+        padding: calc(0.75 * var(--spacer)) var(--spacer) !important;
+        width: 100%;
+      }
     `;
   }
 
@@ -473,6 +690,119 @@ export default class Table extends Component {
       Object.keys(record).forEach( name => names.add(name) )
     });
     return [...names].map(name=>({name,label:toTitleCase(name)}));
-  }
+  };
+
+  static controls = {
+    prevPage: {
+      render: (table) => {
+        const $button = document.createElement('button');
+        $button.classList.add('pq', 'no-btn');
+        $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', 'no-btn');
+        $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>'
+    },
+    edit: {
+      render: (table, record) => new Edit(table, record)
+    },
+    hide: {
+      render: (table, record) => new Hide(table, record)
+    },
+    hiddenCount: {
+      render: (table) => new HiddenCount(table)
+    },
+    showAll: {
+      render: (table) => new ShowAll(table)
+    },
+    filters: {
+      render: (table) => new Filters(table)
+    }
+  };
+
+  static format(value){
+    const f = Array.isArray(value) ? Table.formatters.array : Table.formatters[typeof value];
+    return f(value);
+  };
+
+  static formatters = {
+    string: v=>v,
+    number: v=>`${v}`,
+    date: v=>v.toLocaleDateString(),
+    boolean: v=>v ? 'True' : 'False',
+    array: v=>v.map(i=>Table.format(i)).join(', '),
+    'undefined': v=>'',
+    'null': v=>'<code>null</code>'
+  };
+
+  static editors = {
+    string: (value) => {
+      const $i = document.createElement('input');
+      $i.value = value;
+      return $i;
+    },
+    number: (value) => {
+      const $i = document.createElement('input');
+      $i.type = 'number';
+      $i.value = value;
+      return $i;
+    },
+    date: (value) => {
+      const $i = document.createElement('input');
+      $i.type = 'date';
+      $i.value = value;
+      return $i;
+    },
+    boolean: (value) => {
+      const $i = document.createElement('select');
+      $i.innerHTML = `
+        <option value="true" ${value ? 'selected' : ''}>True</option>
+        <option value="false" ${!value ? 'selected' : ''}>False</option>
+      `;
+      $i.value = value;
+      return $i;
+    },
+    calculated: (value) => {
+      const $i = document.createElement('input');
+      $i.disabled = true;
+      $i.value = value;
+      return $i;
+    }
+  };
 }
 window.customElements.define('k-table', Table);