kempo 2.9.4 → 2.10.1

package/src/components/Table.js

@@ -1,106 +1,118 @@
 import Component from './Component.js';
-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';
+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 = [],
-    controls = { before: [], after: [], top: [], bottom: [] },
-    pageSize = 100,
+    filters = [],
+    enablePages = false,
+    pageSize = 50,
     pageSizeOptions = [10, 25, 50, 100, 500],
     currentPage = 1,
     enableSelection = false,
+    enableSorting = false
   } = {}) {
     super();
 
-    this.registerProps({
-      fields: fields,
-      records: records,
-      controls: controls,
+    this.registerAttributes({
+      enablePages,
       pageSize,
-      pageSizeOptions,
       currentPage,
+      pageSizeOptions,
       enableSelection,
-      selectedIndexes: [], // Renamed property
+      enableSorting
     });
 
-    /* Init */
-    // 
+    this.registerProps({
+      fields: fields,
+      records: records,
+      filters: filters,
+      sort: [],
+      columnSizes: {},
+      fetchPending: false
+    });
   }
   async render(force){
     if(await super.render(force)){
       this.setData({
         records: this.records,
         fields: this.fields,
-        controls: this.controls,
-        pageSize: this.pageSize,
-        pageSizeOptions: this.pageSizeOptions,
-        currentPage: this.currentPage
+        filters: this.filters
       });
       return true;
     }
     return false;
   }
+
+
+  /*
+    Render Functions
+  */
+
   renderFields(){
     if(!this.rendered) return;
-    const beforeControls = this.controls?.before?.length ? '<th></th>' : '';
-    const afterControls = this.controls?.after?.length ? '<th></th>' : '';
-    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}`;
+    this.calculateColumnSizes();
+    this.hasTopControls()?this.setAttribute('top-controls', 'true'):this.removeAttribute('top-controls');
+    this.hasBottomControls()?this.setAttribute('bottom-controls', 'true'):this.removeAttribute('bottom-controls');
+
+    const $fields = this.shadowRoot.getElementById('fields');
+    $fields.innerHTML = '';
+
+    if(this.enableSelection){
+      const $selectDiv = document.createElement('div');
+      $selectDiv.classList.add('field', 'controls', 'cell', 'field-select');
+      $selectDiv.style.width = '40px';
+      $selectDiv.innerHTML = `<input type="checkbox" id="select-all" />`;
+      $fields.appendChild($selectDiv);
+    }
+    if(this.hasBeforeControls()){
+      const $beforeDiv = document.createElement('div');
+      $beforeDiv.classList.add('field', 'cell', 'field-before-controls');
+      $beforeDiv.style.width = this.columnSizes.beforeControls + 'px';
+      $fields.appendChild($beforeDiv);
+    }
+    this.fields.forEach( ({name, label, hidden}) => {
+      if (hidden) return; // Skip hidden fields
+      const $fieldDiv = document.createElement('div');
+      $fieldDiv.classList.add('field', 'cell');
+      $fieldDiv.style.width = this.columnSizes[name] + 'px';
+      $fieldDiv.innerHTML = label;
+      if (this.enableSorting) {
+        $fieldDiv.style.cursor = 'pointer';
+        const currentSort = this.sort.find(s => s.name === name);
+        if (currentSort) {
+          $fieldDiv.classList.add(currentSort.asc ? 'sort-asc' : 'sort-desc');
+          const $icon = document.createElement('k-icon');
+          $icon.classList.add('icon-sort');
+          $icon.setAttribute('name', currentSort.asc ? 'arrow-down' : 'arrow-up');
+          $fieldDiv.appendChild($icon);
+        }
+        $fieldDiv.addEventListener('click', () => {
+          const currentSort = this.sort.find(s => s.name === name);
+          const asc = currentSort ? !currentSort.asc : true;
+          this.sortBy(name, asc);
+        });
+      }
+      $fields.appendChild($fieldDiv);
+    });
+    if(this.hasAfterControls()){
+      const $afterDiv = document.createElement('div');
+      $afterDiv.classList.add('field', 'cell', 'field-after-controls');
+      $afterDiv.style.width = this.columnSizes.afterControls + 'px';
+      $fields.appendChild($afterDiv);
+    }
+
+    $fields.style.width = 
+      this.shadowRoot.getElementById('top').style.width = 
+      this.shadowRoot.getElementById('bottom').style.width = 
+      this.shadowRoot.getElementById('records').style.width = this.columnSizes.total + 'px';
 
     if (this.enableSelection) {
       const selectAllCheckbox = this.shadowRoot.getElementById('select-all');
@@ -120,126 +132,173 @@ 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);
-    let fetchRecords = false;
-    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, 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);
+
+    let displayedRecords = this.getDisplayedRecords(),
+        start = 0,
+        end = this.pageSize;
+
+    if(this.enablePages){
+      start = (this.currentPage - 1) * this.pageSize;
+      end = start + this.pageSize;
+      displayedRecords = displayedRecords.slice(start, end);
+    }
+    
+    let fetchStart,
+        fetchCount = 0;
+    displayedRecords.forEach((record, index) => {
+      if(record !== null){
+        $records.appendChild(this.renderRecord(record));
       } else {
-        this.fields.forEach(({name, formatter, calculator}, index) => {
-          const $td = document.createElement('td');
-          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;
-          $tr.appendChild($td);
-        });
-      }
-      if(this.controls?.after?.length){
-        $tr.appendChild(this.renderRowControls(this.controls.after, record, start + index));
+        if(!fetchStart) fetchStart = start + index;
+        fetchCount++;
+        const $div = document.createElement('div');
+        $div.classList.add('record', 'fetching');
+        $div.innerHTML = '<div class="cell">Loading...</div>';
+        $records.appendChild($div);
       }
-      $records.appendChild($tr);
     });
-    if(fetchRecords){
-      dispatchEvent(this, 'fetchRecords', { start, end });
+    if(fetchStart && !this.fetchPending){
+      dispatchEvent(this, 'fetchRecords', {
+        start: fetchStart,
+        count: fetchCount
+      });
     }
   }
-  
-  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, index);
-        if(rendered instanceof HTMLElement){
-          $td.appendChild(rendered);
-        } else if(typeof(rendered) === 'string'){
-          $td.appendChild(document.createRange().createContextualFragment(rendered));
+
+  renderRecord(record){
+    const $record = document.createElement('div');
+    $record.classList.add('record');
+    $record.dataset.index = record[index];
+    if (this.enableSelection) {
+      const $selectionDiv = document.createElement('div');
+      $selectionDiv.style.width = '40px';
+      $selectionDiv.classList.add('cell', 'selection', 'controls');
+      const $checkbox = document.createElement('input');
+      $checkbox.type = 'checkbox';
+      $checkbox.checked = record[selected];
+      $checkbox.addEventListener('change', (event) => {
+        record[selected] = !!event.target.checked;
+        dispatchEvent(this, 'selectionChange');
+      });
+      $selectionDiv.appendChild($checkbox);
+      $record.appendChild($selectionDiv);
+    }
+    if (this.hasBeforeControls()) {
+      $record.appendChild(this.renderBeforeControls());
+    }
+    this.fields.forEach(({ name, formatter, calculator, type, editor, hidden }) => {
+      if (hidden) return; // Skip hidden fields
+      const $div = document.createElement('div');
+      $div.classList.add('cell');
+      $div.dataset.field = name;
+      $div.style.width = this.columnSizes[name] + 'px';
+      let value = record[name] || '';
+      if(record[editing]){
+        $record.setAttribute('editing', true);
+        if (calculator) {
+          $div.appendChild(Table.editors.calculated(calculator(record, this)));
+        } else if(editor){
+          $div.appendChild(editor(value));
+        } else {
+          let editorGen = Table.editors[type || typeof value];
+          if(!editorGen){
+            editorGen = Table.editors.string;
+          }
+          $div.appendChild(editorGen(value));
         }
-      } else if(icon){
-        const $button = document.createElement('button');
-        $button.classList.add('pq', 'no-btn');
-        $button.appendChild(new Icon(icon));
-        if (action) {
-          onEvent($button, 'click', () => action(this, record, index));
+      } else {
+        if (calculator) {
+          $div.innerHTML = calculator(record, this);
+        } else if (formatter) {
+          $div.innerHTML = formatter(value);
+        } else {
+          $div.innerHTML = value;
         }
-        $td.appendChild($button);
       }
+      $record.appendChild($div);
     });
-    return $td;
+    if (this.hasAfterControls()) {
+      $record.appendChild(this.renderAfterControls());
+    }
+    return $record;
   }
 
-  renderControls(controls = [], position) {
-    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));
-      } else if(render && typeof(render) === 'function'){
-        const rendered = render(this);
-        if(rendered instanceof HTMLElement){
-          $container.appendChild(rendered);
-        } else if(typeof(rendered) === 'string'){
-          $container.appendChild(document.createRange().createContextualFragment(rendered));
-        }
-      } else if(icon){
-        const $button = document.createElement('button');
-        $button.classList.add('pq', 'no-btn');
-        $button.appendChild(new Icon(icon));
-        if (action) {
-          onEvent($button, 'click', () => action(this));
+  renderBeforeControls(){
+    const $div = document.createElement('div');
+    $div.style.width = this.columnSizes.beforeControls + 'px';
+    $div.classList.add('cell', 'controls', 'controls-before');
+    this.querySelectorAll('[slot="before"]').forEach($control => {
+      $div.appendChild($control.cloneNode(true));
+    });
+    return $div;
+  }
+
+  renderAfterControls(){
+    const $div = document.createElement('div');
+    $div.style.width = this.columnSizes.afterControls + 'px';
+    $div.classList.add('cell', 'controls', 'controls-after');
+    this.querySelectorAll('[slot="after"]').forEach($control => {
+      $div.appendChild($control.cloneNode(true));
+    });
+    return $div;
+  }
+
+
+
+
+
+  hasBeforeControls(){
+    return !!this.querySelector('[slot="before"]');
+  }
+
+  hasAfterControls(){
+    return !!this.querySelector('[slot="after"]');
+  }
+
+  hasTopControls(){
+    return !!this.querySelector('[slot="top"]');
+  }
+
+  hasBottomControls(){
+    return !!this.querySelector(':scope > :not([slot])'); // bottom is default slot, detect direct child with no slot
+  }
+
+  editRecord(record){
+    record[editing] = true;
+    const $currentRecord = this.shadowRoot.querySelector(`.record[data-index="${record[index]}"]`);
+    const $newRecord = this.renderRecord(record);
+    $currentRecord.replaceWith($newRecord);
+    dispatchEvent(this, 'editingChange');
+  }
+  
+  saveEditedRecord(record){
+    record[editing] = false;
+    const $currentRecord = this.shadowRoot.querySelector(`.record[data-index="${record[index]}"]`);
+    $currentRecord.querySelectorAll('.cell').forEach(($cell) => {
+      const field = $cell.dataset.field;
+      const fieldDef = this.fields.find(f => f.name === field);
+      if(fieldDef && !fieldDef.calculator){ // calculated fields cannot be udated
+        const $input = $cell.children.length === 1 ? $cell.firstChild : $cell.querySelector('input, select');
+        if ($input) {
+          record[field] = $input.value;
         }
-        $container.appendChild($button);
       }
     });
+    $currentRecord.replaceWith(this.renderRecord(record));
+  }
+
+  cancelEditedRecord(record){
+    record[editing] = false;
+    this.shadowRoot.querySelector(`.record[data-index="${record[index]}"]`).replaceWith(this.renderRecord(record));
+  }
+
+  recordIsEditing(record){
+    return record[editing];
   }
 
   getCurrentPage() {
@@ -247,7 +306,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) {
@@ -258,6 +317,12 @@ export default class Table extends Component {
     dispatchEvent(this, 'pageChange');
   }
 
+  firstPage(){
+    if(this.currentPage !== 1){
+      this.setPage(1);
+    }
+  }
+
   nextPage() {
     if (this.currentPage < this.getTotalPages()) {
       this.setPage(this.currentPage + 1);
@@ -270,6 +335,12 @@ export default class Table extends Component {
     }
   }
 
+  lastPage() {
+    if (this.currentPage !== this.getTotalPages()) {
+      this.setPage(this.getTotalPages());
+    }
+  }
+
   setPageSize(pageSize) {
     this.pageSize = pageSize;
     this.currentPage = 1;
@@ -281,16 +352,22 @@ export default class Table extends Component {
   setData({
     records = false,
     fields = false,
-    controls = false,
     pageSize = false,
     pageSizeOptions = false,
     currentPage = false,
-    enableSelection = false // Add enableSelection property
+    enableSelection
   } = {}) {
-    let rerender = false;
-    let rerenderControls = false;
+    let rerender = 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;
     }
@@ -301,10 +378,6 @@ export default class Table extends Component {
     if (pageSizeOptions) {
       this.pageSizeOptions = pageSizeOptions;
     }
-    if (controls) {
-      this.controls = controls;
-      rerenderControls = true;
-    }
     if(currentPage){
       this.currentPage = currentPage;
       rerender = true;
@@ -317,17 +390,37 @@ export default class Table extends Component {
       this.renderFields();
       this.renderRecords();
     }
-    if(rerenderControls){
-      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;
+  setRecords(records, fields) {
+    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.fields = fields || Table.extractFieldsFromRecords(this.records);
+    this.renderFields();
     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) {
@@ -338,141 +431,504 @@ export default class Table extends Component {
     }
 
     onEvent(this, 'fetchRecords', async (event) => {
-      const { start, end } = event.detail;
-      const records = await callback(start, end - start);
+      if(this.fetchPending) return;
+      this.fetchPending = true;
+      const { start, count } = event.detail;
+      const records = await callback(start, count);
       this.records.splice(start, records.length, ...records);
+      this.fetchPending = false;
       this.renderRecords();
     });
   }
 
   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.renderFields(); // Re-render fields to update sort classes and icons
+    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; 
+    });
+    if(this.filters.length){
+      this.filters = [];
+      dispatchEvent(this, 'filterRemoved filterChange');
+    }
+    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, rerender = true) {
+    const filterIndex = this.filters.findIndex(f => f.field === field && f.condition === condition && f.value === value);
+    if (filterIndex !== -1) {
+      this.records.forEach(record => {
+        if(!this.testFilter(record, field, condition, value)){
+          record[hidden] = false;
+        }
+      });
+      this.filters.splice(filterIndex, 1);
+      dispatchEvent(this, 'filterRemoved filterChange');
+      if(rerender) this.renderRecords();
+    }
+  }
+
+  testFilter(record, field, condition, value) {
+    const recordValue = record[field];
+    switch (condition) {
+      case 'equals':
+        return recordValue === value;
+      case 'not-equals':
+        return recordValue !== value;
+      case 'contains':
+        return recordValue.includes(value);
+      case 'not-contains':
+        return !recordValue.includes(value);
+      case 'greater-than':
+        return recordValue > value;
+      case 'less-than':
+        return recordValue < value;
+      case 'greater-than-or-equal':
+        return recordValue >= value;
+      case 'less-than-or-equal':
+        return recordValue <= value;
+      default:
+        return true;
+    }
+  }
+
+  removeAllFilters() {
+    if(this.filters.length){
+      this.filters.forEach(({ field, condition, value }) => {
+        this.removeFilter(field, condition, value, false);
+      });
+      this.renderRecords();
+    }
+  }
+
+  search(term) {
+    const t = term.trim().toLowerCase();
+    let changed = false;
+    this.records.forEach(record => {
+      if (record[hidden]) return;
+      let match = false;
+      this.fields.forEach(({ name }) => {
+        const val = record[name]?.toString().toLowerCase() || '';
+        if (val.includes(t)) {
+          match = true;
+        }
+      });
+      if (record[hidden] !== !match) {
+        record[hidden] = !match;
+        changed = true;
+      }
+    });
+    if (changed) {
+      dispatchEvent(this, 'recordHidden');
+      this.renderRecords();
+    }
+    dispatchEvent(this, 'search', { term });
+  }
+
+  getDisplayedRecords() {
+    this.filters.forEach(({ field, condition, value }) => {
+      this.records.forEach(record => {  
+        if (!this.testFilter(record, field, condition, value)) {
+          record[hidden] = true;
+        }
+      });
+    });
+
+    let displayedRecords = this.records.filter(record => record === null || !record[hidden]);
+
+    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]);
+  }
+
+  calculateColumnSizes() {
+    this.columnSizes = {};
+    this.columnSizes.total = 0;
+    if(this.enableSelection) this.columnSizes.total += 40;
+    this.columnSizes.beforeControls = Array.from(this.querySelectorAll('[slot="before"]')).reduce((total, el) => total + (el.maxWidth || 40), 0);
+    this.columnSizes.afterControls = Array.from(this.querySelectorAll('[slot="after"]')).reduce((total, el) => total + (el.maxWidth || 40), 0);
+    if(this.hasBeforeControls()) this.columnSizes.total += this.columnSizes.beforeControls;
+    if(this.hasAfterControls()) this.columnSizes.total += this.columnSizes.afterControls;
+    
+    this.fields.forEach(field => {
+      if (field.size) {
+      this.columnSizes[field.name] = field.size;
+      } else {
+      let maxLength = 0;
+      this.records.slice(0, 100).forEach(record => {
+        let value = record[field.name];
+        if (field.calculator) {
+          value = field.calculator(record, this);
+        }
+        if (field.formatter) {
+          value = field.formatter(value);
+        }
+        if (value && value.toString().length > maxLength) {
+        maxLength = value.toString().length;
+        }
+      });
+      this.columnSizes[field.name] = Math.max((maxLength * 10 + 32), 128);
+      if(!field.hidden) this.columnSizes.total += this.columnSizes[field.name];
+      }
+    });
+    return this.columnSizes;
+  }
+
+  setFieldHiddenState(fieldName, hidden) {
+    const field = this.fields.find(f => f.name === fieldName);
+    if (field) {
+      field.hidden = hidden;
+      this.calculateColumnSizes();
+      this.renderFields();
+      this.renderRecords();
+      dispatchEvent(this, 'fieldVisibilityChanged ' + (hidden ? 'fieldHidden' : 'fieldShown'), { field });
+    }
+  }
+
+  hideField(fieldName) {
+    this.setFieldHiddenState(fieldName, true);
+  }
+
+  showField(fieldName) {
+    this.setFieldHiddenState(fieldName, false);
+  }
+
+  reorderFields(newOrder) {
+    const newFields = [];
+    newOrder.forEach(fieldName => {
+      const field = this.fields.find(f => f.name === fieldName);
+      if (field) {
+        newFields.push(field);
+      }
+    });
+    this.fields = newFields;
+    this.renderFields();
+    this.renderRecords();
+  }
+
+  /* Shadow DOM */
   get shadowTemplate(){
     return /*html*/`
-      ${super.shadowTemplate}
-      <div class="responsive-table">
-        <div id="top"></div>
-        <table class="b0">
-          <thead id="fields"></thead>
-          <tbody id="records"></tbody>
-        </table>
-        <div id="bottom"></div>
+      <div id="wrapper">
+        <div id="top"><slot name="top"></slot></div>
+        <div id="table">
+          <div id="fields"></div>
+          <div id="records"></div>
+        </div>
+        <div id="bottom">${super.shadowTemplate}</div>
+      </div>
+      <div style="display: none">
+        <slot name="before"></slot>
+        <slot name="after"></slot>
       </div>
     `;
   }
+
   get shadowStyles(){
     return /*css*/`
       ${super.shadowStyles}
       :host {
         display: block;
+        width: 100%;
+        overflow: auto;
         margin-bottom: var(--spacer);
+      }
+      #wrapper {
+        width: min-content;
         border: 1px solid var(--c_border);
         border-radius: var(--radius);
       }
-      #top, #bottom {
-        display: flex;
+      #table {
+        width: min-content;
       }
