@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-table/x-table.js

@@ -14,7 +14,7 @@ import { TableService } from "../../utils";
  * ></x-table>
  */
 export class XTable {
-    // We'll move common logic to a base class in a future step if needed, 
+    // We'll move common logic to a base class in a future step if needed,
     // but for now let's just make the members more accessible.
     /**
      * Host element reference.
@@ -156,6 +156,12 @@ export class XTable {
      * <x-table rowEvents={(r) => ({ onClick: () => console.log(r) })}></x-table>
      */
     rowEvents;
+    /**
+     * Whether the row is clickable.
+     * Can be a boolean or a function returning a boolean.
+     * @default false
+     */
+    clickable = false;
     /**
      * Enable column resizing.
      * @default false
@@ -263,10 +269,6 @@ export class XTable {
      * Expanded row keys.
      */
     expandedRowKeys = [];
-    /**
-     * Hovered row key.
-     */
-    hoveredRowKey = null;
     /**
      * Internal columns state for resizing and reordering.
      */
@@ -282,6 +284,7 @@ export class XTable {
     draggedRowKey = null;
     dragOverRowKey = null;
     dragOverRowSide = null;
+    searchState = {};
     // ==================== Lifecycle ====================
     /**
      * @returns void
@@ -290,6 +293,7 @@ export class XTable {
         this.tableService = new TableService(this.rowKey);
         this.tableService.state.columns = ColumnUtil.getFlattenColumns(this.columns);
         this.tableService.state.dataSource = this.dataSource;
+        this.searchState = {};
         // Subscribe to service state changes to trigger re-renders
         this.tableService.subscribe(() => {
             // Just trigger re-render if needed, though Stencil handles its own @State
@@ -407,13 +411,14 @@ export class XTable {
         }
         return this.rowClassName;
     }
-    getCellValue(record, dataIndex) {
-        if (!dataIndex)
+    getCellValue(record, dataIndex, key) {
+        const prop = dataIndex || key;
+        if (!prop)
             return undefined;
-        if (Array.isArray(dataIndex)) {
-            return dataIndex.reduce((obj, key) => obj?.[key], record);
+        if (Array.isArray(prop)) {
+            return prop.reduce((obj, k) => obj?.[k], record);
         }
-        return record[dataIndex];
+        return record[prop];
     }
     /**
      * Processes the data source by applying filters and sorting.
@@ -435,7 +440,8 @@ export class XTable {
             dataSource: this.internalDataSource,
             columns: this.internalColumns,
             filterState: this.filterState,
-            sortState: this.sortState
+            sortState: this.sortState,
+            searchState: this.searchState,
         });
         return this.tableService.getProcessedData();
     }
@@ -456,7 +462,7 @@ export class XTable {
             return processededData;
         this.tableService.setState({
             currentPage: this.currentPage,
-            pageSize: this.currentPageSize
+            pageSize: this.currentPageSize,
         });
         return this.tableService.getPaginatedData(processededData);
     }
@@ -468,20 +474,33 @@ export class XTable {
         this.emitChange('sort');
     }
     handlePageChange(page, pageSize) {
-        this.tableService.goToPage(page);
-        this.tableService.setPageSize(pageSize);
+        if (pageSize !== this.currentPageSize) {
+            // setPageSize resets currentPage to 1 internally; restore the desired page after
+            this.tableService.setPageSize(pageSize);
+            this.tableService.goToPage(page);
+        }
+        else {
+            this.tableService.goToPage(page);
+        }
         this.currentPage = this.tableService.state.currentPage;
         this.currentPageSize = this.tableService.state.pageSize;
         this.emitChange('paginate');
     }
     handleRowClick(record, index, event) {
+        const isClickableProp = typeof this.clickable === 'function' ? this.clickable(record, index) : this.clickable;
+        const children = record.children;
+        const hasChildren = children && children.length > 0;
+        const isExpandable = this.shouldShowExpandColumn() && (hasChildren || this.expandable?.rowExpandable?.(record) !== false);
+        const isClickable = isClickableProp || !!this.rowSelection || !!this.expandable?.expandRowByClick || isExpandable;
+        if (!isClickable)
+            return;
         this.xRowClick.emit({ record, index, event });
         // Handle row selection on click
         if (this.rowSelection) {
             this.toggleRowSelection(record);
         }
         // Handle expand on row click
-        if (this.expandable?.expandRowByClick) {
+        if (this.expandable?.expandRowByClick || isExpandable) {
             this.toggleRowExpand(record);
         }
         // Custom rowEvents handler
@@ -552,6 +571,13 @@ export class XTable {
         const order = isActive ? this.sortState.order : null;
         return (h("span", { class: "x-table-column-sorter" }, h("span", { class: "x-table-column-sorter-inner" }, h("span", { class: { 'x-table-column-sorter-up': true, 'active': order === 'ascend' } }, h("svg", { viewBox: "0 0 1024 1024", width: "1em", height: "1em", fill: "currentColor" }, h("path", { d: "M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z" }))), h("span", { class: { 'x-table-column-sorter-down': true, 'active': order === 'descend' } }, h("svg", { viewBox: "0 0 1024 1024", width: "1em", height: "1em", fill: "currentColor" }, h("path", { d: "M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z" }))))));
     }
+    shouldShowExpandColumn() {
+        if (!this.expandable)
+            return false;
+        if (this.expandable.expandedRowRender)
+            return true;
+        return this.internalDataSource.some(r => r.children && r.children.length > 0);
+    }
     renderSelectionColumn(rowSpan = 1) {
         if (!this.rowSelection)
             return null;
@@ -561,13 +587,60 @@ export class XTable {
                 return checkboxProps?.disabled || this.selectedRowKeys.includes(this.getRowKey(record));
             });
         const someSelected = this.selectedRowKeys.length > 0 && !allSelected;
-        return (h("th", { class: "x-table-cell x-table-selection-column", rowSpan: rowSpan }, this.rowSelection.type !== 'radio' && !this.rowSelection.hideSelectAll && (h("label", { class: "x-table-selection-checkbox" }, h("input", { type: "checkbox", checked: allSelected, indeterminate: someSelected, onChange: (e) => this.handleSelectAll(e.target.checked) }), h("span", { class: "x-table-checkbox-inner" })))));
+        return (h("th", { class: "x-table-cell x-table-selection-column", rowSpan: rowSpan }, this.rowSelection.type !== 'radio' && !this.rowSelection.hideSelectAll && (h("label", { class: "x-table-selection-checkbox" }, h("input", { type: "checkbox", checked: allSelected, indeterminate: someSelected, onChange: e => this.handleSelectAll(e.target.checked) }), h("span", { class: "x-table-checkbox-inner" })))));
     }
     renderExpandColumn(rowSpan = 1) {
-        if (!this.expandable?.expandedRowRender)
+        if (!this.shouldShowExpandColumn())
             return null;
         return (h("th", { class: "x-table-cell x-table-expand-column", rowSpan: rowSpan }, this.expandable.columnTitle || ''));
     }
+    hasSearchableColumns() {
+        return this.internalColumns.some(col => col.searchable);
+    }
+    handleSearchChange(columnKey, value) {
+        this.searchState = {
+            ...this.searchState,
+            [columnKey]: value,
+        };
+        this.currentPage = 1;
+        this.tableService.goToPage(1);
+        this.emitChange('filter');
+    }
+    renderSearchCell(column, stickyOffsets) {
+        if (column.hidden)
+            return null;
+        const style = {};
+        const key = (column.key || column.dataIndex);
+        const isFixedLeft = column.fixed === 'left' || column.fixed === true;
+        const isFixedRight = column.fixed === 'right';
+        if (isFixedLeft && key && stickyOffsets.left[key] !== undefined) {
+            style.position = 'sticky';
+            style.left = `${stickyOffsets.left[key]}px`;
+            style.zIndex = '3';
+        }
+        if (isFixedRight && key && stickyOffsets.right[key] !== undefined) {
+            style.position = 'sticky';
+            style.right = `${stickyOffsets.right[key]}px`;
+            style.zIndex = '3';
+        }
+        const searchable = column.searchable === true;
+        return (h("th", { class: {
+                'x-table-cell': true,
+                'x-table-cell-search': true,
+                'x-table-cell-fix-left': isFixedLeft,
+                'x-table-cell-fix-right': isFixedRight,
+                'x-table-cell-fix-left-last': isFixedLeft && key === stickyOffsets.lastFixedLeftKey,
+                'x-table-cell-fix-right-first': isFixedRight && key === stickyOffsets.firstFixedRightKey,
+                [`x-table-align-${column.align || 'left'}`]: true,
+            }, style: style }, searchable ? (column.filters && column.filters.length > 0 ? (h("select", { class: "x-table-search-select", ref: el => {
+                if (el) {
+                    el.value = this.searchState[key] || '';
+                }
+            }, onChange: e => this.handleSearchChange(key, e.target.value) }, h("option", { value: "" }, "-"), column.filters.map(opt => (h("option", { value: String(opt.value) }, opt.text))))) : (h("div", { class: "x-table-search-input-wrapper" }, h("input", { type: "text", class: "x-table-search-input", placeholder: translate('Search.placeholder', {}, 'Search...'), value: this.searchState[key] || '', onInput: e => this.handleSearchChange(key, e.target.value) })))) : null));
+    }
+    renderSearchRow(stickyOffsets) {
+        return (h("tr", { class: "x-table-search-row" }, this.draggableRows && h("th", { class: "x-table-cell x-table-drag-column" }), this.rowSelection && h("th", { class: "x-table-cell x-table-selection-column" }), this.shouldShowExpandColumn() && h("th", { class: "x-table-cell x-table-expand-column" }), this.internalColumns.map(column => this.renderSearchCell(column, stickyOffsets))));
+    }
     activeFilterColumn = null;
     handleFilterDropdownOpenChange(columnKey, visible) {
         if (visible) {
@@ -596,15 +669,15 @@ export class XTable {
         }
         this.filterState = {
             ...this.filterState,
-            [columnKey]: newFilters
+            [columnKey]: newFilters,
         };
         // emit change if needed immediately? AntD usually waits for OK.
         // implementing "Apply on OK" pattern basically means we should use temp state, but for simplicity here we update state.
         // If we want rigorous "OK" button behavior, use temp state.
-        // Given the prompt "complete table ... according to AntD React", 
+        // Given the prompt "complete table ... according to AntD React",
         // AntD updates the UI checkbox state but does NOT filter the table data until OK (unless filtering is controlled or we use realtime).
         // Let's implement realtime update for simplicity + "OK" simply closes.
-        // Actually, "Reset" should clear. 
+        // Actually, "Reset" should clear.
         // "OK" should just confirm/close.
         // Realtime filtering is often better UX anyway.
         // But wait, if I filter realtime, data changes immediately.
@@ -614,7 +687,7 @@ export class XTable {
     handleFilterReset(columnKey) {
         this.filterState = {
             ...this.filterState,
-            [columnKey]: null
+            [columnKey]: null,
         };
         this.emitChange('filter');
         this.activeFilterColumn = null;
@@ -631,12 +704,12 @@ export class XTable {
         const selectedValues = this.filterState[columnKey] || [];
         return (h("div", { class: "x-table-filter-dropdown-content", slot: "content" }, h("ul", { class: "x-table-filter-menu" }, column.filters.map(filter => {
             const isSelected = selectedValues.includes(filter.value);
-            return (h("li", { class: "x-table-filter-menu-item", onClick: (e) => {
+            return (h("li", { class: "x-table-filter-menu-item", onClick: e => {
                     // Prevent toggling checkbox from double triggering if label handles it
                     // Actually click on LI should toggle
                     e.stopPropagation();
                     this.handleFilterChange(columnKey, filter.value, !isSelected, isMultiple);
-                } }, isMultiple ? (h("x-checkbox", { checked: isSelected, onClick: (e) => e.stopPropagation(), onChange: () => {
+                } }, isMultiple ? (h("x-checkbox", { checked: isSelected, onClick: e => e.stopPropagation(), onChange: () => {
                     // x-checkbox emits onChange or onInput? assuming standard event or CustomEvent
                     // Stencil components usually emit CustomEvent named 'change' etc.
                     // x-checkbox likely has prop 'checked' and event 'xChange' or similar?
@@ -653,7 +726,7 @@ export class XTable {
         const hasActiveFilter = this.filterState[columnKey]?.length > 0;
         return (h("x-popover", { trigger: "click", placement: "bottom", open: isOpen, class: "x-table-filter-trigger-container", onXOpenChange: (e) => this.handleFilterDropdownOpenChange(columnKey, e.detail) }, h("span", { class: {
                 'x-table-filter-trigger': true,
-                'active': hasActiveFilter || isOpen
+                'active': hasActiveFilter || isOpen,
             } }, h("svg", { viewBox: "0 0 1024 1024", width: "1em", height: "1em", fill: "currentColor" }, h("path", { d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z" }))), this.renderFilterDropdown(column)));
     }
     // ==================== Drag & Resize Handlers ====================
@@ -673,7 +746,7 @@ export class XTable {
         }
         this.resizeState = {
             prevKey: column.key || column.dataIndex,
-            nextKey: nextColumn ? (nextColumn.key || nextColumn.dataIndex) : null,
+            nextKey: nextColumn ? nextColumn.key || nextColumn.dataIndex : null,
             startX: e.pageX,
             startPrevWidth: startPrevWidth,
             startNextWidth: startNextWidth,
@@ -761,6 +834,11 @@ export class XTable {
         this.dragOverColumnKey = null;
         this.dragOverColumnSide = null;
     };
+    handleColumnDragEnd = () => {
+        this.draggedColumnKey = null;
+        this.dragOverColumnKey = null;
+        this.dragOverColumnSide = null;
+    };
     handleColumnDrop(e, targetColumn) {
         e.preventDefault();
         const targetKey = targetColumn.key || targetColumn.dataIndex;
@@ -844,6 +922,11 @@ export class XTable {
         this.dragOverRowKey = null;
         this.dragOverRowSide = null;
     };
+    handleRowDragEnd = () => {
+        this.draggedRowKey = null;
+        this.dragOverRowKey = null;
+        this.dragOverRowSide = null;
+    };
     handleRowDrop(e, targetRecord) {
         e.preventDefault();
         const targetKey = this.getRowKey(targetRecord);
@@ -872,6 +955,8 @@ export class XTable {
     getStickyOffsets() {
         const leftOffsets = {};
         const rightOffsets = {};
+        let lastFixedLeftKey = null;
+        let firstFixedRightKey = null;
         const visibleColumns = this.internalColumns.filter(col => !col.hidden);
         let left = 0;
         visibleColumns.forEach(col => {
@@ -880,6 +965,7 @@ export class XTable {
                 leftOffsets[key] = left;
                 const width = typeof col.width === 'number' ? col.width : 0; // Simple fallback
                 left += width;
+                lastFixedLeftKey = key;
             }
         });
         let right = 0;
@@ -890,9 +976,10 @@ export class XTable {
                 rightOffsets[key] = right;
                 const width = typeof col.width === 'number' ? col.width : 0;
                 right += width;
+                firstFixedRightKey = key;
             }
         }
-        return { leftOffsets, rightOffsets };
+        return { leftOffsets, rightOffsets, lastFixedLeftKey, firstFixedRightKey };
     }
     /**
      * Renders a single header cell (th).
@@ -922,14 +1009,17 @@ export class XTable {
         if (column.maxWidth) {
             style.maxWidth = `${column.maxWidth}px`;
         }
+        if (column.width) {
+            style.width = typeof column.width === 'number' ? `${column.width}px` : column.width;
+        }
         // Sticky
         // Find the leaf columns to determine sticky offsets
         const leaves = ColumnUtil.getFlattenColumns([column]);
         const firstLeaf = leaves[0];
         const lastLeaf = leaves[leaves.length - 1];
-        const firstKey = firstLeaf ? (firstLeaf.key || firstLeaf.dataIndex) : (column.key || column.dataIndex);
-        const lastKey = lastLeaf ? (lastLeaf.key || lastLeaf.dataIndex) : (column.key || column.dataIndex);
-        const isFixedLeft = (column.fixed === 'left' || column.fixed === true) || (firstLeaf && (firstLeaf.fixed === 'left' || firstLeaf.fixed === true));
+        const firstKey = firstLeaf ? firstLeaf.key || firstLeaf.dataIndex : column.key || column.dataIndex;
+        const lastKey = lastLeaf ? lastLeaf.key || lastLeaf.dataIndex : column.key || column.dataIndex;
+        const isFixedLeft = column.fixed === 'left' || column.fixed === true || (firstLeaf && (firstLeaf.fixed === 'left' || firstLeaf.fixed === true));
         const isFixedRight = column.fixed === 'right' || (lastLeaf && lastLeaf.fixed === 'right');
         if (isFixedLeft && firstKey && stickyOffsets.left[firstKey] !== undefined) {
             style.position = 'sticky';
@@ -953,6 +1043,8 @@ export class XTable {
                 'x-table-cell-filtered': isFiltered,
                 'x-table-cell-fix-left': isFixedLeft,
                 'x-table-cell-fix-right': isFixedRight,
+                'x-table-cell-fix-left-last': isFixedLeft && key === stickyOffsets.lastFixedLeftKey,
+                'x-table-cell-fix-right-first': isFixedRight && key === stickyOffsets.firstFixedRightKey,
                 [`x-table-align-${column.align || 'left'}`]: true,
                 [column.className || '']: !!column.className,
                 'x-table-cell-resizable': isResizable,
@@ -960,11 +1052,11 @@ export class XTable {
                 'x-table-cell-dragging': this.draggedColumnKey === key,
                 'x-table-cell-drag-over-left': this.dragOverColumnKey === key && this.dragOverColumnSide === 'left',
                 'x-table-cell-drag-over-right': this.dragOverColumnKey === key && this.dragOverColumnSide === 'right',
-            }, style: style, colSpan: colSpan, rowSpan: rowSpan, draggable: isDraggable, onDragStart: isDraggable ? (e) => this.handleColumnDragStart(e, column) : undefined, onDragOver: isDraggable ? (e) => this.handleColumnDragOver(e, column) : undefined, onDragLeave: isDraggable ? this.handleColumnDragLeave : undefined, onDrop: isDraggable ? (e) => this.handleColumnDrop(e, column) : undefined, onClick: (e) => {
+            }, style: style, colSpan: colSpan, rowSpan: rowSpan, draggable: isDraggable, onDragStart: isDraggable ? e => this.handleColumnDragStart(e, column) : undefined, onDragOver: isDraggable ? e => this.handleColumnDragOver(e, column) : undefined, onDragLeave: isDraggable ? this.handleColumnDragLeave : undefined, onDragEnd: isDraggable ? this.handleColumnDragEnd : undefined, onDrop: isDraggable ? e => this.handleColumnDrop(e, column) : undefined, onClick: e => {
                 if (isSortable && !e.target.closest('.x-table-filter-trigger-container') && !e.target.closest('.x-table-resize-handle')) {
                     this.handleSort(column);
                 }
-            } }, h("div", { class: "x-table-column-title" }, h("span", { class: "x-table-column-title-text" }, column.title), this.renderSortIcon(column), this.renderFilterIcon(column)), isResizable && !isLast && (h("div", { class: "x-table-resize-handle", onMouseDown: (e) => this.handleResizeStart(e, column), onClick: (e) => e.stopPropagation() }))));
+            } }, h("div", { class: "x-table-column-title" }, h("span", { class: "x-table-column-title-text" }, column.title), this.renderSortIcon(column), this.renderFilterIcon(column)), isResizable && !isLast && h("div", { class: "x-table-resize-handle", onMouseDown: e => this.handleResizeStart(e, column), onClick: e => e.stopPropagation() })));
     }
     /**
      * Renders the table header (thead).
@@ -986,7 +1078,7 @@ export class XTable {
         return (h("thead", { class: {
                 'x-table-thead': true,
                 [this.classNames?.header || '']: !!this.classNames?.header,
-            }, style: this.styles?.header }, rows.map((row, rowIndex) => (h("tr", null, rowIndex === 0 && this.renderDragColumn(rowCount), rowIndex === 0 && this.renderSelectionColumn(rowCount), rowIndex === 0 && this.renderExpandColumn(rowCount), row.map((cell, index) => this.renderHeaderCell(cell.cell, stickyOffsets, index === row.length - 1, cell.rowSpan, cell.colSpan)))))));
+            }, style: this.styles?.header }, rows.map((row, rowIndex) => (h("tr", null, rowIndex === 0 && this.renderDragColumn(rowCount), rowIndex === 0 && this.renderSelectionColumn(rowCount), rowIndex === 0 && this.renderExpandColumn(rowCount), row.map((cell, index) => this.renderHeaderCell(cell.cell, stickyOffsets, index === row.length - 1, cell.rowSpan, cell.colSpan))))), this.hasSearchableColumns() && this.renderSearchRow(stickyOffsets)));
     }
     /**
      * Renders the drag handle column header.
@@ -1008,27 +1100,15 @@ export class XTable {
      * @param record - The data record for the row.
      * @returns JSX.Element - The td element.
      */
-    // private renderSelectionCell(record: any) {
-    //   if (!this.rowSelection) return null;
-    //   const key = this.getRowKey(record);
-    //   const isSelected = this.selectedRowKeys.includes(key);
-    //   const checkboxProps = this.rowSelection.getCheckboxProps?.(record);
-    //   const isRadio = this.rowSelection.type === 'radio';
-    //   return (
-    //     <td class="x-table-cell x-table-selection-column">
-    //       <label class="x-table-selection-checkbox">
-    //         <input
-    //           type={isRadio ? 'radio' : 'checkbox'}
-    //           name={isRadio ? 'table-radio-group' : undefined}
-    //           checked={isSelected}
-    //           disabled={checkboxProps?.disabled}
-    //           onChange={() => this.toggleRowSelection(record)}
-    //         />
-    //         <span class={isRadio ? 'x-table-radio-inner' : 'x-table-checkbox-inner'}></span>
-    //       </label>
-    //     </td>
-    //   );
-    // }
+    renderSelectionCell(record) {
+        if (!this.rowSelection)
+            return null;
+        const key = this.getRowKey(record);
+        const isSelected = this.selectedRowKeys.includes(key);
+        const checkboxProps = this.rowSelection.getCheckboxProps?.(record);
+        const isRadio = this.rowSelection.type === 'radio';
+        return (h("td", { class: "x-table-cell x-table-selection-column" }, h("label", { class: "x-table-selection-checkbox", onClick: e => e.stopPropagation() }, h("input", { type: isRadio ? 'radio' : 'checkbox', name: isRadio ? `x-table-radio-${this.el.id || 'default'}` : undefined, checked: isSelected, disabled: checkboxProps?.disabled, onChange: () => this.toggleRowSelection(record) }), h("span", { class: isRadio ? 'x-table-radio-inner' : 'x-table-checkbox-inner' }))));
+    }
     /**
      * Renders the expand icon cell for a row.
      *
@@ -1041,12 +1121,19 @@ export class XTable {
      * @param record - The data record for the row.
      * @returns JSX.Element - The td element.
      */
-    renderExpandCell(record) {
-        if (!this.expandable?.expandedRowRender)
+    renderExpandCell(record, index) {
+        if (!this.shouldShowExpandColumn())
             return null;
+        const children = record.children;
+        const hasChildren = children && children.length > 0;
+        const isClickableProp = typeof this.clickable === 'function' ? this.clickable(record, index) : this.clickable;
         const key = this.getRowKey(record);
         const isExpanded = this.expandedRowKeys.includes(key);
-        const isExpandable = this.expandable.rowExpandable?.(record) !== false;
+        let isExpandable = hasChildren || this.expandable?.rowExpandable?.(record) !== false;
+        // If the row is clickable (custom action) and has no children, hide/disable the expansion icon
+        if (isClickableProp && !hasChildren) {
+            isExpandable = false;
+        }
         if (!isExpandable && !this.expandable.showExpandColumn) {
             return h("td", { class: "x-table-cell x-table-expand-column" });
         }
@@ -1054,7 +1141,7 @@ export class XTable {
                 'x-table-row-expand-icon': true,
                 'x-table-row-expand-icon-expanded': isExpanded,
                 'x-table-row-expand-icon-collapsed': !isExpanded,
-            }, onClick: (e) => {
+            }, onClick: e => {
                 e.stopPropagation();
                 this.toggleRowExpand(record);
             }, disabled: !isExpandable }, h("svg", { viewBox: "0 0 1024 1024", width: "1em", height: "1em", fill: "currentColor" }, isExpanded ? (h("path", { d: "M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" })) : (h("path", { d: "M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" }))))));
