snice 2.5.4 → 3.1.0

package/dist/components/table/snice-table.js

@@ -1,5 +1,5 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, query, request, watch, on, dispatch } from 'snice';
+import { element, property, query, request, styles, render, ready, watch, dispatch, css, html } from 'snice';
 import '../input/snice-input.js';
 import '../select/snice-select.js';
 import './snice-cell.js';
@@ -13,7 +13,7 @@ import './snice-cell-duration.js';
 import './snice-cell-filesize.js';
 import './snice-cell-sparkline.js';
 import '../select/snice-option.js';
-import '../snice-cell-C9N6yGxQ.js';
+import '../snice-cell-BLFVdxPp.js';
 import './snice-rating.js';
 import './snice-progress.js';
 
@@ -30,6 +30,9 @@ let SniceTable = (() => {
     let _searchable_decorators;
     let _searchable_initializers = [];
     let _searchable_extraInitializers = [];
+    let _filterable_decorators;
+    let _filterable_initializers = [];
+    let _filterable_extraInitializers = [];
     let _sortable_decorators;
     let _sortable_initializers = [];
     let _sortable_extraInitializers = [];
@@ -42,18 +45,15 @@ let SniceTable = (() => {
     let _clickable_decorators;
     let _clickable_initializers = [];
     let _clickable_extraInitializers = [];
-    let _columns_decorators;
-    let _columns_initializers = [];
-    let _columns_extraInitializers = [];
-    let _data_decorators;
-    let _data_initializers = [];
-    let _data_extraInitializers = [];
+    let _list_decorators;
+    let _list_initializers = [];
+    let _list_extraInitializers = [];
+    let _searchDebounce_decorators;
+    let _searchDebounce_initializers = [];
+    let _searchDebounce_extraInitializers = [];
     let _currentSort_decorators;
     let _currentSort_initializers = [];
     let _currentSort_extraInitializers = [];
-    let _searchText_decorators;
-    let _searchText_initializers = [];
-    let _searchText_extraInitializers = [];
     let _selector_decorators;
     let _selector_initializers = [];
     let _selector_extraInitializers = [];
@@ -77,6 +77,9 @@ let SniceTable = (() => {
     let _tbody_extraInitializers = [];
     let _getTableConfig_decorators;
     let _getTableData_decorators;
+    let _componentStyles_decorators;
+    let _renderContent_decorators;
+    let _initialize_decorators;
     let _handleSelectorOptionsChange_decorators;
     let _handleSortableChange_decorators;
     let _handleSelectableChange_decorators;
@@ -84,13 +87,6 @@ let SniceTable = (() => {
     let _handleDataChange_decorators;
     let _handleSelectedRowsChange_decorators;
     let _handleSortChange_decorators;
-    let _handleSort_decorators;
-    let _handleRowSelect_decorators;
-    let _handleSelectAll_decorators;
-    let _handleRowClick_decorators;
-    let _onAttached_decorators;
-    let _handleSearchChange_decorators;
-    let _handleSelectorChange_decorators;
     let _dispatchRowSelectionChanged_decorators;
     let _dispatchSelectAllChanged_decorators;
     (class extends _classSuper {
@@ -99,15 +95,21 @@ let SniceTable = (() => {
             super(...arguments);
             this.striped = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _striped_initializers, false));
             this.searchable = (__runInitializers(this, _striped_extraInitializers), __runInitializers(this, _searchable_initializers, false));
-            this.sortable = (__runInitializers(this, _searchable_extraInitializers), __runInitializers(this, _sortable_initializers, false));
+            this.filterable = (__runInitializers(this, _searchable_extraInitializers), __runInitializers(this, _filterable_initializers, false));
+            this.sortable = (__runInitializers(this, _filterable_extraInitializers), __runInitializers(this, _sortable_initializers, false));
             this.selectable = (__runInitializers(this, _sortable_extraInitializers), __runInitializers(this, _selectable_initializers, false));
             this.hoverable = (__runInitializers(this, _selectable_extraInitializers), __runInitializers(this, _hoverable_initializers, true));
             this.clickable = (__runInitializers(this, _hoverable_extraInitializers), __runInitializers(this, _clickable_initializers, false));
-            this.columns = (__runInitializers(this, _clickable_extraInitializers), __runInitializers(this, _columns_initializers, []));
-            this.data = (__runInitializers(this, _columns_extraInitializers), __runInitializers(this, _data_initializers, []));
-            this.currentSort = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _currentSort_initializers, []));
-            this.searchText = (__runInitializers(this, _currentSort_extraInitializers), __runInitializers(this, _searchText_initializers, ''));
-            this.selector = (__runInitializers(this, _searchText_extraInitializers), __runInitializers(this, _selector_initializers, ''));
+            this.list = (__runInitializers(this, _clickable_extraInitializers), __runInitializers(this, _list_initializers, false));
+            this.searchDebounce = (__runInitializers(this, _list_extraInitializers), __runInitializers(this, _searchDebounce_initializers, 500));
+            // Plain properties - no reflection to attributes
+            this.columns = (__runInitializers(this, _searchDebounce_extraInitializers), []);
+            this.data = [];
+            this.currentSort = __runInitializers(this, _currentSort_initializers, []);
+            // Don't use @property decorator to avoid auto-rendering on searchText change
+            // This would cause the input to lose focus while typing
+            this.searchText = (__runInitializers(this, _currentSort_extraInitializers), '');
+            this.selector = __runInitializers(this, _selector_initializers, '');
             this.selectorOptions = (__runInitializers(this, _selector_extraInitializers), __runInitializers(this, _selectorOptions_initializers, []));
             this.loading = (__runInitializers(this, _selectorOptions_extraInitializers), __runInitializers(this, _loading_initializers, false));
             this.selectedRows = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _selectedRows_initializers, []));
@@ -115,19 +117,120 @@ let SniceTable = (() => {
             this.thead = (__runInitializers(this, _table_extraInitializers), __runInitializers(this, _thead_initializers, void 0));
             this.tbody = (__runInitializers(this, _thead_extraInitializers), __runInitializers(this, _tbody_initializers, void 0));
             this.dataRequestTimeout = (__runInitializers(this, _tbody_extraInitializers), null);
+            this.handleClick = (e) => {
+                const target = e.target;
+                // Handle sortable header click
+                const th = target.closest('th.sortable');
+                if (th) {
+                    const columnKey = th.getAttribute('data-key');
+                    if (columnKey) {
+                        this.toggleSort(columnKey, true); // Always multi-sort
+                    }
+                    return;
+                }
+                // Handle row click
+                const tr = target.closest('tbody tr');
+                if (tr) {
+                    // Don't trigger if clicking on checkbox or other interactive elements
+                    if (target.matches('input[type="checkbox"], button, a, .interactive')) {
+                        return;
+                    }
+                    const rowIndex = parseInt(tr.getAttribute('data-index') || '0');
+                    const rowData = this.data[rowIndex];
+                    // Handle row selection if selectable
+                    if (this.selectable) {
+                        const isCurrentlySelected = this.selectedRows.includes(rowIndex);
+                        if (isCurrentlySelected) {
+                            this.selectedRows = this.selectedRows.filter(i => i !== rowIndex);
+                        }
+                        else {
+                            this.selectedRows = [...this.selectedRows, rowIndex];
+                        }
+                        this.updateRowSelectionState();
+                        this.updateSelectAllState();
+                        this.dispatchRowSelectionChanged(rowIndex, !isCurrentlySelected);
+                    }
+                    // Handle clickable row event
+                    if (this.clickable) {
+                        this.dispatchEvent(new CustomEvent('row-clicked', {
+                            detail: { rowData, rowIndex }
+                        }));
+                    }
+                }
+            };
+            this.handleChange = (e) => {
+                const target = e.target;
+                // Handle row select checkbox
+                if (target.matches('.row-select')) {
+                    const checkbox = target;
+                    const rowIndex = parseInt(checkbox.getAttribute('data-row-index') || '0');
+                    if (checkbox.checked) {
+                        if (!this.selectedRows.includes(rowIndex)) {
+                            this.selectedRows = [...this.selectedRows, rowIndex];
+                        }
+                    }
+                    else {
+                        this.selectedRows = this.selectedRows.filter(i => i !== rowIndex);
+                    }
+                    this.updateRowSelectionState();
+                    this.updateSelectAllState();
+                    this.dispatchRowSelectionChanged(rowIndex, checkbox.checked);
+                    return;
+                }
+                // Handle select all checkbox
+                if (target.matches('.select-all')) {
+                    const checkbox = target;
+                    if (checkbox.checked) {
+                        this.selectedRows = this.data.map((_, index) => index);
+                    }
+                    else {
+                        this.selectedRows = [];
+                    }
+                    this.updateRowSelectionState();
+                    this.dispatchSelectAllChanged(checkbox.checked);
+                }
+            };
+            this.onAttached = () => {
+                this.getTableConfig();
+                this.getTableData();
+            };
+            this.searchDebounceTimeout = null;
+            this.handleSearchInput = (e) => {
+                const target = e.target;
+                const input = target;
+                this.searchText = input.value;
+                // Manual debounce implementation
+                if (this.searchDebounceTimeout) {
+                    clearTimeout(this.searchDebounceTimeout);
+                }
+                this.searchDebounceTimeout = setTimeout(() => {
+                    this.debouncedDataRequest();
+                }, this.searchDebounce);
+            };
+            this.selectorDebounceTimeout = null;
+            this.handleSelectorChange = (e) => {
+                this.selector = Array.isArray(e.detail.value) ? e.detail.value.join(',') : e.detail.value;
+                // Manual debounce implementation
+                if (this.selectorDebounceTimeout) {
+                    clearTimeout(this.selectorDebounceTimeout);
+                }
+                this.selectorDebounceTimeout = setTimeout(() => {
+                    this.debouncedDataRequest();
+                }, 150);
+            };
         }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _striped_decorators = [property({ type: Boolean, attribute: 'striped' })];
             _searchable_decorators = [property({ type: Boolean, attribute: 'searchable' })];
+            _filterable_decorators = [property({ type: Boolean, attribute: 'filterable' })];
             _sortable_decorators = [property({ type: Boolean, attribute: 'sortable' })];
             _selectable_decorators = [property({ type: Boolean, attribute: 'selectable' })];
             _hoverable_decorators = [property({ type: Boolean, attribute: 'hoverable' })];
             _clickable_decorators = [property({ type: Boolean, attribute: 'clickable' })];
-            _columns_decorators = [property({ type: Array, attribute: 'columns' })];
-            _data_decorators = [property({ type: Array, attribute: 'data' })];
+            _list_decorators = [property({ type: Boolean, attribute: 'list' })];
+            _searchDebounce_decorators = [property({ type: Number, attribute: 'search-debounce' })];
             _currentSort_decorators = [property({ type: Array, attribute: 'current-sort' })];
-            _searchText_decorators = [property({ type: String, attribute: 'search-text' })];
             _selector_decorators = [property({ type: String, attribute: 'selector' })];
             _selectorOptions_decorators = [property({ type: Array, attribute: 'selector-options' })];
             _loading_decorators = [property({ type: Boolean, attribute: 'loading' })];
@@ -137,6 +240,9 @@ let SniceTable = (() => {
             _tbody_decorators = [query('tbody')];
             _getTableConfig_decorators = [request('@snice/table/config')];
             _getTableData_decorators = [request('@snice/table/data')];
+            _componentStyles_decorators = [styles()];
+            _renderContent_decorators = [render()];
+            _initialize_decorators = [ready()];
             _handleSelectorOptionsChange_decorators = [watch('selector-options')];
             _handleSortableChange_decorators = [watch('sortable')];
             _handleSelectableChange_decorators = [watch('selectable')];
@@ -144,17 +250,13 @@ let SniceTable = (() => {
             _handleDataChange_decorators = [watch('data', 'loading')];
             _handleSelectedRowsChange_decorators = [watch('selected-rows')];
             _handleSortChange_decorators = [watch('current-sort')];
-            _handleSort_decorators = [on('click', 'th.sortable')];
-            _handleRowSelect_decorators = [on('change', '.row-select')];
-            _handleSelectAll_decorators = [on('change', '.select-all')];
-            _handleRowClick_decorators = [on('click', 'tbody tr')];
-            _onAttached_decorators = [on('@snice/controller-attached')];
-            _handleSearchChange_decorators = [on('input', '.search-input', { debounce: 500 })];
-            _handleSelectorChange_decorators = [on('@snice/select/change', '.selector-input', { debounce: 150 })];
             _dispatchRowSelectionChanged_decorators = [dispatch('@snice/table/row-selection-changed', { bubbles: true, composed: true })];
             _dispatchSelectAllChanged_decorators = [dispatch('@snice/table/select-all-changed', { bubbles: true, composed: true })];
             __esDecorate(this, null, _getTableConfig_decorators, { kind: "method", name: "getTableConfig", static: false, private: false, access: { has: obj => "getTableConfig" in obj, get: obj => obj.getTableConfig }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _getTableData_decorators, { kind: "method", name: "getTableData", static: false, private: false, access: { has: obj => "getTableData" in obj, get: obj => obj.getTableData }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _initialize_decorators, { kind: "method", name: "initialize", static: false, private: false, access: { has: obj => "initialize" in obj, get: obj => obj.initialize }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleSelectorOptionsChange_decorators, { kind: "method", name: "handleSelectorOptionsChange", static: false, private: false, access: { has: obj => "handleSelectorOptionsChange" in obj, get: obj => obj.handleSelectorOptionsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleSortableChange_decorators, { kind: "method", name: "handleSortableChange", static: false, private: false, access: { has: obj => "handleSortableChange" in obj, get: obj => obj.handleSortableChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleSelectableChange_decorators, { kind: "method", name: "handleSelectableChange", static: false, private: false, access: { has: obj => "handleSelectableChange" in obj, get: obj => obj.handleSelectableChange }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -162,25 +264,18 @@ let SniceTable = (() => {
             __esDecorate(this, null, _handleDataChange_decorators, { kind: "method", name: "handleDataChange", static: false, private: false, access: { has: obj => "handleDataChange" in obj, get: obj => obj.handleDataChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleSelectedRowsChange_decorators, { kind: "method", name: "handleSelectedRowsChange", static: false, private: false, access: { has: obj => "handleSelectedRowsChange" in obj, get: obj => obj.handleSelectedRowsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleSortChange_decorators, { kind: "method", name: "handleSortChange", static: false, private: false, access: { has: obj => "handleSortChange" in obj, get: obj => obj.handleSortChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSort_decorators, { kind: "method", name: "handleSort", static: false, private: false, access: { has: obj => "handleSort" in obj, get: obj => obj.handleSort }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleRowSelect_decorators, { kind: "method", name: "handleRowSelect", static: false, private: false, access: { has: obj => "handleRowSelect" in obj, get: obj => obj.handleRowSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSelectAll_decorators, { kind: "method", name: "handleSelectAll", static: false, private: false, access: { has: obj => "handleSelectAll" in obj, get: obj => obj.handleSelectAll }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleRowClick_decorators, { kind: "method", name: "handleRowClick", static: false, private: false, access: { has: obj => "handleRowClick" in obj, get: obj => obj.handleRowClick }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _onAttached_decorators, { kind: "method", name: "onAttached", static: false, private: false, access: { has: obj => "onAttached" in obj, get: obj => obj.onAttached }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSearchChange_decorators, { kind: "method", name: "handleSearchChange", static: false, private: false, access: { has: obj => "handleSearchChange" in obj, get: obj => obj.handleSearchChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSelectorChange_decorators, { kind: "method", name: "handleSelectorChange", static: false, private: false, access: { has: obj => "handleSelectorChange" in obj, get: obj => obj.handleSelectorChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchRowSelectionChanged_decorators, { kind: "method", name: "dispatchRowSelectionChanged", static: false, private: false, access: { has: obj => "dispatchRowSelectionChanged" in obj, get: obj => obj.dispatchRowSelectionChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchSelectAllChanged_decorators, { kind: "method", name: "dispatchSelectAllChanged", static: false, private: false, access: { has: obj => "dispatchSelectAllChanged" in obj, get: obj => obj.dispatchSelectAllChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _striped_decorators, { kind: "field", name: "striped", static: false, private: false, access: { has: obj => "striped" in obj, get: obj => obj.striped, set: (obj, value) => { obj.striped = value; } }, metadata: _metadata }, _striped_initializers, _striped_extraInitializers);
             __esDecorate(null, null, _searchable_decorators, { kind: "field", name: "searchable", static: false, private: false, access: { has: obj => "searchable" in obj, get: obj => obj.searchable, set: (obj, value) => { obj.searchable = value; } }, metadata: _metadata }, _searchable_initializers, _searchable_extraInitializers);
+            __esDecorate(null, null, _filterable_decorators, { kind: "field", name: "filterable", static: false, private: false, access: { has: obj => "filterable" in obj, get: obj => obj.filterable, set: (obj, value) => { obj.filterable = value; } }, metadata: _metadata }, _filterable_initializers, _filterable_extraInitializers);
             __esDecorate(null, null, _sortable_decorators, { kind: "field", name: "sortable", static: false, private: false, access: { has: obj => "sortable" in obj, get: obj => obj.sortable, set: (obj, value) => { obj.sortable = value; } }, metadata: _metadata }, _sortable_initializers, _sortable_extraInitializers);
             __esDecorate(null, null, _selectable_decorators, { kind: "field", name: "selectable", static: false, private: false, access: { has: obj => "selectable" in obj, get: obj => obj.selectable, set: (obj, value) => { obj.selectable = value; } }, metadata: _metadata }, _selectable_initializers, _selectable_extraInitializers);
             __esDecorate(null, null, _hoverable_decorators, { kind: "field", name: "hoverable", static: false, private: false, access: { has: obj => "hoverable" in obj, get: obj => obj.hoverable, set: (obj, value) => { obj.hoverable = value; } }, metadata: _metadata }, _hoverable_initializers, _hoverable_extraInitializers);
             __esDecorate(null, null, _clickable_decorators, { kind: "field", name: "clickable", static: false, private: false, access: { has: obj => "clickable" in obj, get: obj => obj.clickable, set: (obj, value) => { obj.clickable = value; } }, metadata: _metadata }, _clickable_initializers, _clickable_extraInitializers);
-            __esDecorate(null, null, _columns_decorators, { kind: "field", name: "columns", static: false, private: false, access: { has: obj => "columns" in obj, get: obj => obj.columns, set: (obj, value) => { obj.columns = value; } }, metadata: _metadata }, _columns_initializers, _columns_extraInitializers);
-            __esDecorate(null, null, _data_decorators, { kind: "field", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(null, null, _list_decorators, { kind: "field", name: "list", static: false, private: false, access: { has: obj => "list" in obj, get: obj => obj.list, set: (obj, value) => { obj.list = value; } }, metadata: _metadata }, _list_initializers, _list_extraInitializers);
+            __esDecorate(null, null, _searchDebounce_decorators, { kind: "field", name: "searchDebounce", static: false, private: false, access: { has: obj => "searchDebounce" in obj, get: obj => obj.searchDebounce, set: (obj, value) => { obj.searchDebounce = value; } }, metadata: _metadata }, _searchDebounce_initializers, _searchDebounce_extraInitializers);
             __esDecorate(null, null, _currentSort_decorators, { kind: "field", name: "currentSort", static: false, private: false, access: { has: obj => "currentSort" in obj, get: obj => obj.currentSort, set: (obj, value) => { obj.currentSort = value; } }, metadata: _metadata }, _currentSort_initializers, _currentSort_extraInitializers);
-            __esDecorate(null, null, _searchText_decorators, { kind: "field", name: "searchText", static: false, private: false, access: { has: obj => "searchText" in obj, get: obj => obj.searchText, set: (obj, value) => { obj.searchText = value; } }, metadata: _metadata }, _searchText_initializers, _searchText_extraInitializers);
             __esDecorate(null, null, _selector_decorators, { kind: "field", name: "selector", static: false, private: false, access: { has: obj => "selector" in obj, get: obj => obj.selector, set: (obj, value) => { obj.selector = value; } }, metadata: _metadata }, _selector_initializers, _selector_extraInitializers);
             __esDecorate(null, null, _selectorOptions_decorators, { kind: "field", name: "selectorOptions", static: false, private: false, access: { has: obj => "selectorOptions" in obj, get: obj => obj.selectorOptions, set: (obj, value) => { obj.selectorOptions = value; } }, metadata: _metadata }, _selectorOptions_initializers, _selectorOptions_extraInitializers);
             __esDecorate(null, null, _loading_decorators, { kind: "field", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
@@ -193,6 +288,14 @@ let SniceTable = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        setData(data) {
+            this.data = data;
+            this.render();
+        }
+        setColumns(columns) {
+            this.columns = columns;
+            this.render();
+        }
         async *getTableConfig() {
             const config = await (yield {});
             this.columns = config.columns || [];
@@ -209,9 +312,7 @@ let SniceTable = (() => {
                     sort: this.currentSort,
                     selector: this.selector
                 };
-                console.log('Requesting table data with params:', params);
                 const response = await (yield params);
-                console.log('Received table data response:', response);
                 this.data = response.data || [];
                 this.loading = false;
                 this.render();
@@ -235,17 +336,17 @@ let SniceTable = (() => {
             this.dataRequestTimeout = setTimeout(() => {
                 this.getTableData();
                 this.dataRequestTimeout = null;
-            }, 500);
+            }, 150);
         }
-        css() {
-            return /*css*/ `
+        componentStyles() {
+            return css /*css*/ `
       :host {
         display: block;
       }
 
       .snice-table {
-        border-collapse: collapse;
         width: 100%;
+        overflow: auto;
       }
 
       table {
@@ -253,15 +354,29 @@ let SniceTable = (() => {
         border-collapse: separate;
         border-spacing: 0;
         border-radius: var(--snice-border-radius-lg);
-        overflow: hidden;
         border: 1px solid var(--snice-color-border);
       }
 
       th, td {
-        padding: var(--snice-spacing-sm);
+        padding: var(--snice-spacing-xsm) var(--snice-spacing-xsm);
         border: 1px solid var(--snice-color-border);
         text-align: left;
         color: var(--snice-color-text);
+        max-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      th {
+        padding: var(--snice-spacing-sm) var(--snice-spacing-sm);
+      }
+
+      th.select-column,
+      td.select-column {
+        width: 2.5rem;
+        max-width: 2.5rem;
+        text-align: center;
+        padding: var(--snice-spacing-xs);
       }
 
       th {
@@ -306,6 +421,28 @@ let SniceTable = (() => {
         background-color: var(--snice-color-background-tertiary);
       }
 
+      /* List mode - hide vertical borders */
+      :host([list]) th,
+      :host([list]) td {
+        border-left: none;
+        border-right: none;
+      }
+
+      :host([list]) th:first-child,
+      :host([list]) td:first-child {
+        border-left: none;
+      }
+
+      :host([list]) th:last-child,
+      :host([list]) td:last-child {
+        border-right: none;
+      }
+
+      :host([list]) table {
+        border-left: none;
+        border-right: none;
+      }
+
       [part="header"] {
         background-color: var(--snice-color-background);
       }
@@ -330,13 +467,19 @@ let SniceTable = (() => {
         display: none;
       }
 
+      .search-input,
+      .selector-input {
+        height: 2.5rem;
+      }
+
       .search-input {
-        min-width: 200px;
+        min-width: 12.5rem;
         flex: 1;
       }
 
       .selector-input {
-        min-width: 150px;
+        min-width: 9.375rem;
+        --snice-select-min-height: 2rem;
       }
 
       /* Sort indicators */
@@ -375,7 +518,7 @@ let SniceTable = (() => {
       tbody {
         transition: opacity var(--snice-transition-normal);
       }
-      
+
       :host([loading]) tbody {
         opacity: 0.5;
       }
@@ -385,44 +528,160 @@ let SniceTable = (() => {
         padding: var(--snice-spacing-lg);
         color: var(--snice-color-text-secondary);
       }
+
+      /* Slotted table layout */
+      .snice-table--slotted {
+        border: 1px solid var(--snice-color-border);
+        border-radius: var(--snice-border-radius-lg);
+        overflow: hidden;
+      }
+
+      .snice-table--slotted .table-header {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+        background-color: var(--snice-color-background-secondary);
+        border-bottom: 2px solid var(--snice-color-border);
+        padding: var(--snice-spacing-sm);
+        font-weight: var(--snice-font-weight-semibold);
+      }
+
+      .snice-table--slotted .table-header::slotted(snice-column) {
+        padding: var(--snice-spacing-sm);
+      }
+
+      .snice-table--slotted .table-body {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .snice-table--slotted .table-body::slotted(snice-row) {
+        border-bottom: 1px solid var(--snice-color-border);
+      }
+
+      .snice-table--slotted .table-body::slotted(snice-row:last-child) {
+        border-bottom: none;
+      }
+
+      :host([striped]) .snice-table--slotted .table-body::slotted(snice-row:nth-child(even)) {
+        background-color: var(--snice-color-background-secondary);
+      }
+
+      :host([hoverable]) .snice-table--slotted .table-body::slotted(snice-row:hover) {
+        background-color: var(--snice-color-background-tertiary);
+      }
     `;
         }
-        html() {
-            return /*html*/ `
-      <div class="snice-table">
-        ${this.renderControls()}
-        <table>
-          <thead></thead>
-          <tbody></tbody>
-        </table>
-      </div>
-    `;
+        renderContent() {
+            // Check if we have slotted rows
+            const hasSlottedRows = this.querySelectorAll('snice-row[slot="rows"]').length > 0;
+            if (hasSlottedRows) {
+                // Use slotted rows layout
+                return html /*html*/ `
+        <div class="snice-table snice-table--slotted" @click=${this.handleClick} @change=${this.handleChange}>
+          <div class="table-controls-container"></div>
+          <div class="table-header" id="slotted-header"></div>
+          <div class="table-body">
+            <slot name="rows"></slot>
+          </div>
+          <slot name="columns" style="display: none;"></slot>
+        </div>
+      `;
+            }
+            else {
+                // Use traditional table layout
+                return html /*html*/ `
+        <div class="snice-table" @click=${this.handleClick} @change=${this.handleChange}>
+          <div class="table-controls-container"></div>
+          <table>
+            <thead></thead>
+            <tbody></tbody>
+          </table>
+        </div>
+      `;
+            }
         }
         renderControls() {
-            return /*html*/ `
-      <div class="table-controls" part="controls">
-        <snice-input 
-          class="search-input"
-          type="search" 
-          placeholder="Search..." 
-          value="${this.searchText}"
-          size="medium"
-        ></snice-input>
-        <snice-select 
-          class="selector-input"
-          multiple
-          searchable
-          clearable
-          placeholder="Filter..."
-          size="medium"
-        >
-          ${this.selectorOptions.map(opt => `<snice-option value="${opt.value}">${opt.label}</snice-option>`).join('')}
-        </snice-select>
-      </div>
-    `;
+            const container = this.shadowRoot?.querySelector('.table-controls-container');
+            if (!container)
+                return;
+            const showControls = this.searchable || this.filterable;
+            if (!showControls) {
+                container.innerHTML = '';
+                return;
+            }
+            // Only render if container is empty (first time)
+            if (container.children.length === 0) {
+                const controlsDiv = document.createElement('div');
+                controlsDiv.className = 'table-controls';
+                controlsDiv.setAttribute('part', 'controls');
+                if (this.searchable) {
+                    const searchInput = document.createElement('snice-input');
+                    searchInput.className = 'search-input';
+                    searchInput.setAttribute('type', 'search');
+                    searchInput.setAttribute('placeholder', 'Search...');
+                    searchInput.setAttribute('size', 'medium');
+                    searchInput.addEventListener('input', this.handleSearchInput);
+                    controlsDiv.appendChild(searchInput);
+                }
+                if (this.filterable) {
+                    const select = document.createElement('snice-select');
+                    select.className = 'selector-input';
+                    select.setAttribute('multiple', '');
+                    select.setAttribute('searchable', '');
+                    select.setAttribute('clearable', '');
+                    select.setAttribute('placeholder', 'Filter...');
+                    select.setAttribute('size', 'medium');
+                    this.selectorOptions.forEach(opt => {
+                        const option = document.createElement('snice-option');
+                        option.setAttribute('value', opt.value);
+                        option.textContent = opt.label;
+                        select.appendChild(option);
+                    });
+                    controlsDiv.appendChild(select);
+                }
+                container.appendChild(controlsDiv);
+            }
+        }
+        async initialize() {
+            // Listen for controller attached event
+            this.addEventListener('@snice/controller-attached', this.onAttached);
+            // Listen for select change events from the filter dropdown
+            this.addEventListener('@snice/select-change', this.handleSelectorChange);
+            // Wait for snice-column to be defined
+            await customElements.whenDefined('snice-column');
+            await customElements.whenDefined('snice-row');
+            // Process slotted columns and rows
+            await this.processSlottedContent();
+        }
+        async processSlottedContent() {
+            // Get slotted column elements
+            const columnElements = Array.from(this.querySelectorAll('snice-column[slot="columns"]'));
+            if (columnElements.length > 0) {
+                // Extract column definitions from snice-column elements
+                this.columns = columnElements.map((col) => col.getColumnDefinition());
+                // Pass column definitions to slotted rows
+                const rowElements = Array.from(this.querySelectorAll('snice-row[slot="rows"]'));
+                rowElements.forEach((row, index) => {
+                    row.columns = this.columns;
+                    row.index = index;
+                    row.hoverable = this.hoverable;
+                    row.clickable = this.clickable;
+                    row.selectable = this.selectable;
+                });
+                // Render the header for slotted mode (after next tick to ensure DOM is updated)
+                requestAnimationFrame(() => this.renderSlottedHeader());
+            }
+        }
+        renderSlottedHeader() {
+            const headerContainer = this.shadowRoot?.querySelector('#slotted-header');
+            if (!headerContainer || this.columns.length === 0)
+                return;
+            // Render column headers
+            headerContainer.innerHTML = this.columns.map(col => `<div class="header-cell">${col.label}</div>`).join('');
         }
         render() {
-            console.log('render() called');
+            this.renderControls();
             this.renderHeader();
             this.renderBody();
         }
@@ -460,6 +719,7 @@ let SniceTable = (() => {
             const headerRow = document.createElement('tr');
             if (this.selectable) {
                 const selectCell = document.createElement('th');
+                selectCell.className = 'select-column';
                 const allSelected = this.selectedRows.length === this.data.length && this.data.length > 0;
                 const someSelected = this.selectedRows.length > 0 && this.selectedRows.length < this.data.length;
                 selectCell.innerHTML = `<input type="checkbox" class="select-all" ${allSelected ? 'checked' : ''} />`;
@@ -505,10 +765,11 @@ let SniceTable = (() => {
                     orderNumber = `<span class="sort-order">${sortIndex + 1}</span>`;
                 }
             }
+            const indicatorClasses = ['sort-indicator', isActive ? 'active' : ''].filter(Boolean).join(' ');
             return `
       <div class="sort-header">
         <span>${column.label}</span>
-        <div class="sort-indicator ${isActive ? 'active' : ''}">
+        <div class="${indicatorClasses}">
           ${indicator}
           ${orderNumber}
         </div>
@@ -518,7 +779,6 @@ let SniceTable = (() => {
         renderBody() {
             if (!this.tbody)
                 return;
-            console.log('renderBody called with data:', this.data.length, 'columns:', this.columns.length, 'loading:', this.loading);
             this.tbody.innerHTML = '';
             if (this.data.length === 0 && this.columns.length > 0) {
                 if (this.loading) {
@@ -546,6 +806,7 @@ let SniceTable = (() => {
                     return;
                 }
             }
+            const fragment = document.createDocumentFragment();
             this.data.forEach((rowData, index) => {
                 const tr = document.createElement('tr');
                 tr.setAttribute('data-index', String(index));
@@ -554,6 +815,7 @@ let SniceTable = (() => {
                 tr.setAttribute('data-selected', String(isSelected));
                 if (this.selectable) {
                     const selectCell = document.createElement('td');
+                    selectCell.className = 'select-column';
                     selectCell.innerHTML = `<input type="checkbox" class="row-select" ${isSelected ? 'checked' : ''} data-row-index="${index}" />`;
                     tr.appendChild(selectCell);
                 }
@@ -566,8 +828,9 @@ let SniceTable = (() => {
                     td.innerHTML = `<${cellTagName} ${attributes}></${cellTagName}>`;
                     tr.appendChild(td);
                 });
-                this.tbody.appendChild(tr);
+                fragment.appendChild(tr);
             });
+            this.tbody.appendChild(fragment);
         }
         getCellAttributes(column, value) {
             const attributes = [
@@ -626,91 +889,12 @@ let SniceTable = (() => {
                     return 'snice-cell-filesize';
                 case 'sparkline':
                     return 'snice-cell-sparkline';
+                case 'image':
+                    return 'snice-cell-image';
                 default:
                     return 'snice-cell';
             }
         }
-        handleSort(e) {
-            const th = e.target.closest('th.sortable');
-            if (!th)
-                return;
-            const columnKey = th.getAttribute('data-key');
-            if (columnKey) {
-                console.log('Sorting column:', columnKey);
-                this.toggleSort(columnKey, true); // Always multi-sort
-            }
-        }
-        handleRowSelect(e) {
-            const checkbox = e.target;
-            const rowIndex = parseInt(checkbox.getAttribute('data-row-index') || '0');
-            if (checkbox.checked) {
-                if (!this.selectedRows.includes(rowIndex)) {
-                    this.selectedRows = [...this.selectedRows, rowIndex];
-                }
-            }
-            else {
-                this.selectedRows = this.selectedRows.filter(i => i !== rowIndex);
-            }
-            this.updateRowSelectionState();
-            this.updateSelectAllState();
-            this.dispatchRowSelectionChanged(rowIndex, checkbox.checked);
-        }
-        handleSelectAll(e) {
-            const checkbox = e.target;
-            if (checkbox.checked) {
-                this.selectedRows = this.data.map((_, index) => index);
-            }
-            else {
-                this.selectedRows = [];
-            }
-            this.updateRowSelectionState();
-            this.dispatchSelectAllChanged(checkbox.checked);
-        }
-        handleRowClick(e) {
-            const tr = e.target.closest('tr');
-            if (!tr)
-                return;
-            const target = e.target;
-            // Don't trigger if clicking on checkbox or other interactive elements
-            if (target.matches('input[type="checkbox"], button, a, .interactive')) {
-                return;
-            }
-            const rowIndex = parseInt(tr.getAttribute('data-index') || '0');
-            const rowData = this.data[rowIndex];
-            // Handle row selection if selectable
-            if (this.selectable) {
-                const isCurrentlySelected = this.selectedRows.includes(rowIndex);
-                if (isCurrentlySelected) {
-                    this.selectedRows = this.selectedRows.filter(i => i !== rowIndex);
-                }
-                else {
-                    this.selectedRows = [...this.selectedRows, rowIndex];
-                }
-                this.updateRowSelectionState();
-                this.updateSelectAllState();
-                this.dispatchRowSelectionChanged(rowIndex, !isCurrentlySelected);
-            }
-            // Handle clickable row event
-            if (this.clickable) {
-                this.dispatchEvent(new CustomEvent('row-clicked', {
-                    detail: { rowData, rowIndex }
-                }));
-            }
-        }
-        onAttached() {
-            console.log('Controller attached, loading config and data...');
-            this.getTableConfig();
-            this.getTableData();
-        }
-        handleSearchChange(e) {
-            const input = e.target;
-            this.searchText = input.value;
-            this.debouncedDataRequest();
-        }
-        handleSelectorChange(e) {
-            this.selector = Array.isArray(e.detail.value) ? e.detail.value.join(',') : e.detail.value;
-            this.debouncedDataRequest();
-        }
         updateRowSelectionState() {
             if (!this.tbody)
                 return;
@@ -734,7 +918,6 @@ let SniceTable = (() => {
             selectAllCheckbox.indeterminate = someSelected;
         }
         toggleSort(columnKey, multiSort = false) {
-            console.log('toggleSort called:', { columnKey, multiSort, currentSort: this.currentSort });
             if (!multiSort) {
                 // Single column sort - clear all other sorts
                 const existingSort = this.currentSort.find(s => s.column === columnKey);
@@ -767,7 +950,6 @@ let SniceTable = (() => {
                     }
                 }
             }
-            console.log('New sort state:', this.currentSort);
             this.renderHeader(); // Update sort indicators immediately
             this.debouncedDataRequest(); // Show loading immediately, debounce the actual request
         }