-      th {
-        border-top: none;
+      #fields,
+      .record {
+        display: flex;
       }
-      tr:last-child td:first-child {
-        border-bottom-left-radius: 0;
+      #fields {
+        background-color: var(--c_bg__alt);
+        border-bottom: 1px solid var(--c_border);
       }
-      tr:last-child td:last-child {
-        border-bottom-right-radius: 0;
+      .record:not([editing="true"]) .cell:not(.controls),
+      #fields .cell:not(.controls) {
+        padding: calc(0.5 * var(--spacer)) var(--spacer);
       }
-      tr:last-child td {
-        border-bottom: none;
+      .cell:not(:first-child) {
+        border-left: 1px solid var(--c_border);
       }
-      th:first-child, td:first-child {
-        border-left: none;
+      .record:not(:last-child) .cell {
+        border-bottom: 1px solid var(--c_border);
       }
-      th:last-child, td:last-child {
-        border-right: none;
+      #top, #bottom {
+        display: flex;
+        width: 100%;
       }
-      #top:not(:empty) {
+      #top slot {
+        display: block;
+        width: 100%;
         border-bottom: 1px solid var(--c_border);
       }
-      #bottom:not(:empty) {
+      #bottom slot {
+        display: block;
+        width: 100%;
         border-top: 1px solid var(--c_border);
       }
-      th.selection, td.selection {
-        width: 50px;
+      :host(:not([top-controls])) #top,
+      :host(:not([bottom-controls])) #bottom {
+        display: none;
+      }
+      .field-select,
+      .selection {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .field-select input,
+      .selection input {
+        width: 1.25rem;
+        height: 1.25rem;
       }
-      th.selection input,
-      td.selection input {
-        margin: 0;
-        width: 1.35rem;
-        height: 1.35rem;
+      .icon-sort {
+        float: right;
+        opacity: 0.5;
       }
     `;
   }
 
+
+  /* Static Methods */
   static extractFieldsFromRecords(records, recordLimit = 100){
     const names = new Set();
     records.slice(0, recordLimit).forEach( record => {
       Object.keys(record).forEach( name => names.add(name) )
     });
     return [...names].map(name=>({name,label:toTitleCase(name)}));
-  }
+  };
+
+  /* Static Members */
+  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);