@@ -1072,7 +1159,7 @@ export class XTable {
         const visibleColumns = this.internalColumns.filter(col => !col.hidden);
         const hasDrag = this.draggableRows;
         const hasSelection = !!this.rowSelection;
-        const hasExpand = !!this.expandable;
+        const hasExpand = this.shouldShowExpandColumn();
         const selectionWidth = typeof this.rowSelection?.columnWidth === 'number' ? `${this.rowSelection.columnWidth}px` : this.rowSelection?.columnWidth || '32px';
         const expandWidth = typeof this.expandable?.columnWidth === 'number' ? `${this.expandable.columnWidth}px` : this.expandable?.columnWidth || '32px';
         return (h("colgroup", null, hasDrag && h("col", { style: { width: '32px' } }), hasSelection && h("col", { style: { width: selectionWidth } }), hasExpand && h("col", { style: { width: expandWidth } }), visibleColumns.map(col => {
@@ -1108,7 +1195,7 @@ export class XTable {
     renderBodyCell(column, record, index, stickyOffsets) {
         if (column.hidden)
             return null;
-        const value = this.getCellValue(record, column.dataIndex);
+        const value = this.getCellValue(record, column.dataIndex, column.key);
         let cellContent;
         if (column.slot) {
             cellContent = h("slot", { name: `${column.slot}-${index}` });
@@ -1118,6 +1205,9 @@ export class XTable {
             cellContent = column.render ? column.render(value, record, index) : value;
         }
         const style = {};
+        if (column.width) {
+            style.width = typeof column.width === 'number' ? `${column.width}px` : column.width;
+        }
         // Sticky
         const key = column.key || column.dataIndex;
         const isFixedLeft = column.fixed === 'left' || column.fixed === true;
@@ -1130,20 +1220,32 @@ export class XTable {
             style.position = 'sticky';
             style.right = `${stickyOffsets.right[key]}px`;
         }
+        const indentLevel = record._indent || 0;
+        const isFirstColumn = this.internalColumns.indexOf(column) === 0;
+        const ellipsis = column.ellipsis;
+        const isEllipsis = !!ellipsis;
+        const ellipsisRows = typeof ellipsis === 'object' ? ellipsis.rows || 1 : 1;
+        const showTooltip = isEllipsis && (typeof ellipsis === 'object' ? ellipsis.showTitle !== false : true);
+        const contentNode = (h("div", { class: {
+                'x-table-cell-content': true,
+                'x-table-cell-line-clamp': ellipsisRows > 1,
+            }, style: ellipsisRows > 1 ? { '--x-table-cell-line-clamp': `${ellipsisRows}` } : {}, innerHTML: typeof cellContent === 'string' ? cellContent : undefined }, cellContent instanceof HTMLElement ? (h("div", { ref: el => {
+                if (el && el.firstChild !== cellContent) {
+                    el.innerHTML = '';
+                    el.appendChild(cellContent);
+                }
+            } })) : typeof cellContent !== 'string' ? (cellContent) : null));
         return (h("td", { class: {
                 'x-table-cell': true,
-                'x-table-cell-ellipsis': !!column.ellipsis,
+                'x-table-cell-ellipsis': isEllipsis,
                 'x-table-cell-fix-left': isFixedLeft,
                 'x-table-cell-fix-right': isFixedRight,
+                'x-table-cell-fix-left-last': isFixedLeft && key === stickyOffsets.lastFixedLeftKey,
+                'x-table-cell-fix-right-first': isFixedRight && key === stickyOffsets.firstFixedRightKey,
                 [`x-table-align-${column.align || 'left'}`]: true,
                 [column.className || '']: !!column.className,
                 [this.classNames?.cell || '']: !!this.classNames?.cell,
-            }, style: { ...style, ...this.styles?.cell }, colSpan: column.colSpan, rowSpan: column.rowSpan, innerHTML: typeof cellContent === 'string' ? cellContent : undefined }, cellContent instanceof HTMLElement ? (h("div", { ref: el => {
-                if (el) {
-                    el.innerHTML = '';
-                    el.appendChild(cellContent);
-                }
-            } })) : (typeof cellContent !== 'string' ? cellContent : null)));
+            }, style: { ...style, ...this.styles?.cell }, colSpan: column.colSpan, rowSpan: column.rowSpan }, h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: column.align === 'center' ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start' } }, isFirstColumn && indentLevel > 0 && h("span", { style: { width: `${indentLevel * 20}px`, flexShrink: '0' } }), showTooltip ? (h("x-tooltip", { title: typeof value === 'string' ? value : undefined, placement: "top" }, contentNode)) : (contentNode))));
     }
     /**
      * Renders the expanded content row if the row is expanded.
@@ -1158,18 +1260,16 @@ export class XTable {
      * @param index - The row index.
      * @returns JSX.Element - The tr element.
      */
-    renderExpandedRow(record, index) {
+    renderExpandedRow(record, index, indent = 0) {
         if (!this.expandable?.expandedRowRender)
             return null;
         const key = this.getRowKey(record);
         if (!this.expandedRowKeys.includes(key))
             return null;
-        const colSpan = this.internalColumns.filter(col => !col.hidden).length +
-            (this.rowSelection ? 1 : 0) +
-            (this.expandable ? 1 : 0) +
-            (this.draggableRows ? 1 : 0);
-        const indent = 0;
+        const colSpan = this.internalColumns.filter(col => !col.hidden).length + (this.rowSelection ? 1 : 0) + (this.expandable ? 1 : 0) + (this.draggableRows ? 1 : 0);
         const content = this.expandable.expandedRowRender(record, index, indent, true);
+        if (content === null || content === undefined)
+            return null;
         return (h("tr", { class: "x-table-expanded-row" }, h("td", { colSpan: colSpan, class: "x-table-expanded-row-cell" }, content)));
     }
     /**
@@ -1189,26 +1289,40 @@ export class XTable {
      * @param stickyOffsets - Calculated sticky offsets.
      * @returns JSX.Element[] - Array containing the row and potential expanded row.
      */
-    renderRow(record, index, stickyOffsets) {
+    renderRow(record, index, stickyOffsets, indent = 0) {
         const key = this.getRowKey(record, index);
         const isSelected = this.selectedRowKeys.includes(key);
         const isExpanded = this.expandedRowKeys.includes(key);
-        const isHovered = this.hoveredRowKey === key;
+        const isClickableProp = typeof this.clickable === 'function' ? this.clickable(record, index) : this.clickable;
+        const children = record.children;
+        const hasChildren = children && children.length > 0;
+        const isExpandable = this.shouldShowExpandColumn() && (hasChildren || this.expandable?.rowExpandable?.(record) !== false);
+        const isClickable = isClickableProp || !!this.rowSelection || !!this.expandable?.expandRowByClick || isExpandable;
         const visibleColumns = this.internalColumns.filter(col => !col.hidden);
-        return [
+        // Add internal indent to record for Cell rendering
+        const recordWithIndent = { ...record, _indent: indent };
+        const rows = [
             h("tr", { key: key, class: {
                     'x-table-row': true,
                     'x-table-row-selected': isSelected,
                     'x-table-row-expanded': isExpanded,
-                    'x-table-row-hover': isHovered,
+                    'x-table-row-clickable': isClickable,
                     'x-table-row-dragging': this.draggedRowKey === key,
                     'x-table-row-drag-over-top': this.dragOverRowKey === key && this.dragOverRowSide === 'top',
                     'x-table-row-drag-over-bottom': this.dragOverRowKey === key && this.dragOverRowSide === 'bottom',
                     [this.getRowClassName(record, index)]: !!this.getRowClassName(record, index),
                     [this.classNames?.row || '']: !!this.classNames?.row,
-                }, style: this.styles?.row, onClick: (e) => this.handleRowClick(record, index, e), onDblClick: (e) => this.handleRowDoubleClick(record, index, e), onMouseEnter: () => this.hoveredRowKey = key, onMouseLeave: () => this.hoveredRowKey = null, draggable: this.draggableRows, onDragStart: this.draggableRows ? (e) => this.handleRowDragStart(e, record) : undefined, onDragOver: this.draggableRows ? (e) => this.handleRowDragOver(e, record) : undefined, onDragLeave: this.draggableRows ? this.handleRowDragLeave : undefined, onDrop: this.draggableRows ? (e) => this.handleRowDrop(e, record) : undefined }, this.renderDragCell(record), this.renderSelectionColumn(), this.renderExpandCell(record), visibleColumns.map(column => this.renderBodyCell(column, record, index, stickyOffsets))),
-            this.renderExpandedRow(record, index),
+                }, style: this.styles?.row, onClick: e => this.handleRowClick(record, index, e), onDblClick: e => this.handleRowDoubleClick(record, index, e), draggable: this.draggableRows, onDragStart: this.draggableRows ? e => this.handleRowDragStart(e, record) : undefined, onDragOver: this.draggableRows ? e => this.handleRowDragOver(e, record) : undefined, onDragLeave: this.draggableRows ? this.handleRowDragLeave : undefined, onDragEnd: this.draggableRows ? this.handleRowDragEnd : undefined, onDrop: this.draggableRows ? e => this.handleRowDrop(e, record) : undefined }, this.renderDragCell(record), this.renderSelectionCell(record), this.renderExpandCell(record, index), visibleColumns.map(column => this.renderBodyCell(column, recordWithIndent, index, stickyOffsets))),
         ];
+        if (this.expandable?.expandedRowRender && isExpanded) {
+            rows.push(this.renderExpandedRow(record, index, indent));
+        }
+        if (hasChildren && isExpanded) {
+            children.forEach((child, childIndex) => {
+                rows.push(...this.renderRow(child, childIndex, stickyOffsets, indent + 1));
+            });
+        }
+        return rows;
     }
     hasCustomRows() {
         return Array.from(this.el.children).some(child => child.tagName === 'X-TABLE-ROW');
@@ -1234,9 +1348,7 @@ export class XTable {
         }
         const data = this.getPaginatedData();
         if (data.length === 0) {
-            const colSpan = this.internalColumns.filter(col => !col.hidden).length +
-                (this.rowSelection ? 1 : 0) +
-                (this.expandable?.expandedRowRender ? 1 : 0);
+            const colSpan = this.internalColumns.filter(col => !col.hidden).length + (this.rowSelection ? 1 : 0) + (this.expandable?.expandedRowRender ? 1 : 0);
             return (h("tbody", { class: {
                     'x-table-tbody': true,
                     [this.classNames?.body || '']: !!this.classNames?.body,
@@ -1247,24 +1359,31 @@ export class XTable {
                 [this.classNames?.body || '']: !!this.classNames?.body,
             }, style: this.styles?.body }, data.map((record, index) => this.renderRow(record, index, stickyOffsets))));
     }
-    renderPagination() {
+    renderPagination(filterType) {
         if (this.pagination === false)
             return null;
-        const total = this.getProcessedData().length;
         const paginationConfig = this.pagination || {};
+        const total = paginationConfig.total !== undefined ? paginationConfig.total : this.getProcessedData().length;
         // Hide on single page
         if (paginationConfig.hideOnSinglePage && total <= this.currentPageSize) {
             return null;
         }
-        const positions = paginationConfig.position || ['bottomRight'];
+        const positions = (paginationConfig.position || ['bottomRight']).filter(pos => {
+            if (!filterType)
+                return true;
+            const isTop = pos.startsWith('top');
+            return filterType === 'top' ? isTop : !isTop;
+        });
+        if (positions.length === 0)
+            return null;
         return positions.map(position => {
             const isTop = position.startsWith('top');
             const align = position.replace('top', '').replace('bottom', '').toLowerCase() || 'right';
-            return (h("div", { class: {
+            return (h("div", { key: `${position}-${isTop}`, class: {
                     'x-table-pagination': true,
                     [`x-table-pagination-${isTop ? 'top' : 'bottom'}`]: true,
                     [`x-table-pagination-${align}`]: true,
-                } }, h("x-pagination", { current: this.currentPage, pageSize: this.currentPageSize, total: total, showSizeChanger: paginationConfig.showSizeChanger, showQuickJumper: paginationConfig.showQuickJumper, simple: paginationConfig.simple, size: paginationConfig.size === 'small' ? 'small' : 'middle', disabled: paginationConfig.disabled, onXChange: (e) => {
+                } }, h("x-pagination", { current: this.currentPage, pageSize: this.currentPageSize, total: total, pageSizeOptions: paginationConfig.pageSizeOptions, showSizeChanger: paginationConfig.showSizeChanger, showQuickJumper: paginationConfig.showQuickJumper, showTotal: paginationConfig.showTotal, simple: paginationConfig.simple, size: paginationConfig.size === 'small' ? 'small' : 'middle', disabled: paginationConfig.disabled, onXChange: (e) => {
                     const { current, pageSize } = e.detail;
                     this.handlePageChange(current, pageSize);
                 } })));
@@ -1273,7 +1392,7 @@ export class XTable {
     renderTitle() {
         if (!this.tableTitle)
             return null;
-        return (h("div", { class: "x-table-title" }, this.tableTitle));
+        return h("div", { class: "x-table-title" }, this.tableTitle);
     }
     renderFooter() {
         if (!this.tableFooter)
@@ -1291,10 +1410,17 @@ export class XTable {
      */
     render() {
         const scrollStyle = {};
+        const innerTableStyle = {};
         if (this.tableScroll?.x) {
             scrollStyle.overflowX = 'auto';
             if (typeof this.tableScroll.x === 'number') {
-                scrollStyle.minWidth = `${this.tableScroll.x}px`;
+                innerTableStyle.minWidth = `${this.tableScroll.x}px`;
+            }
+            else if (typeof this.tableScroll.x === 'string') {
+                innerTableStyle.minWidth = this.tableScroll.x;
+            }
+            else if (this.tableScroll.x === true) {
+                innerTableStyle.minWidth = 'max-content';
             }
         }
         if (this.tableScroll?.y) {
@@ -1306,36 +1432,34 @@ export class XTable {
         };
         const hasPagination = this.pagination && typeof this.pagination === 'object';
         const paginationConfig = hasPagination ? this.pagination : null;
-        const topPagination = hasPagination &&
-            paginationConfig?.position?.some(p => p.startsWith('top'));
-        const bottomPagination = this.pagination === undefined ||
-            (hasPagination &&
-                (paginationConfig?.position?.some(p => p.startsWith('bottom')) || !paginationConfig?.position));
-        const { leftOffsets, rightOffsets } = this.getStickyOffsets();
-        const stickyOffsets = { left: leftOffsets, right: rightOffsets };
+        const topPagination = hasPagination && paginationConfig?.position?.some(p => p.startsWith('top'));
+        const bottomPagination = this.pagination === undefined || (hasPagination && (paginationConfig?.position?.some(p => p.startsWith('bottom')) || !paginationConfig?.position));
+        const { leftOffsets, rightOffsets, lastFixedLeftKey, firstFixedRightKey } = this.getStickyOffsets();
+        const stickyOffsets = { left: leftOffsets, right: rightOffsets, lastFixedLeftKey, firstFixedRightKey };
         // Emit data change event for wrappers to sync slots
         const displayData = this.getPaginatedData();
         const total = this.getProcessedData().length;
         const startIndex = (this.currentPage - 1) * this.currentPageSize;
-        // We emit in a small timeout or just during render if we're careful. 
+        // We emit in a small timeout or just during render if we're careful.
         // In Stencil, emitting during render is generally OK if it's a side-effect for property sync.
         // BUT better in componentDidUpdate / componentWillUpdate.
         this.xDataDisplayChange.emit({
             data: displayData,
             total,
-            startIndex
+            startIndex,
         });
-        return (h(Host, { key: 'b62a59af9b7c2828ed58cd32ad7f506225d768bb', class: {
+        return (h(Host, { key: '76c750528d53df24f767afdc0d53e90c901f113f', class: {
                 'x-table': true,
                 'x-table-bordered': this.bordered,
                 'x-table-loading': this.loading,
                 [`x-table-${this.size}`]: true,
-                'x-table-sticky': !!this.sticky,
+                'x-table-sticky': !!this.sticky || !!this.tableScroll?.y,
                 [this.classNames?.root || '']: !!this.classNames?.root,
-            }, style: this.styles?.root }, h("div", { key: '7c6a43499deddd806e19ce2c743e649c3c8c85fb', class: "x-table-wrapper" }, this.renderTitle(), topPagination && this.renderPagination(), h("div", { key: '109d170bdc71dc14d570439c62ec2691a4c84684', class: "x-table-container" }, this.loading && (h("div", { key: '189af679b8bf1c7bc460c788a072a43f98c922f9', class: "x-table-loading-overlay" }, h("x-spin", { key: '9e45db0adf6e7b45741b9b7affe386c2d77160aa' }))), h("div", { key: '819ef65a6dd6a37f8d77374879376d16678d3666', class: "x-table-content", style: scrollStyle }, h("table", { key: '69fd63f7a7bec1e36876e562f01e779be5caa30b', style: {
+            }, style: this.styles?.root }, h("div", { key: '5af6bb4b50f3e790f1eb15d1c15c262f4ff8ea29', class: "x-table-wrapper" }, this.renderTitle(), topPagination && this.renderPagination('top'), h("div", { key: '71578d15387263765f1ef603520d2e7b668c1476', class: "x-table-container" }, this.loading && (h("div", { key: '17eaf05d5f7884e606a26c5ee64ad23bb495e0af', class: "x-table-loading-overlay" }, h("x-spin", { key: '69fe0249701f71a9dab737d54e6c848fdbce9111' }))), h("div", { key: '37d0f9e25159256389c8b137236ffd20c2575a88', class: "x-table-content", style: scrollStyle }, h("table", { key: '511af98bedf1b8fc0a2b2f1a07fb22b9d7d4675a', style: {
                 ...tableStyle,
-                tableLayout: (this.resizeState || this.internalColumns.some(c => c.width)) ? 'fixed' : this.tableLayout
-            } }, this.renderColGroup(), this.renderHeader(stickyOffsets), this.renderBody(stickyOffsets)))), bottomPagination && this.renderPagination(), this.renderFooter())));
+                ...innerTableStyle,
+                tableLayout: this.resizeState || this.internalColumns.some(c => c.width) ? 'fixed' : this.tableLayout,
+            } }, this.renderColGroup(), this.renderHeader(stickyOffsets), this.renderBody(stickyOffsets)))), (bottomPagination || this.tableFooter) && (h("div", { key: '3bd5751883e4d30519d81cc6ade817c0a13951cc', class: "x-table-footer-pagination" }, this.renderFooter(), bottomPagination && this.renderPagination('bottom'))))));
     }
     static get is() { return "x-table"; }
     static get encapsulation() { return "shadow"; }
@@ -1890,7 +2014,7 @@ export class XTable {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(record: Record<string, unknown>, index: number) => { onClick?: (e: Event) => void; onDoubleClick?: (e: Event) => void; onMouseEnter?: (e: Event) => void; onMouseLeave?: (e: Event) => void }",
+                    "original": "(\n    record: Record<string, unknown>,\n    index: number,\n  ) => { onClick?: (e: Event) => void; onDoubleClick?: (e: Event) => void; onMouseEnter?: (e: Event) => void; onMouseLeave?: (e: Event) => void }",
                     "resolved": "(record: Record<string, unknown>, index: number) => { onClick?: (e: Event) => void; onDoubleClick?: (e: Event) => void; onMouseEnter?: (e: Event) => void; onMouseLeave?: (e: Event) => void; }",
                     "references": {
                         "Record": {
@@ -1917,6 +2041,34 @@ export class XTable {
                 "getter": false,
                 "setter": false
             },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | ((record: Record<string, unknown>, index: number) => boolean)",
+                    "resolved": "((record: Record<string, unknown>, index: number) => boolean) | boolean",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the row is clickable.\nCan be a boolean or a function returning a boolean."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clickable",
+                "defaultValue": "false"
+            },
             "resizableColumns": {
                 "type": "boolean",
                 "mutable": false,
@@ -2083,7 +2235,6 @@ export class XTable {
             "filterState": {},
             "selectedRowKeys": {},
             "expandedRowKeys": {},
-            "hoveredRowKey": {},
             "internalColumns": {},
             "internalDataSource": {},
             "resizeState": {},
@@ -2093,6 +2244,7 @@ export class XTable {
             "draggedRowKey": {},
             "dragOverRowKey": {},
             "dragOverRowSide": {},
+            "searchState": {},
             "activeFilterColumn": {}
         };
     }
@@ -2295,7 +2447,7 @@ export class XTable {
                     "text": "Callback when displayed data changes (due to pagination, filtering or sorting)"
                 },
                 "complexType": {
-                    "original": "{\r\n    data: Record<string, unknown>[];\r\n    total: number;\r\n    startIndex: number;\r\n  }",
+                    "original": "{\n    data: Record<string, unknown>[];\n    total: number;\n    startIndex: number;\n  }",
                     "resolved": "{ data: Record<string, unknown>[]; total: number; startIndex: number; }",
                     "references": {
                         "Record": {