@xlabs-store/core 0.0.1

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

@@ -0,0 +1,2464 @@
+import { Host, h } from "@stencil/core";
+import { translate } from "../../locales/locale.service";
+import { ColumnUtil } from "./column-util";
+import { TableService } from "../../utils";
+/**
+ * @component x-table
+ * @description A table displays rows of data.
+ *
+ * @example
+ * <x-table
+ *   [columns]="columns"
+ *   [dataSource]="data"
+ *   row-key="id"
+ * ></x-table>
+ */
+export class XTable {
+    // 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.
+     */
+    el;
+    tableService;
+    // ==================== Props ====================
+    /**
+     * Columns configuration.
+     * @example
+     * <x-table columns={[{ title: 'Name', dataIndex: 'name' }]}></x-table>
+     */
+    columns = [];
+    /**
+     * Data source array.
+     * @example
+     * <x-table dataSource={[{ key: '1', name: 'Alice' }]}></x-table>
+     */
+    dataSource = [];
+    /**
+     * Row key field or function.
+     * @example
+     * <x-table rowKey="id"></x-table>
+     */
+    rowKey = 'key';
+    /**
+     * Table size.
+     * @default 'large'
+     * @example
+     * <x-table size="small"></x-table>
+     */
+    size = 'large';
+    /**
+     * Table layout.
+     * @default 'auto'
+     * @example
+     * <x-table tableLayout="fixed"></x-table>
+     */
+    tableLayout = 'auto';
+    /**
+     * Whether to show all borders.
+     * @default false
+     * @example
+     * <x-table bordered></x-table>
+     */
+    bordered = false;
+    /**
+     * Loading state.
+     * @default false
+     * @example
+     * <x-table loading></x-table>
+     */
+    loading = false;
+    /**
+     * Show table header.
+     * @default true
+     * @example
+     * <x-table showHeader={false}></x-table>
+     */
+    showHeader = true;
+    /**
+     * Table title.
+     * @example
+     * <x-table tableTitle="Users"></x-table>
+     */
+    tableTitle;
+    /**
+     * Table footer.
+     * @example
+     * <x-table tableFooter="Total: 20"></x-table>
+     */
+    tableFooter;
+    /**
+     * Row selection configuration.
+     * @example
+     * <x-table rowSelection={{ type: 'checkbox' }}></x-table>
+     */
+    rowSelection;
+    /**
+     * Expandable configuration.
+     * @example
+     * <x-table expandable={{ expandedRowRender: (r) => r.description }}></x-table>
+     */
+    expandable;
+    /**
+     * Scroll configuration for table body.
+     * @example
+     * <x-table tableScroll={{ y: 300 }}></x-table>
+     */
+    tableScroll;
+    /**
+     * Pagination configuration. Set to false to disable.
+     * @example
+     * <x-table pagination={{ pageSize: 20 }}></x-table>
+     */
+    pagination;
+    /**
+     * Whether to show sorter tooltip.
+     * @default true
+     * @example
+     * <x-table showSorterTooltip={false}></x-table>
+     */
+    showSorterTooltip = true;
+    /**
+     * Sort directions.
+     * @default ['ascend', 'descend']
+     * @example
+     * <x-table sortDirections={['descend','ascend']}></x-table>
+     */
+    sortDirections = ['ascend', 'descend'];
+    /**
+     * Sticky header and scroll bar.
+     * @example
+     * <x-table sticky></x-table>
+     */
+    sticky;
+    /**
+     * Virtual scroll mode.
+     * @default false
+     * @example
+     * <x-table virtual></x-table>
+     */
+    virtual = false;
+    /**
+     * Empty text when no data.
+     * @example
+     * <x-table emptyText="No records"></x-table>
+     */
+    emptyText = translate('Empty.description', {}, 'No Data');
+    /**
+     * Row class name or function.
+     * @example
+     * <x-table rowClassName={(r) => r.active ? 'active' : ''}></x-table>
+     */
+    rowClassName;
+    /**
+     * Row events handler.
+     * @example
+     * <x-table rowEvents={(r) => ({ onClick: () => console.log(r) })}></x-table>
+     */
+    rowEvents;
+    /**
+     * Enable column resizing.
+     * @default false
+     */
+    resizableColumns = false;
+    /**
+     * Enable column dragging (reordering).
+     * @default false
+     */
+    draggableColumns = false;
+    /**
+     * Enable row dragging (reordering).
+     * @default false
+     */
+    draggableRows = false;
+    /**
+     * Header row events handler.
+     * @example
+     * <x-table headerRowEvents={() => ({ onClick: () => {} })}></x-table>
+     */
+    headerRowEvents;
+    /**
+     * Custom class names for parts.
+     * @example
+     * <x-table classNames={{ root: 'my-table' }}></x-table>
+     */
+    classNames;
+    /**
+     * Custom styles for parts.
+     * @example
+     * <x-table styles={{ root: { minWidth: '600px' } }}></x-table>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Callback when pagination, filters or sorter is changed.
+     * @example
+     * <x-table onXChange={(ev) => console.log(ev.detail)}></x-table>
+     */
+    xChange;
+    /**
+     * Callback when row is clicked.
+     * @example
+     * <x-table onXRowClick={(ev) => console.log(ev.detail)}></x-table>
+     */
+    xRowClick;
+    /**
+     * Callback when row is double clicked.
+     * @example
+     * <x-table onXRowDoubleClick={(ev) => console.log(ev.detail)}></x-table>
+     */
+    xRowDoubleClick;
+    /**
+     * Callback when selection changes.
+     * @example
+     * <x-table onXSelectionChange={(ev) => console.log(ev.detail)}></x-table>
+     */
+    xSelectionChange;
+    /**
+     * Callback when row expand state changes.
+     * @example
+     * <x-table onXExpand={(ev) => console.log(ev.detail)}></x-table>
+     */
+    xExpand;
+    /**
+     * Callback when expanded rows change.
+     * @example
+     * <x-table onXExpandedRowsChange={(ev) => console.log(ev.detail)}></x-table>
+     */
+    xExpandedRowsChange;
+    /**
+     * Callback when columns are reordered via drag and drop.
+     */
+    xColumnSort;
+    /**
+     * Callback when rows are reordered via drag and drop.
+     */
+    xDragSort;
+    /**
+     * Callback when displayed data changes (due to pagination, filtering or sorting)
+     */
+    xDataDisplayChange;
+    // ==================== State ====================
+    /**
+     * Current page number.
+     */
+    currentPage = 1;
+    /**
+     * Current page size.
+     */
+    currentPageSize = 10;
+    /**
+     * Sort state.
+     */
+    sortState = {};
+    /**
+     * Filter state.
+     */
+    filterState = {};
+    /**
+     * Selected row keys.
+     */
+    selectedRowKeys = [];
+    /**
+     * Expanded row keys.
+     */
+    expandedRowKeys = [];
+    /**
+     * Hovered row key.
+     */
+    hoveredRowKey = null;
+    /**
+     * Internal columns state for resizing and reordering.
+     */
+    internalColumns = []; // Changed from private to public for sub-components
+    /**
+     * Internal data source state for row reordering.
+     */
+    internalDataSource = [];
+    resizeState = null;
+    draggedColumnKey = null;
+    dragOverColumnKey = null;
+    dragOverColumnSide = null;
+    draggedRowKey = null;
+    dragOverRowKey = null;
+    dragOverRowSide = null;
+    // ==================== Lifecycle ====================
+    /**
+     * @returns void
+     */
+    componentWillLoad() {
+        this.tableService = new TableService(this.rowKey);
+        this.tableService.state.columns = ColumnUtil.getFlattenColumns(this.columns);
+        this.tableService.state.dataSource = this.dataSource;
+        // Subscribe to service state changes to trigger re-renders
+        this.tableService.subscribe(() => {
+            // Just trigger re-render if needed, though Stencil handles its own @State
+            // In a full refactor, we would map this.state back to @State
+        });
+        this.internalColumns = this.tableService.state.columns;
+        this.internalDataSource = [...this.dataSource];
+        // Initialize pagination
+        if (this.pagination) {
+            const pag = this.pagination;
+            this.tableService.state.currentPage = pag.defaultCurrent || pag.current || 1;
+            this.tableService.state.pageSize = pag.defaultPageSize || pag.pageSize || 10;
+            this.currentPage = this.tableService.state.currentPage;
+            this.currentPageSize = this.tableService.state.pageSize;
+        }
+        // Initialize selection
+        if (this.rowSelection) {
+            this.tableService.state.selectedRowKeys = this.rowSelection.defaultSelectedRowKeys || this.rowSelection.selectedRowKeys || [];
+            this.selectedRowKeys = this.tableService.state.selectedRowKeys;
+        }
+    }
+    // ==================== Watchers ====================
+    handleRowKeyChange() {
+        this.tableService.setRowKey(this.rowKey);
+    }
+    handleColumnsChange() {
+        this.internalColumns = ColumnUtil.getFlattenColumns(this.columns);
+    }
+    handleDataSourceChange() {
+        this.internalDataSource = [...this.dataSource];
+    }
+    handleRowSelectionChange() {
+        if (this.rowSelection?.selectedRowKeys !== undefined) {
+            this.selectedRowKeys = this.rowSelection.selectedRowKeys;
+        }
+    }
+    handleExpandableChange() {
+        if (this.expandable?.expandedRowKeys !== undefined) {
+            this.expandedRowKeys = this.expandable.expandedRowKeys;
+        }
+    }
+    handlePaginationChange() {
+        if (this.pagination && typeof this.pagination === 'object') {
+            if (this.pagination.current !== undefined) {
+                this.currentPage = this.pagination.current;
+            }
+            if (this.pagination.pageSize !== undefined) {
+                this.currentPageSize = this.pagination.pageSize;
+            }
+        }
+    }
+    // ==================== Methods ====================
+    /**
+     * Get current selected row keys.
+     * @returns Promise<(string | number)[]>
+     * @example
+     * const keys = await el.getSelectedRowKeys()
+     */
+    async getSelectedRowKeys() {
+        return this.selectedRowKeys;
+    }
+    /**
+     * Set selected row keys.
+     * @param keys - Row keys.
+     * @returns Promise<void>
+     * @example
+     * await el.setSelectedRowKeys(['1'])
+     */
+    async setSelectedRowKeys(keys) {
+        this.selectedRowKeys = keys;
+    }
+    /**
+     * Clear all selections.
+     * @returns Promise<void>
+     * @example
+     * await el.clearSelection()
+     */
+    async clearSelection() {
+        this.selectedRowKeys = [];
+    }
+    /**
+     * Get current expanded row keys.
+     * @returns Promise<(string | number)[]>
+     * @example
+     * const keys = await el.getExpandedRowKeys()
+     */
+    async getExpandedRowKeys() {
+        return this.expandedRowKeys;
+    }
+    /**
+     * Scroll to a specific row.
+     * @param config - Scroll config.
+     * @returns Promise<void>
+     * @example
+     * await el.scrollToRow({ top: 120 })
+     */
+    async scrollToRow(config) {
+        const tableBody = this.el.shadowRoot?.querySelector('.x-table-body');
+        if (tableBody && config.top !== undefined) {
+            tableBody.scrollTop = config.top;
+        }
+    }
+    // ==================== Private Methods ====================
+    getRowKey(record, index) {
+        if (typeof this.rowKey === 'function') {
+            return this.rowKey(record);
+        }
+        return record[this.rowKey] ?? index ?? 0;
+    }
+    getRowClassName(record, index) {
+        if (!this.rowClassName)
+            return '';
+        if (typeof this.rowClassName === 'function') {
+            return this.rowClassName(record, index);
+        }
+        return this.rowClassName;
+    }
+    getCellValue(record, dataIndex) {
+        if (!dataIndex)
+            return undefined;
+        if (Array.isArray(dataIndex)) {
+            return dataIndex.reduce((obj, key) => obj?.[key], record);
+        }
+        return record[dataIndex];
+    }
+    /**
+     * Processes the data source by applying filters and sorting.
+     *
+     * Flow:
+     * 1. Copies the `dataSource` to avoid mutating the original.
+     * 2. Iterates through `filterState` to apply active filters:
+     *    - Finds the corresponding column.
+     *    - Calls the column's `onFilter` function for each record.
+     * 3. Checks `sortState` for active sorting:
+     *    - Finds the corresponding column.
+     *    - Uses the column's `sorter` function or a default comparator.
+     *    - Sorts the data based on `ascend` or `descend` order.
+     *
+     * @returns any[] - The filtered and sorted data array.
+     */
+    getProcessedData() {
+        this.tableService.setState({
+            dataSource: this.internalDataSource,
+            columns: this.internalColumns,
+            filterState: this.filterState,
+            sortState: this.sortState
+        });
+        return this.tableService.getProcessedData();
+    }
+    /**
+     * Paginates the processed data based on current page and page size.
+     *
+     * Flow:
+     * 1. Gets the full filtered/sorted data from `getProcessedData`.
+     * 2. If pagination is disabled, returns all data.
+     * 3. Calculates start and end indices.
+     * 4. Slices the data array to return only the current page's records.
+     *
+     * @returns any[] - The paginated data array.
+     */
+    getPaginatedData() {
+        const processededData = this.getProcessedData();
+        if (this.pagination === false)
+            return processededData;
+        this.tableService.setState({
+            currentPage: this.currentPage,
+            pageSize: this.currentPageSize
+        });
+        return this.tableService.getPaginatedData(processededData);
+    }
+    handleSort(column) {
+        if (!column.sorter)
+            return;
+        this.tableService.sort(column, this.sortDirections);
+        this.sortState = this.tableService.state.sortState;
+        this.emitChange('sort');
+    }
+    handlePageChange(page, pageSize) {
+        this.tableService.goToPage(page);
+        this.tableService.setPageSize(pageSize);
+        this.currentPage = this.tableService.state.currentPage;
+        this.currentPageSize = this.tableService.state.pageSize;
+        this.emitChange('paginate');
+    }
+    handleRowClick(record, index, event) {
+        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) {
+            this.toggleRowExpand(record);
+        }
+        // Custom rowEvents handler
+        const rowHandler = this.rowEvents?.(record, index);
+        rowHandler?.onClick?.(event);
+    }
+    handleRowDoubleClick(record, index, event) {
+        this.xRowDoubleClick.emit({ record, index, event });
+        const rowHandler = this.rowEvents?.(record, index);
+        rowHandler?.onDoubleClick?.(event);
+    }
+    toggleRowSelection(record) {
+        const isSelected = this.selectedRowKeys.includes(this.getRowKey(record));
+        const newSelectedKeys = this.tableService.toggleSelection(record, this.rowSelection?.type);
+        this.selectedRowKeys = newSelectedKeys;
+        const selectedRows = this.internalDataSource.filter(r => newSelectedKeys.includes(this.getRowKey(r)));
+        this.xSelectionChange.emit({
+            selectedRowKeys: newSelectedKeys,
+            selectedRows,
+            info: { type: isSelected ? 'single' : 'single' },
+        });
+        this.rowSelection?.onChange?.(newSelectedKeys, selectedRows, { type: 'single' });
+    }
+    toggleRowExpand(record) {
+        const isExpanded = this.expandedRowKeys.includes(this.getRowKey(record));
+        const newExpandedKeys = this.tableService.toggleExpand(record);
+        this.expandedRowKeys = newExpandedKeys;
+        this.xExpand.emit({ expanded: !isExpanded, record });
+        this.xExpandedRowsChange.emit({ expandedKeys: newExpandedKeys });
+        this.expandable?.onExpand?.(!isExpanded, record);
+        this.expandable?.onExpandedRowsChange?.(newExpandedKeys);
+    }
+    handleSelectAll(checked) {
+        const newSelectedKeys = this.tableService.selectAll(checked, this.rowSelection?.getCheckboxProps);
+        this.selectedRowKeys = newSelectedKeys;
+        const selectedRows = this.internalDataSource.filter(r => newSelectedKeys.includes(this.getRowKey(r)));
+        const selectableRecords = this.internalDataSource.filter(record => !this.rowSelection?.getCheckboxProps?.(record)?.disabled);
+        this.xSelectionChange.emit({
+            selectedRowKeys: newSelectedKeys,
+            selectedRows,
+            info: { type: checked ? 'all' : 'none' },
+        });
+        this.rowSelection?.onChange?.(newSelectedKeys, selectedRows, { type: checked ? 'all' : 'none' });
+        this.rowSelection?.onSelectAll?.(checked, selectedRows, selectableRecords);
+    }
+    emitChange(action) {
+        console.log('emitChange', action);
+        this.xChange.emit({
+            pagination: {
+                current: this.currentPage,
+                pageSize: this.currentPageSize,
+                total: this.getProcessedData().length,
+            },
+            filters: this.filterState,
+            sorter: this.sortState,
+            extra: {
+                currentDataSource: this.getProcessedData(),
+                action,
+            },
+        });
+    }
+    // ==================== Render Methods ====================
+    renderSortIcon(column) {
+        if (!column.sorter)
+            return null;
+        const columnKey = column.key || column.dataIndex;
+        const isActive = this.sortState.columnKey === columnKey;
+        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" }))))));
+    }
+    renderSelectionColumn(rowSpan = 1) {
+        if (!this.rowSelection)
+            return null;
+        const allSelected = this.internalDataSource.length > 0 &&
+            this.internalDataSource.every(record => {
+                const checkboxProps = this.rowSelection?.getCheckboxProps?.(record);
+                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" })))));
+    }
+    renderExpandColumn(rowSpan = 1) {
+        if (!this.expandable?.expandedRowRender)
+            return null;
+        return (h("th", { class: "x-table-cell x-table-expand-column", rowSpan: rowSpan }, this.expandable.columnTitle || ''));
+    }
+    activeFilterColumn = null;
+    handleFilterDropdownOpenChange(columnKey, visible) {
+        if (visible) {
+            this.activeFilterColumn = columnKey;
+        }
+        else if (this.activeFilterColumn === columnKey) {
+            this.activeFilterColumn = null;
+        }
+        // Find column and trigger callback
+        const column = this.internalColumns.find(col => (col.key || col.dataIndex) === columnKey);
+        column?.onFilterDropdownOpenChange?.(visible);
+    }
+    handleFilterChange(columnKey, value, checked, multiple) {
+        const currentFilters = this.filterState[columnKey] || [];
+        let newFilters;
+        if (multiple) {
+            if (checked) {
+                newFilters = [...currentFilters, value];
+            }
+            else {
+                newFilters = currentFilters.filter(v => v !== value);
+            }
+        }
+        else {
+            newFilters = checked ? [value] : [];
+        }
+        this.filterState = {
+            ...this.filterState,
+            [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", 
+        // 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. 
+        // "OK" should just confirm/close.
+        // Realtime filtering is often better UX anyway.
+        // But wait, if I filter realtime, data changes immediately.
+        // "OK" button becomes just "Close".
+        this.emitChange('filter');
+    }
+    handleFilterReset(columnKey) {
+        this.filterState = {
+            ...this.filterState,
+            [columnKey]: null
+        };
+        this.emitChange('filter');
+        this.activeFilterColumn = null;
+    }
+    handleFilterConfirm() {
+        // Just close, as we filter in realtime
+        this.activeFilterColumn = null;
+    }
+    renderFilterDropdown(column) {
+        if (!column.filters || column.filters.length === 0)
+            return null;
+        const columnKey = (column.key || column.dataIndex);
+        const isMultiple = column.filterMultiple !== false;
+        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) => {
+                    // 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: () => {
+                    // 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?
+                    // I'll check x-checkbox later if this fails, but usually click handler on parent LI is enough if pointer-events allows
+                    // Let's rely on LI click for now, and make checkbox readonly-ish or just display
+                } }, filter.text)) : (h("x-radio", { checked: isSelected }, filter.text))));
+        })), h("div", { class: "x-table-filter-dropdown-btns" }, h("x-button", { size: "small", type: "text", onClick: () => this.handleFilterReset(columnKey) }, translate('Table.filterReset', {}, 'Reset')), h("x-button", { size: "small", type: "primary", onClick: () => this.handleFilterConfirm() }, translate('Table.filterConfirm', {}, 'OK')))));
+    }
+    renderFilterIcon(column) {
+        if (!column.filters)
+            return null;
+        const columnKey = (column.key || column.dataIndex);
+        const isOpen = this.activeFilterColumn === columnKey;
+        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
+            } }, 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 ====================
+    handleResizeStart(e, column) {
+        e.stopPropagation();
+        e.preventDefault();
+        const visibleColumns = this.internalColumns.filter(col => !col.hidden);
+        const colKey = column.key || column.dataIndex;
+        const index = visibleColumns.findIndex(c => (c.key || c.dataIndex) === colKey);
+        const nextColumn = visibleColumns[index + 1];
+        const th = e.target.closest('th');
+        // Prefer state width to avoid jumps if the actual element is slightly different due to content/layout
+        const startPrevWidth = (typeof column.width === 'number' ? column.width : th?.getBoundingClientRect().width) || 100;
+        let startNextWidth = null;
+        if (nextColumn) {
+            startNextWidth = (typeof nextColumn.width === 'number' ? nextColumn.width : th?.nextElementSibling?.getBoundingClientRect().width) || 100;
+        }
+        this.resizeState = {
+            prevKey: column.key || column.dataIndex,
+            nextKey: nextColumn ? (nextColumn.key || nextColumn.dataIndex) : null,
+            startX: e.pageX,
+            startPrevWidth: startPrevWidth,
+            startNextWidth: startNextWidth,
+            isResizing: false, // Don't trigger resize layout yet
+        };
+        window.addEventListener('mousemove', this.handleResizeMove);
+        window.addEventListener('mouseup', this.handleResizeEnd);
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    }
+    handleResizeMove = (e) => {
+        if (!this.resizeState)
+            return;
+        const { prevKey, nextKey, startX, startPrevWidth, startNextWidth, isResizing } = this.resizeState;
+        const delta = e.pageX - startX;
+        // Only trigger resize if moved at least 2px to avoid jitter on click
+        if (!isResizing && Math.abs(delta) < 2)
+            return;
+        if (!isResizing) {
+            this.resizeState = { ...this.resizeState, isResizing: true };
+        }
+        const visibleColumns = this.internalColumns.filter(col => !col.hidden);
+        const prevCol = visibleColumns.find(c => (c.key || c.dataIndex) === prevKey);
+        const nextCol = nextKey ? visibleColumns.find(c => (c.key || c.dataIndex) === nextKey) : null;
+        if (!prevCol)
+            return;
+        if (nextCol && startNextWidth !== null) {
+            // Splitter flow: stable total size between current and next column
+            const S = startPrevWidth + startNextWidth;
+            const minP = Math.max(prevCol.minWidth || 50, S - (nextCol.maxWidth || 2000));
+            const maxP = Math.min(prevCol.maxWidth || 2000, S - (nextCol.minWidth || 50));
+            let newPrevSize = startPrevWidth + delta;
+            newPrevSize = Math.max(minP, Math.min(maxP, newPrevSize));
+            const newNextSize = S - newPrevSize;
+            this.internalColumns = this.internalColumns.map(col => {
+                const key = col.key || col.dataIndex;
+                if (key === prevKey)
+                    return { ...col, width: newPrevSize };
+                if (key === nextKey)
+                    return { ...col, width: newNextSize };
+                return col;
+            });
+        }
+        else {
+            // Fallback for last column: standard resize
+            const newWidth = Math.max(startPrevWidth + delta, prevCol.minWidth || 50);
+            this.internalColumns = this.internalColumns.map(col => {
+                if ((col.key || col.dataIndex) === prevKey) {
+                    return { ...col, width: newWidth };
+                }
+                return col;
+            });
+        }
+    };
+    handleResizeEnd = () => {
+        this.resizeState = null;
+        window.removeEventListener('mousemove', this.handleResizeMove);
+        window.removeEventListener('mouseup', this.handleResizeEnd);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        this.emitChange('sort'); // Using 'sort' as proxy for layout change, or could add 'resize'
+    };
+    handleColumnDragStart(e, column) {
+        const key = column.key || column.dataIndex;
+        this.draggedColumnKey = key;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+        }
+    }
+    handleColumnDragOver(e, column) {
+        e.preventDefault(); // Allow drop
+        const key = column.key || column.dataIndex;
+        if (this.draggedColumnKey === key) {
+            this.dragOverColumnKey = null;
+            this.dragOverColumnSide = null;
+            return;
+        }
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        this.dragOverColumnSide = x < rect.width / 2 ? 'left' : 'right';
+        this.dragOverColumnKey = key;
+        e.dataTransfer.dropEffect = 'move';
+    }
+    handleColumnDragLeave = () => {
+        this.dragOverColumnKey = null;
+        this.dragOverColumnSide = null;
+    };
+    handleColumnDrop(e, targetColumn) {
+        e.preventDefault();
+        const targetKey = targetColumn.key || targetColumn.dataIndex;
+        const sourceKey = this.draggedColumnKey;
+        const side = this.dragOverColumnSide;
+        this.draggedColumnKey = null;
+        this.dragOverColumnKey = null;
+        this.dragOverColumnSide = null;
+        if (!sourceKey || sourceKey === targetKey)
+            return;
+        const fromIndex = this.internalColumns.findIndex(col => (col.key || col.dataIndex) === sourceKey);
+        let toIndex = this.internalColumns.findIndex(col => (col.key || col.dataIndex) === targetKey);
+        if (fromIndex > -1 && toIndex > -1) {
+            const newColumns = [...this.internalColumns];
+            const [movedColumn] = newColumns.splice(fromIndex, 1);
+            // Re-calculate toIndex after splice if needed
+            toIndex = newColumns.findIndex(col => (col.key || col.dataIndex) === targetKey);
+            if (side === 'right') {
+                toIndex += 1;
+            }
+            newColumns.splice(toIndex, 0, movedColumn);
+            this.internalColumns = newColumns;
+            this.xColumnSort.emit({ columns: newColumns });
+        }
+    }
+    handleRowDragStart(e, record) {
+        const key = this.getRowKey(record);
+        this.draggedRowKey = key;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', String(key));
+        }
+        const target = e.currentTarget;
+        // Create a temporary container for the drag image
+        // Browsers have trouble with <tr> as a drag image outside of a <table>
+        // We create a div that replicates the row's appearance
+        const ghost = document.createElement('div');
+        ghost.style.position = 'absolute';
+        ghost.style.top = '-1000px';
+        ghost.style.left = '-1000px';
+        ghost.style.width = `${target.offsetWidth}px`;
+        ghost.style.height = `${target.offsetHeight}px`;
+        ghost.style.background = 'var(--x-color-bg-container, #fff)';
+        ghost.style.boxShadow = '0 8px 16px rgba(0,0,0,0.15)';
+        ghost.style.borderRadius = '4px';
+        ghost.style.display = 'flex';
+        ghost.style.alignItems = 'center';
+        ghost.style.padding = '0 16px';
+        ghost.style.border = '1px solid var(--x-color-primary, #1677ff)';
+        ghost.style.zIndex = '9999';
+        ghost.style.pointerEvents = 'none';
+        // Simple text content for the ghost
+        const title = target.querySelector('.x-table-cell:not(.x-table-drag-column)')?.textContent || 'Dragging row...';
+        ghost.innerText = title;
+        document.body.appendChild(ghost);
+        if (e.dataTransfer) {
+            e.dataTransfer.setDragImage(ghost, 20, 20);
+        }
+        // Clean up
+        setTimeout(() => {
+            if (document.body.contains(ghost)) {
+                document.body.removeChild(ghost);
+            }
+        }, 0);
+    }
+    handleRowDragOver(e, record) {
+        e.preventDefault();
+        const key = this.getRowKey(record);
+        if (this.draggedRowKey === key) {
+            this.dragOverRowKey = null;
+            this.dragOverRowSide = null;
+            return;
+        }
+        const rect = e.currentTarget.getBoundingClientRect();
+        const y = e.clientY - rect.top;
+        this.dragOverRowSide = y < rect.height / 2 ? 'top' : 'bottom';
+        this.dragOverRowKey = key;
+        e.dataTransfer.dropEffect = 'move';
+    }
+    handleRowDragLeave = () => {
+        this.dragOverRowKey = null;
+        this.dragOverRowSide = null;
+    };
+    handleRowDrop(e, targetRecord) {
+        e.preventDefault();
+        const targetKey = this.getRowKey(targetRecord);
+        const sourceKey = this.draggedRowKey;
+        const side = this.dragOverRowSide;
+        this.draggedRowKey = null;
+        this.dragOverRowKey = null;
+        this.dragOverRowSide = null;
+        if (sourceKey === null || sourceKey === targetKey)
+            return;
+        const fromIndex = this.internalDataSource.findIndex(r => this.getRowKey(r) === sourceKey);
+        let toIndex = this.internalDataSource.findIndex(r => this.getRowKey(r) === targetKey);
+        if (fromIndex > -1 && toIndex > -1) {
+            const newData = [...this.internalDataSource];
+            const [movedRow] = newData.splice(fromIndex, 1);
+            // Re-calculate toIndex after splice
+            toIndex = newData.findIndex(r => this.getRowKey(r) === targetKey);
+            if (side === 'bottom') {
+                toIndex += 1;
+            }
+            newData.splice(toIndex, 0, movedRow);
+            this.internalDataSource = newData;
+            this.xDragSort.emit({ dataSource: newData });
+        }
+    }
+    getStickyOffsets() {
+        const leftOffsets = {};
+        const rightOffsets = {};
+        const visibleColumns = this.internalColumns.filter(col => !col.hidden);
+        let left = 0;
+        visibleColumns.forEach(col => {
+            const key = col.key || col.dataIndex;
+            if (col.fixed === 'left' || col.fixed === true) {
+                leftOffsets[key] = left;
+                const width = typeof col.width === 'number' ? col.width : 0; // Simple fallback
+                left += width;
+            }
+        });
+        let right = 0;
+        for (let i = visibleColumns.length - 1; i >= 0; i--) {
+            const col = visibleColumns[i];
+            const key = col.key || col.dataIndex;
+            if (col.fixed === 'right') {
+                rightOffsets[key] = right;
+                const width = typeof col.width === 'number' ? col.width : 0;
+                right += width;
+            }
+        }
+        return { leftOffsets, rightOffsets };
+    }
+    /**
+     * Renders a single header cell (th).
+     *
+     * Flow:
+     * 1. Checks if column is hidden.
+     * 2. Sets width and min/max width styles.
+     * 3. Handles sticky positioning (`fixed` prop):
+     *    - Calculates `left` or `right` offset using `stickyOffsets`.
+     *    - Applies `position: sticky` and z-index.
+     * 4. Determines classes for sorting, filtering, and alignment.
+     * 5. Attaches click handler for sorting.
+     * 6. Renders content: Title, Sort Icon, Filter Icon.
+     *
+     * @param column - The column configuration.
+     * @param stickyOffsets - Calculated offsets for sticky columns.
+     * @param isLast - Whether this is the last visible column.
+     * @returns JSX.Element - The th element.
+     */
+    renderHeaderCell(column, stickyOffsets, isLast, rowSpan = 1, colSpan = 1) {
+        if (column.hidden)
+            return null;
+        const style = {};
+        if (column.minWidth) {
+            style.minWidth = `${column.minWidth}px`;
+        }
+        if (column.maxWidth) {
+            style.maxWidth = `${column.maxWidth}px`;
+        }
+        // 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 isFixedRight = column.fixed === 'right' || (lastLeaf && lastLeaf.fixed === 'right');
+        if (isFixedLeft && firstKey && stickyOffsets.left[firstKey] !== undefined) {
+            style.position = 'sticky';
+            style.left = `${stickyOffsets.left[firstKey]}px`;
+            style.zIndex = '3';
+        }
+        if (isFixedRight && lastKey && stickyOffsets.right[lastKey] !== undefined) {
+            style.position = 'sticky';
+            style.right = `${stickyOffsets.right[lastKey]}px`;
+            style.zIndex = '3';
+        }
+        const key = column.key || column.dataIndex;
+        const isSortable = !!column.sorter;
+        const isFiltered = !!this.filterState[key]?.length;
+        // Only show resize handle if column.resize is explicitly true
+        const isResizable = column.resize === true && colSpan === 1;
+        const isDraggable = this.draggableColumns && colSpan === 1;
+        return (h("th", { class: {
+                'x-table-cell': true,
+                'x-table-cell-sortable': isSortable,
+                'x-table-cell-filtered': isFiltered,
+                'x-table-cell-fix-left': isFixedLeft,
+                'x-table-cell-fix-right': isFixedRight,
+                [`x-table-align-${column.align || 'left'}`]: true,
+                [column.className || '']: !!column.className,
+                'x-table-cell-resizable': isResizable,
+                'x-table-cell-draggable': isDraggable,
+                '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) => {
+                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() }))));
+    }
+    /**
+     * Renders the table header (thead).
+     *
+     * Flow:
+     * 1. Checks `showHeader` prop.
+     * 2. Generates header rows using ColumnUtil.
+     * 3. Renders selection, expand, and drag columns in the first row with proper rowSpan.
+     * 4. Renders each header cell.
+     *
+     * @param stickyOffsets - Calculated offsets for sticky columns.
+     * @returns JSX.Element - The thead element.
+     */
+    renderHeader(stickyOffsets) {
+        if (!this.showHeader)
+            return null;
+        const rows = ColumnUtil.getTableHeaderRows(this.columns);
+        const rowCount = rows.length;
+        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)))))));
+    }
+    /**
+     * Renders the drag handle column header.
+     */
+    renderDragColumn(rowSpan = 1) {
+        if (!this.draggableRows)
+            return null;
+        return h("th", { class: "x-table-cell x-table-drag-column", rowSpan: rowSpan });
+    }
+    /**
+     * Renders the selection checkbox/radio cell for a row.
+     *
+     * Flow:
+     * 1. Checks if row selection is enabled.
+     * 2. Determines checked state based on `selectedRowKeys`.
+     * 3. Determines disabled state via `getCheckboxProps`.
+     * 4. Renders checkbox or radio input.
+     *
+     * @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>
+    //   );
+    // }
+    /**
+     * Renders the expand icon cell for a row.
+     *
+     * Flow:
+     * 1. Checks if expandable is enabled.
+     * 2. Determines expanded state based on `expandedRowKeys`.
+     * 3. Checks if specific row is expandable via `rowExpandable`.
+     * 4. Renders toggle button with icon.
+     *
+     * @param record - The data record for the row.
+     * @returns JSX.Element - The td element.
+     */
+    renderExpandCell(record) {
+        if (!this.expandable?.expandedRowRender)
+            return null;
+        const key = this.getRowKey(record);
+        const isExpanded = this.expandedRowKeys.includes(key);
+        const isExpandable = this.expandable.rowExpandable?.(record) !== false;
+        if (!isExpandable && !this.expandable.showExpandColumn) {
+            return h("td", { class: "x-table-cell x-table-expand-column" });
+        }
+        return (h("td", { class: "x-table-cell x-table-expand-column" }, h("button", { class: {
+                'x-table-row-expand-icon': true,
+                'x-table-row-expand-icon-expanded': isExpanded,
+                'x-table-row-expand-icon-collapsed': !isExpanded,
+            }, 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" }))))));
+    }
+    /**
+     * Renders the drag handle cell for a row.
+     */
+    renderDragCell(_record) {
+        void _record; // Suppress unused warning
+        if (!this.draggableRows)
+            return null;
+        return (h("td", { class: "x-table-cell x-table-drag-column" }, h("div", { class: "x-table-drag-handle" }, h("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" }, h("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })))));
+    }
+    renderColGroup() {
+        const visibleColumns = this.internalColumns.filter(col => !col.hidden);
+        const hasDrag = this.draggableRows;
+        const hasSelection = !!this.rowSelection;
+        const hasExpand = !!this.expandable;
+        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 => {
+            const style = {};
+            if (col.width) {
+                style.width = typeof col.width === 'number' ? `${col.width}px` : col.width;
+            }
+            if (col.minWidth) {
+                style.minWidth = typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth;
+            }
+            if (col.maxWidth) {
+                style.maxWidth = typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth;
+            }
+            return h("col", { style: style });
+        })));
+    }
+    /**
+     * Renders a single body cell (td).
+     *
+     * Flow:
+     * 1. Checks if column is hidden.
+     * 2. Retrieves cell value using `getCellValue`.
+     * 3. Renders content using custom `render` function if provided, otherwise displays value.
+     * 4. Handles ellipsis and tooltip if configured.
+     * 5. Applies sticky positioning styles.
+     *
+     * @param column - The column configuration.
+     * @param record - The data record.
+     * @param index - The row index.
+     * @param stickyOffsets - Calculated sticky offsets.
+     * @returns JSX.Element - The td element.
+     */
+    renderBodyCell(column, record, index, stickyOffsets) {
+        if (column.hidden)
+            return null;
+        const value = this.getCellValue(record, column.dataIndex);
+        let cellContent;
+        if (column.slot) {
+            cellContent = h("slot", { name: `${column.slot}-${index}` });
+        }
+        else {
+            // We get the cell content by applying the column.render function if it exists.
+            cellContent = column.render ? column.render(value, record, index) : value;
+        }
+        const style = {};
+        // Sticky
+        const key = column.key || column.dataIndex;
+        const isFixedLeft = column.fixed === 'left' || column.fixed === true;
+        const isFixedRight = column.fixed === 'right';
+        if (isFixedLeft) {
+            style.position = 'sticky';
+            style.left = `${stickyOffsets.left[key]}px`;
+        }
+        if (isFixedRight) {
+            style.position = 'sticky';
+            style.right = `${stickyOffsets.right[key]}px`;
+        }
+        return (h("td", { class: {
+                'x-table-cell': true,
+                'x-table-cell-ellipsis': !!column.ellipsis,
+                'x-table-cell-fix-left': isFixedLeft,
+                'x-table-cell-fix-right': isFixedRight,
+                [`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)));
+    }
+    /**
+     * Renders the expanded content row if the row is expanded.
+     *
+     * Flow:
+     * 1. Checks if `expandedRowRender` is provided.
+     * 2. Checks if the row key is in `expandedRowKeys`.
+     * 3. Calculates colspan to span all visible columns.
+     * 4. Renders the content returned by `expandedRowRender`.
+     *
+     * @param record - The data record.
+     * @param index - The row index.
+     * @returns JSX.Element - The tr element.
+     */
+    renderExpandedRow(record, index) {
+        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 content = this.expandable.expandedRowRender(record, index, indent, true);
+        return (h("tr", { class: "x-table-expanded-row" }, h("td", { colSpan: colSpan, class: "x-table-expanded-row-cell" }, content)));
+    }
+    /**
+     * Renders a table row (tr) and optionally an expanded row.
+     *
+     * Flow:
+     * 1. Determines row key and state (selected, expanded, hovered).
+     * 2. Renders the main `tr` with:
+     *    - Selection cell (if enabled).
+     *    - Expand icon cell (if enabled).
+     *    - Body cells for each visible column.
+     * 3. Attaches handlers for click, double-click, mouse enter/leave.
+     * 4. Renders the expanded row if the row is currently expanded.
+     *
+     * @param record - The data record.
+     * @param index - The row index.
+     * @param stickyOffsets - Calculated sticky offsets.
+     * @returns JSX.Element[] - Array containing the row and potential expanded row.
+     */
+    renderRow(record, index, stickyOffsets) {
+        const key = this.getRowKey(record, index);
+        const isSelected = this.selectedRowKeys.includes(key);
+        const isExpanded = this.expandedRowKeys.includes(key);
+        const isHovered = this.hoveredRowKey === key;
+        const visibleColumns = this.internalColumns.filter(col => !col.hidden);
+        return [
+            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-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),
+        ];
+    }
+    hasCustomRows() {
+        return Array.from(this.el.children).some(child => child.tagName === 'X-TABLE-ROW');
+    }
+    /**
+     * Renders the table body (tbody).
+     *
+     * Flow:
+     * 1. Check if user provided custom rows via children.
+     * 2. Retrieves paginated data.
+     * 3. If no data, renders an empty state placeholder row.
+     * 4. Otherwise, iterates through data and calls `renderRow` for each record.
+     *
+     * @param stickyOffsets - Calculated sticky offsets.
+     * @returns JSX.Element - The tbody element.
+     */
+    renderBody(stickyOffsets) {
+        if (this.hasCustomRows()) {
+            return (h("tbody", { class: {
+                    'x-table-tbody': true,
+                    [this.classNames?.body || '']: !!this.classNames?.body,
+                }, style: this.styles?.body }, h("slot", null)));
+        }
+        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);
+            return (h("tbody", { class: {
+                    'x-table-tbody': true,
+                    [this.classNames?.body || '']: !!this.classNames?.body,
+                }, style: this.styles?.body }, h("tr", { class: "x-table-placeholder" }, h("td", { colSpan: colSpan, class: "x-table-cell" }, h("div", { class: "x-table-empty" }, h("x-empty", { description: this.emptyText }))))));
+        }
+        return (h("tbody", { class: {
+                'x-table-tbody': true,
+                [this.classNames?.body || '']: !!this.classNames?.body,
+            }, style: this.styles?.body }, data.map((record, index) => this.renderRow(record, index, stickyOffsets))));
+    }
+    renderPagination() {
+        if (this.pagination === false)
+            return null;
+        const total = this.getProcessedData().length;
+        const paginationConfig = this.pagination || {};
+        // Hide on single page
+        if (paginationConfig.hideOnSinglePage && total <= this.currentPageSize) {
+            return null;
+        }
+        const positions = paginationConfig.position || ['bottomRight'];
+        return positions.map(position => {
+            const isTop = position.startsWith('top');
+            const align = position.replace('top', '').replace('bottom', '').toLowerCase() || 'right';
+            return (h("div", { 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) => {
+                    const { current, pageSize } = e.detail;
+                    this.handlePageChange(current, pageSize);
+                } })));
+        });
+    }
+    renderTitle() {
+        if (!this.tableTitle)
+            return null;
+        return (h("div", { class: "x-table-title" }, this.tableTitle));
+    }
+    renderFooter() {
+        if (!this.tableFooter)
+            return null;
+        return (h("div", { class: {
+                'x-table-footer': true,
+                [this.classNames?.footer || '']: !!this.classNames?.footer,
+            }, style: this.styles?.footer }, this.tableFooter));
+    }
+    /**
+     * Render table with header, body and pagination.
+     * @returns JSX.Element
+     * @example
+     * <x-table columns={[{ title: 'Name', dataIndex: 'name' }]} dataSource={[{ key: '1', name: 'Alice' }]}></x-table>
+     */
+    render() {
+        const scrollStyle = {};
+        if (this.tableScroll?.x) {
+            scrollStyle.overflowX = 'auto';
+            if (typeof this.tableScroll.x === 'number') {
+                scrollStyle.minWidth = `${this.tableScroll.x}px`;
+            }
+        }
+        if (this.tableScroll?.y) {
+            scrollStyle.overflowY = 'auto';
+            scrollStyle.maxHeight = typeof this.tableScroll.y === 'number' ? `${this.tableScroll.y}px` : this.tableScroll.y;
+        }
+        const tableStyle = {
+            tableLayout: this.tableLayout,
+        };
+        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 };
+        // 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. 
+        // 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
+        });
+        return (h(Host, { key: 'b62a59af9b7c2828ed58cd32ad7f506225d768bb', class: {
+                'x-table': true,
+                'x-table-bordered': this.bordered,
+                'x-table-loading': this.loading,
+                [`x-table-${this.size}`]: true,
+                'x-table-sticky': !!this.sticky,
+                [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: {
+                ...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())));
+    }
+    static get is() { return "x-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableColumn[]",
+                    "resolved": "TableColumn<Record<string, unknown>>[]",
+                    "references": {
+                        "TableColumn": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableColumn",
+                            "referenceLocation": "TableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table columns={[{ title: 'Name', dataIndex: 'name' }]}></x-table>"
+                        }],
+                    "text": "Columns configuration."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "dataSource": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>[]",
+                    "resolved": "Record<string, unknown>[]",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table dataSource={[{ key: '1', name: 'Alice' }]}></x-table>"
+                        }],
+                    "text": "Data source array."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "rowKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ((record: Record<string, unknown>) => string)",
+                    "resolved": "((record: Record<string, unknown>) => string) | string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table rowKey=\"id\"></x-table>"
+                        }],
+                    "text": "Row key field or function."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-key",
+                "defaultValue": "'key'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "TableSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableSize",
+                            "referenceLocation": "TableSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'large'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-table size=\"small\"></x-table>"
+                        }],
+                    "text": "Table size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'large'"
+            },
+            "tableLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableLayout",
+                    "resolved": "\"auto\" | \"fixed\"",
+                    "references": {
+                        "TableLayout": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableLayout",
+                            "referenceLocation": "TableLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'auto'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-table tableLayout=\"fixed\"></x-table>"
+                        }],
+                    "text": "Table layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "table-layout",
+                "defaultValue": "'auto'"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-table bordered></x-table>"
+                        }],
+                    "text": "Whether to show all borders."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-table loading></x-table>"
+                        }],
+                    "text": "Loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "showHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-table showHeader={false}></x-table>"
+                        }],
+                    "text": "Show table header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-header",
+                "defaultValue": "true"
+            },
+            "tableTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table tableTitle=\"Users\"></x-table>"
+                        }],
+                    "text": "Table title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "table-title"
+            },
+            "tableFooter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table tableFooter=\"Total: 20\"></x-table>"
+                        }],
+                    "text": "Table footer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "table-footer"
+            },
+            "rowSelection": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableRowSelection",
+                    "resolved": "TableRowSelection<Record<string, unknown>>",
+                    "references": {
+                        "TableRowSelection": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableRowSelection",
+                            "referenceLocation": "TableRowSelection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table rowSelection={{ type: 'checkbox' }}></x-table>"
+                        }],
+                    "text": "Row selection configuration."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "expandable": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableExpandable",
+                    "resolved": "TableExpandable<Record<string, unknown>>",
+                    "references": {
+                        "TableExpandable": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableExpandable",
+                            "referenceLocation": "TableExpandable"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table expandable={{ expandedRowRender: (r) => r.description }}></x-table>"
+                        }],
+                    "text": "Expandable configuration."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "tableScroll": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableScroll",
+                    "resolved": "TableScroll",
+                    "references": {
+                        "TableScroll": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableScroll",
+                            "referenceLocation": "TableScroll"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table tableScroll={{ y: 300 }}></x-table>"
+                        }],
+                    "text": "Scroll configuration for table body."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "pagination": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "TablePagination | false",
+                    "resolved": "TablePagination | boolean",
+                    "references": {
+                        "TablePagination": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TablePagination",
+                            "referenceLocation": "TablePagination"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table pagination={{ pageSize: 20 }}></x-table>"
+                        }],
+                    "text": "Pagination configuration. Set to false to disable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pagination"
+            },
+            "showSorterTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-table showSorterTooltip={false}></x-table>"
+                        }],
+                    "text": "Whether to show sorter tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-sorter-tooltip",
+                "defaultValue": "true"
+            },
+            "sortDirections": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SortOrder[]",
+                    "resolved": "SortOrder[]",
+                    "references": {
+                        "SortOrder": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::SortOrder",
+                            "referenceLocation": "SortOrder"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "['ascend', 'descend']"
+                        }, {
+                            "name": "example",
+                            "text": "<x-table sortDirections={['descend','ascend']}></x-table>"
+                        }],
+                    "text": "Sort directions."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['ascend', 'descend']"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | { offsetHeader?: number; offsetScroll?: number }",
+                    "resolved": "boolean | { offsetHeader?: number; offsetScroll?: number; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table sticky></x-table>"
+                        }],
+                    "text": "Sticky header and scroll bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky"
+            },
+            "virtual": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-table virtual></x-table>"
+                        }],
+                    "text": "Virtual scroll mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "virtual",
+                "defaultValue": "false"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table emptyText=\"No records\"></x-table>"
+                        }],
+                    "text": "Empty text when no data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text",
+                "defaultValue": "translate('Empty.description', {}, 'No Data')"
+            },
+            "rowClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ((record: Record<string, unknown>, index: number) => string)",
+                    "resolved": "((record: Record<string, unknown>, index: number) => string) | string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table rowClassName={(r) => r.active ? 'active' : ''}></x-table>"
+                        }],
+                    "text": "Row class name or function."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-class-name"
+            },
+            "rowEvents": {
+                "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 }",
+                    "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": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event",
+                            "referenceLocation": "Event"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table rowEvents={(r) => ({ onClick: () => console.log(r) })}></x-table>"
+                        }],
+                    "text": "Row events handler."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "resizableColumns": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enable column resizing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable-columns",
+                "defaultValue": "false"
+            },
+            "draggableColumns": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enable column dragging (reordering)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "draggable-columns",
+                "defaultValue": "false"
+            },
+            "draggableRows": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enable row dragging (reordering)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "draggable-rows",
+                "defaultValue": "false"
+            },
+            "headerRowEvents": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(columns: TableColumn[], index: number) => { onClick?: (e: Event) => void }",
+                    "resolved": "(columns: TableColumn<Record<string, unknown>>[], index: number) => { onClick?: (e: Event) => void; }",
+                    "references": {
+                        "TableColumn": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableColumn",
+                            "referenceLocation": "TableColumn"
+                        },
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event",
+                            "referenceLocation": "Event"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table headerRowEvents={() => ({ onClick: () => {} })}></x-table>"
+                        }],
+                    "text": "Header row events handler."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableClassNames",
+                    "resolved": "TableClassNames",
+                    "references": {
+                        "TableClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableClassNames",
+                            "referenceLocation": "TableClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table classNames={{ root: 'my-table' }}></x-table>"
+                        }],
+                    "text": "Custom class names for parts."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableStyles",
+                    "resolved": "TableStyles",
+                    "references": {
+                        "TableStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableStyles",
+                            "referenceLocation": "TableStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table styles={{ root: { minWidth: '600px' } }}></x-table>"
+                        }],
+                    "text": "Custom styles for parts."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentPage": {},
+            "currentPageSize": {},
+            "sortState": {},
+            "filterState": {},
+            "selectedRowKeys": {},
+            "expandedRowKeys": {},
+            "hoveredRowKey": {},
+            "internalColumns": {},
+            "internalDataSource": {},
+            "resizeState": {},
+            "draggedColumnKey": {},
+            "dragOverColumnKey": {},
+            "dragOverColumnSide": {},
+            "draggedRowKey": {},
+            "dragOverRowKey": {},
+            "dragOverRowSide": {},
+            "activeFilterColumn": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table onXChange={(ev) => console.log(ev.detail)}></x-table>"
+                        }],
+                    "text": "Callback when pagination, filters or sorter is changed."
+                },
+                "complexType": {
+                    "original": "TableChangeEventDetail",
+                    "resolved": "TableChangeEventDetail",
+                    "references": {
+                        "TableChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableChangeEventDetail",
+                            "referenceLocation": "TableChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xRowClick",
+                "name": "xRowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table onXRowClick={(ev) => console.log(ev.detail)}></x-table>"
+                        }],
+                    "text": "Callback when row is clicked."
+                },
+                "complexType": {
+                    "original": "TableRowEventDetail",
+                    "resolved": "TableRowEventDetail<any>",
+                    "references": {
+                        "TableRowEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableRowEventDetail",
+                            "referenceLocation": "TableRowEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xRowDoubleClick",
+                "name": "xRowDoubleClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table onXRowDoubleClick={(ev) => console.log(ev.detail)}></x-table>"
+                        }],
+                    "text": "Callback when row is double clicked."
+                },
+                "complexType": {
+                    "original": "TableRowEventDetail",
+                    "resolved": "TableRowEventDetail<any>",
+                    "references": {
+                        "TableRowEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableRowEventDetail",
+                            "referenceLocation": "TableRowEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSelectionChange",
+                "name": "xSelectionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table onXSelectionChange={(ev) => console.log(ev.detail)}></x-table>"
+                        }],
+                    "text": "Callback when selection changes."
+                },
+                "complexType": {
+                    "original": "TableSelectionChangeEventDetail",
+                    "resolved": "TableSelectionChangeEventDetail<any>",
+                    "references": {
+                        "TableSelectionChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableSelectionChangeEventDetail",
+                            "referenceLocation": "TableSelectionChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xExpand",
+                "name": "xExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table onXExpand={(ev) => console.log(ev.detail)}></x-table>"
+                        }],
+                    "text": "Callback when row expand state changes."
+                },
+                "complexType": {
+                    "original": "TableExpandEventDetail",
+                    "resolved": "TableExpandEventDetail<any>",
+                    "references": {
+                        "TableExpandEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableExpandEventDetail",
+                            "referenceLocation": "TableExpandEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xExpandedRowsChange",
+                "name": "xExpandedRowsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-table onXExpandedRowsChange={(ev) => console.log(ev.detail)}></x-table>"
+                        }],
+                    "text": "Callback when expanded rows change."
+                },
+                "complexType": {
+                    "original": "{ expandedKeys: (string | number)[] }",
+                    "resolved": "{ expandedKeys: (string | number)[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "xColumnSort",
+                "name": "xColumnSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback when columns are reordered via drag and drop."
+                },
+                "complexType": {
+                    "original": "TableColumnSortEventDetail",
+                    "resolved": "TableColumnSortEventDetail",
+                    "references": {
+                        "TableColumnSortEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableColumnSortEventDetail",
+                            "referenceLocation": "TableColumnSortEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDragSort",
+                "name": "xDragSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback when rows are reordered via drag and drop."
+                },
+                "complexType": {
+                    "original": "TableRowSortEventDetail",
+                    "resolved": "TableRowSortEventDetail",
+                    "references": {
+                        "TableRowSortEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-table/types.ts::TableRowSortEventDetail",
+                            "referenceLocation": "TableRowSortEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDataDisplayChange",
+                "name": "xDataDisplayChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "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  }",
+                    "resolved": "{ data: Record<string, unknown>[]; total: number; startIndex: number; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getSelectedRowKeys": {
+                "complexType": {
+                    "signature": "() => Promise<(string | number)[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<(string | number)[]>"
+                },
+                "docs": {
+                    "text": "Get current selected row keys.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<(string | number)[]>"
+                        }, {
+                            "name": "example",
+                            "text": "const keys = await el.getSelectedRowKeys()"
+                        }]
+                }
+            },
+            "setSelectedRowKeys": {
+                "complexType": {
+                    "signature": "(keys: (string | number)[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "keys",
+                            "type": "(string | number)[]",
+                            "docs": "- Row keys."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set selected row keys.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "keys - Row keys."
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.setSelectedRowKeys(['1'])"
+                        }]
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear all selections.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.clearSelection()"
+                        }]
+                }
+            },
+            "getExpandedRowKeys": {
+                "complexType": {
+                    "signature": "() => Promise<(string | number)[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<(string | number)[]>"
+                },
+                "docs": {
+                    "text": "Get current expanded row keys.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<(string | number)[]>"
+                        }, {
+                            "name": "example",
+                            "text": "const keys = await el.getExpandedRowKeys()"
+                        }]
+                }
+            },
+            "scrollToRow": {
+                "complexType": {
+                    "signature": "(config: { index?: number; key?: string | number; top?: number; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "config",
+                            "type": "{ index?: number; key?: string | number; top?: number; }",
+                            "docs": "- Scroll config."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scroll to a specific row.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "config - Scroll config."
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.scrollToRow({ top: 120 })"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "rowKey",
+                "methodName": "handleRowKeyChange"
+            }, {
+                "propName": "columns",
+                "methodName": "handleColumnsChange"
+            }, {
+                "propName": "dataSource",
+                "methodName": "handleDataSourceChange"
+            }, {
+                "propName": "rowSelection",
+                "methodName": "handleRowSelectionChange"
+            }, {
+                "propName": "expandable",
+                "methodName": "handleExpandableChange"
+            }, {
+                "propName": "pagination",
+                "methodName": "handlePaginationChange"
+            }];
+    }
+}