@sekiui/elements 0.0.61 → 0.0.63

package/dist/collection/components/data-table/seki-data-table.js

@@ -0,0 +1,1269 @@
+import { h, Host } from "@stencil/core";
+import { calculateVirtualScroll } from "./utils/virtual-scroll";
+export class SekiDataTable {
+    constructor() {
+        // =========================================================================
+        // Props
+        // =========================================================================
+        /** Column definitions (JSON array) */
+        this.columns = '[]';
+        /** Field that uniquely identifies each row */
+        this.rowKey = 'id';
+        /** Enable row selection with checkboxes */
+        this.selectable = false;
+        /** Enable expandable row details */
+        this.expandable = false;
+        /** Allow multiple rows expanded at once */
+        this.multiExpand = false;
+        /** Show global search input */
+        this.searchable = false;
+        /** Search input placeholder */
+        this.searchPlaceholder = 'Search...';
+        /** Search debounce delay in ms */
+        this.searchDebounce = 300;
+        /** Fields to include in global search */
+        this.searchFields = '[]';
+        /** Show column visibility picker */
+        this.columnPicker = false;
+        /** Rows per page */
+        this.pageSize = 50;
+        /** Page size dropdown options */
+        this.pageSizeOptions = '[25, 50, 100]';
+        /** Enable virtualized rendering */
+        this.virtualScroll = false;
+        /** Fixed row height for virtualization */
+        this.rowHeight = 48;
+        /** Buffer rows above/below viewport */
+        this.bufferSize = 5;
+        /** Show loading state */
+        this.loading = false;
+        /** Message when no data */
+        this.emptyMessage = 'No data';
+        // =========================================================================
+        // State
+        // =========================================================================
+        this.state = {
+            page: 0,
+            pageSize: 50,
+            sort: undefined,
+            filters: {},
+            search: '',
+            selectedKeys: new Set(),
+            expandedKeys: new Set(),
+            columns: [],
+            rows: [],
+            totalRows: 0,
+            loading: false,
+        };
+        this.searchInputValue = '';
+        /** Virtual scroll state */
+        this.virtualScrollState = {
+            startIndex: 0,
+            endIndex: 0,
+            offsetTop: 0,
+            totalHeight: 0,
+            visibleCount: 0,
+        };
+        /** Viewport height for virtual scroll */
+        this.viewportHeight = 400;
+        this.handleScroll = (event) => {
+            if (!this.virtualScroll)
+                return;
+            const target = event.target;
+            this.updateVirtualScrollState(target.scrollTop);
+        };
+        // =========================================================================
+        // Event Handlers
+        // =========================================================================
+        this.handleSort = (field) => {
+            var _a;
+            const column = this.state.columns.find(c => c.field === field);
+            if (!(column === null || column === void 0 ? void 0 : column.sortable))
+                return;
+            let direction = 'asc';
+            if (((_a = this.state.sort) === null || _a === void 0 ? void 0 : _a.field) === field) {
+                direction = this.state.sort.direction === 'asc' ? 'desc' : 'asc';
+            }
+            const newSort = { field, direction };
+            this.updateState({ sort: newSort, page: 0 });
+            this.sortChange.emit({ field, direction });
+            this.loadData();
+        };
+        this.handlePageChange = (page) => {
+            this.updateState({ page });
+            this.pageChange.emit({ page, pageSize: this.state.pageSize });
+            this.loadData();
+        };
+        this.handlePageSizeChange = (pageSize) => {
+            this.updateState({ pageSize, page: 0 });
+            this.pageChange.emit({ page: 0, pageSize });
+            this.loadData();
+        };
+        this.handleSearchInput = (event) => {
+            const value = event.target.value;
+            this.searchInputValue = value;
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+            this.searchTimeout = setTimeout(() => {
+                this.updateState({ search: value, page: 0 });
+                this.loadData();
+            }, this.searchDebounce);
+        };
+        this.handleClearSearch = () => {
+            this.searchInputValue = '';
+            this.updateState({ search: '', page: 0 });
+            this.loadData();
+        };
+        this.handleRowSelect = (rowKey, selected) => {
+            const newSelected = new Set(this.state.selectedKeys);
+            if (selected) {
+                newSelected.add(rowKey);
+            }
+            else {
+                newSelected.delete(rowKey);
+            }
+            this.updateSelection(newSelected);
+        };
+        this.handleSelectAll = (selected) => {
+            if (selected) {
+                this.selectAll();
+            }
+            else {
+                // Deselect only current page rows
+                const newSelected = new Set(this.state.selectedKeys);
+                this.state.rows.forEach(row => {
+                    newSelected.delete(String(row[this.rowKey]));
+                });
+                this.updateSelection(newSelected);
+            }
+        };
+        this.handleRowExpand = (rowKey) => {
+            const row = this.state.rows.find(r => String(r[this.rowKey]) === rowKey);
+            if (!row)
+                return;
+            const newExpanded = new Set(this.state.expandedKeys);
+            const isExpanded = newExpanded.has(rowKey);
+            if (isExpanded) {
+                newExpanded.delete(rowKey);
+            }
+            else {
+                if (!this.multiExpand) {
+                    newExpanded.clear();
+                }
+                newExpanded.add(rowKey);
+            }
+            this.updateState({ expandedKeys: newExpanded });
+            this.rowExpand.emit({ rowId: rowKey, expanded: !isExpanded, row });
+        };
+        this.handleRowClick = (row) => {
+            this.rowClick.emit({ rowId: String(row[this.rowKey]), row });
+        };
+        this.handleColumnResize = (field, width) => {
+            const columns = this.state.columns.map(col => col.field === field ? Object.assign(Object.assign({}, col), { currentWidth: width }) : col);
+            this.updateState({ columns });
+            this.columnResize.emit({ field, width });
+        };
+        // =========================================================================
+        // Resize Logic
+        // =========================================================================
+        this.resizeState = null;
+        this.startResize = (event, column) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.resizeState = {
+                column,
+                startX: event.clientX,
+                startWidth: column.currentWidth,
+            };
+            document.addEventListener('mousemove', this.onResize);
+            document.addEventListener('mouseup', this.stopResize);
+        };
+        this.onResize = (event) => {
+            if (!this.resizeState)
+                return;
+            const diff = event.clientX - this.resizeState.startX;
+            const newWidth = Math.max(this.resizeState.column.minWidth || 50, this.resizeState.startWidth + diff);
+            this.handleColumnResize(this.resizeState.column.field, newWidth);
+        };
+        this.stopResize = () => {
+            this.resizeState = null;
+            document.removeEventListener('mousemove', this.onResize);
+            document.removeEventListener('mouseup', this.stopResize);
+        };
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    componentWillLoad() {
+        this.initializeColumns();
+        this.state = Object.assign(Object.assign({}, this.state), { pageSize: this.pageSize });
+    }
+    componentDidLoad() {
+        this.loadData();
+        this.setupVirtualScroll();
+    }
+    disconnectedCallback() {
+        this.cleanupVirtualScroll();
+    }
+    // =========================================================================
+    // Watchers
+    // =========================================================================
+    columnsChanged() {
+        this.initializeColumns();
+    }
+    pageSizeChanged(newValue) {
+        this.updateState({ pageSize: newValue, page: 0 });
+        this.loadData();
+    }
+    // =========================================================================
+    // Public Methods
+    // =========================================================================
+    /** Get currently selected row objects */
+    async getSelectedRows() {
+        return this.state.rows.filter(row => this.state.selectedKeys.has(String(row[this.rowKey])));
+    }
+    /** Get currently selected row keys */
+    async getSelectedKeys() {
+        return Array.from(this.state.selectedKeys);
+    }
+    /** Select rows by keys */
+    async selectRows(keys) {
+        const newSelected = new Set(this.state.selectedKeys);
+        keys.forEach(key => newSelected.add(key));
+        this.updateSelection(newSelected);
+    }
+    /** Select all rows on current page */
+    async selectAll() {
+        const newSelected = new Set(this.state.selectedKeys);
+        this.state.rows.forEach(row => {
+            newSelected.add(String(row[this.rowKey]));
+        });
+        this.updateSelection(newSelected);
+    }
+    /** Clear all selections */
+    async clearSelection() {
+        this.updateSelection(new Set());
+    }
+    /** Set a filter value */
+    async setFilter(field, value) {
+        const newFilters = Object.assign(Object.assign({}, this.state.filters), { [field]: value });
+        this.updateState({ filters: newFilters, page: 0 });
+        this.filterChange.emit({ filters: newFilters });
+        this.loadData();
+    }
+    /** Clear a specific filter */
+    async clearFilter(field) {
+        const newFilters = Object.assign({}, this.state.filters);
+        delete newFilters[field];
+        this.updateState({ filters: newFilters, page: 0 });
+        this.filterChange.emit({ filters: newFilters });
+        this.loadData();
+    }
+    /** Clear all filters */
+    async clearAllFilters() {
+        this.updateState({ filters: {}, page: 0 });
+        this.filterChange.emit({ filters: {} });
+        this.loadData();
+    }
+    /** Get current filter state */
+    async getFilters() {
+        return Object.assign({}, this.state.filters);
+    }
+    /** Refresh data */
+    async refresh() {
+        await this.loadData();
+    }
+    // =========================================================================
+    // Private Methods
+    // =========================================================================
+    parseColumns() {
+        if (typeof this.columns === 'string') {
+            try {
+                return JSON.parse(this.columns);
+            }
+            catch (_a) {
+                console.warn('[seki-data-table] Invalid columns JSON');
+                return [];
+            }
+        }
+        return this.columns;
+    }
+    parsePageSizeOptions() {
+        if (typeof this.pageSizeOptions === 'string') {
+            try {
+                return JSON.parse(this.pageSizeOptions);
+            }
+            catch (_a) {
+                return [25, 50, 100];
+            }
+        }
+        return this.pageSizeOptions;
+    }
+    initializeColumns() {
+        const defs = this.parseColumns();
+        const columns = defs.map((def, index) => (Object.assign(Object.assign({}, def), { currentWidth: def.width || 150, visible: !def.hidden, orderIndex: index })));
+        this.updateState({ columns });
+    }
+    updateState(partial) {
+        this.state = Object.assign(Object.assign({}, this.state), partial);
+    }
+    updateSelection(newSelected) {
+        this.updateState({ selectedKeys: newSelected });
+        const selectedRows = this.state.rows.filter(row => newSelected.has(String(row[this.rowKey])));
+        this.selectionChange.emit({
+            selected: Array.from(newSelected),
+            rows: selectedRows,
+        });
+    }
+    // =========================================================================
+    // Virtual Scroll Methods
+    // =========================================================================
+    setupVirtualScroll() {
+        if (!this.virtualScroll)
+            return;
+        // Set up resize observer to track viewport height
+        if (typeof ResizeObserver !== 'undefined' && this.scrollContainerRef) {
+            this.resizeObserver = new ResizeObserver(entries => {
+                var _a;
+                for (const entry of entries) {
+                    this.viewportHeight = entry.contentRect.height;
+                    this.updateVirtualScrollState(((_a = this.scrollContainerRef) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
+                }
+            });
+            this.resizeObserver.observe(this.scrollContainerRef);
+        }
+        // Initial calculation
+        this.updateVirtualScrollState(0);
+    }
+    cleanupVirtualScroll() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    updateVirtualScrollState(scrollTop) {
+        const result = calculateVirtualScroll({
+            totalRows: this.state.rows.length,
+            rowHeight: this.rowHeight,
+            viewportHeight: this.viewportHeight,
+            scrollTop,
+            bufferSize: this.bufferSize,
+        });
+        this.virtualScrollState = result;
+    }
+    getVirtualizedRows() {
+        if (!this.virtualScroll) {
+            return this.state.rows;
+        }
+        return this.state.rows.slice(this.virtualScrollState.startIndex, this.virtualScrollState.endIndex);
+    }
+    async loadData() {
+        var _a;
+        if (!this.fetchData) {
+            return;
+        }
+        this.updateState({ loading: true });
+        const request = {
+            page: this.state.page,
+            pageSize: this.state.pageSize,
+            sort: this.state.sort,
+            filters: this.state.filters,
+            search: this.state.search || undefined,
+        };
+        try {
+            const response = await this.fetchData(request);
+            this.updateState({
+                rows: response.rows,
+                totalRows: response.totalRows,
+                loading: false,
+            });
+            // Recalculate virtual scroll after data loads
+            if (this.virtualScroll) {
+                this.updateVirtualScrollState(((_a = this.scrollContainerRef) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
+            }
+        }
+        catch (error) {
+            console.error('[seki-data-table] Error fetching data:', error);
+            this.updateState({ loading: false });
+        }
+    }
+    // =========================================================================
+    // Render Helpers
+    // =========================================================================
+    getVisibleColumns() {
+        return this.state.columns
+            .filter(col => col.visible)
+            .sort((a, b) => a.orderIndex - b.orderIndex);
+    }
+    getTotalPages() {
+        return Math.ceil(this.state.totalRows / this.state.pageSize);
+    }
+    isAllSelected() {
+        if (this.state.rows.length === 0)
+            return false;
+        return this.state.rows.every(row => this.state.selectedKeys.has(String(row[this.rowKey])));
+    }
+    isSomeSelected() {
+        if (this.state.rows.length === 0)
+            return false;
+        const selectedCount = this.state.rows.filter(row => this.state.selectedKeys.has(String(row[this.rowKey]))).length;
+        return selectedCount > 0 && selectedCount < this.state.rows.length;
+    }
+    // =========================================================================
+    // Render
+    // =========================================================================
+    render() {
+        const visibleColumns = this.getVisibleColumns();
+        const totalPages = this.getTotalPages();
+        const isLoading = this.state.loading || this.loading;
+        return (h(Host, { key: '8d8c3676a27c87118ad687bd5644ee0f42afcaac' }, h("div", { key: '0f0a9a4bdcc3d3dc56348cc6f2553ad468454d32', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '52af1c63213d548e1e594270f40ccf7e7b65d18f', class: "data-table__toolbar" }, this.searchable && (h("div", { key: 'c5df243d54ed6212e007d7af6645bcf337a18a10', class: "data-table__search" }, h("input", { key: '18c9f465ec3f12617b51ca3b5c0957eb2052387e', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: '064a2c76f3f3eb96b836a931f74167eef15e1554', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: '75db20e5dfb624147160579798fb628e68006efc', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '65b7f243a91b4bfcaa05ed60c4523a7ac364bcbe', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: '0f23331b51061de5cce4124b1229325c375df5d1', class: {
+                'data-table__container': true,
+                'data-table__container--virtual': this.virtualScroll,
+            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: 'd47c2575e5405bfc4047e8ff05d8ad93a8e6f12a', class: "data-table__table", role: "grid" }, h("thead", { key: '11e4010bbcbd2ab633872be521cc41c4b05ca071', class: "data-table__head" }, h("tr", { key: '72ac5ac6cae038c128d2be578f5fda2c55321754', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: 'c5c976b113a02da36502dc5f1ca0a1801a72cc4e', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: '04eea839464e5b39f37943e119fd25907ccf925d', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: 'b6464be4d6c1ac9b4b6de1d0f908d3d2c0ef3774', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: 'ddbf77ba679e2ff4410f9e3d9395d5b84362d8a5', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
+            var _a, _b, _c;
+            return (h("th", { key: column.field, class: {
+                    'data-table__th': true,
+                    'data-table__th--sortable': !!column.sortable,
+                    'data-table__th--sorted': ((_a = this.state.sort) === null || _a === void 0 ? void 0 : _a.field) === column.field,
+                    [`data-table__th--align-${column.align || 'left'}`]: true,
+                }, style: { width: `${column.currentWidth}px` }, role: "columnheader", "aria-sort": ((_b = this.state.sort) === null || _b === void 0 ? void 0 : _b.field) === column.field
+                    ? this.state.sort.direction === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                    : undefined, onClick: () => column.sortable && this.handleSort(column.field) }, h("div", { class: "data-table__th-content" }, h("span", { class: "data-table__th-label" }, column.header), column.sortable && (h("span", { class: "data-table__sort-icon" }, ((_c = this.state.sort) === null || _c === void 0 ? void 0 : _c.field) === column.field
+                ? this.state.sort.direction === 'asc'
+                    ? '↑'
+                    : '↓'
+                : '↕'))), column.resizable && (h("div", { class: "data-table__resize-handle", onMouseDown: (e) => this.startResize(e, column) }))));
+        }))), h("tbody", { key: '0d31011ba827edd2398ede4361127ce35452a4a4', class: "data-table__body", style: this.virtualScroll
+                ? {
+                    height: `${this.virtualScrollState.totalHeight}px`,
+                    position: 'relative',
+                }
+                : undefined }, isLoading && this.state.rows.length === 0 ? (h("tr", { class: "data-table__row data-table__row--loading" }, h("td", { class: "data-table__td data-table__td--loading", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__loading" }, "Loading...")))) : this.state.rows.length === 0 ? (h("tr", { class: "data-table__row data-table__row--empty" }, h("td", { class: "data-table__td data-table__td--empty", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__empty" }, this.emptyMessage)))) : (this.getVirtualizedRows().map((row, virtualIndex) => {
+            const rowKey = String(row[this.rowKey]);
+            const isSelected = this.state.selectedKeys.has(rowKey);
+            const isExpanded = this.state.expandedKeys.has(rowKey);
+            // Calculate row position for virtualization
+            const rowTop = this.virtualScroll
+                ? (this.virtualScrollState.startIndex + virtualIndex) * this.rowHeight
+                : undefined;
+            return [
+                h("tr", { key: rowKey, class: {
+                        'data-table__row': true,
+                        'data-table__row--selected': isSelected,
+                        'data-table__row--expanded': isExpanded,
+                        'data-table__row--virtual': this.virtualScroll,
+                    }, style: this.virtualScroll
+                        ? {
+                            position: 'absolute',
+                            top: `${rowTop}px`,
+                            left: '0',
+                            right: '0',
+                            height: `${this.rowHeight}px`,
+                        }
+                        : undefined, role: "row", "aria-selected": this.selectable ? isSelected : undefined, onClick: () => this.handleRowClick(row) }, this.selectable && (h("td", { class: "data-table__td data-table__td--checkbox", role: "gridcell" }, h("input", { type: "checkbox", class: "data-table__checkbox", checked: isSelected, onChange: (e) => {
+                        e.stopPropagation();
+                        this.handleRowSelect(rowKey, e.target.checked);
+                    }, onClick: (e) => e.stopPropagation(), "aria-label": `Select row ${rowKey}` }))), this.expandable && (h("td", { class: "data-table__td data-table__td--expand", role: "gridcell" }, h("button", { type: "button", class: "data-table__expand-btn", "aria-expanded": isExpanded, "aria-label": isExpanded ? 'Collapse row' : 'Expand row', onClick: (e) => {
+                        e.stopPropagation();
+                        this.handleRowExpand(rowKey);
+                    } }, isExpanded ? '▼' : '▶'))), visibleColumns.map(column => {
+                    var _a;
+                    return (h("td", { key: column.field, class: {
+                            'data-table__td': true,
+                            [`data-table__td--align-${column.align || 'left'}`]: true,
+                        }, role: "gridcell" }, String((_a = row[column.field]) !== null && _a !== void 0 ? _a : '')));
+                })),
+                /* Expanded content row */
+                isExpanded && this.renderExpandedRow && (h("tr", { key: `${rowKey}-expanded`, class: "data-table__row data-table__row--expanded-content" }, h("td", { class: "data-table__td data-table__td--expanded-content", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__expanded-content", innerHTML: this.renderExpandedRow(row) })))),
+            ];
+        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: 'e824d0c1a888d0c3889a76abb129b9b822cf6026', class: "data-table__loading-overlay" }, h("div", { key: '7691b39e52309e5ad281b191b2d4973176c5d9d5', class: "data-table__loading" }, "Loading...")))), h("div", { key: '87fb1f7a30c273d0322242e7be9492c396fe43d2', class: "data-table__pagination" }, h("div", { key: '8262a805d233b755382de0252695df587544110f', class: "data-table__pagination-info" }, this.state.totalRows > 0
+            ? `${this.state.page * this.state.pageSize + 1}-${Math.min((this.state.page + 1) * this.state.pageSize, this.state.totalRows)} of ${this.state.totalRows}`
+            : '0 results'), h("div", { key: 'c109f3a4abd66a4f2d45dd52e5322f25872435d1', class: "data-table__pagination-controls" }, h("select", { key: 'a765b2ca5d6e5bb79c9a93f835b5625962e6cc18', class: "data-table__page-size", onChange: (e) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.handlePageSizeChange(Number(e.target.value));
+            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '6a3d3df30893e06f9d886a25bbc6a71d056d3554', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: '1aa1de87b4db0d1b4f99cf9314824553dedf76a1', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: 'fc66ae340020821b9919ea29f6839200cefb16db', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '87956eb8e5ed092c03fc408ebdfa6739b0325fe5', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: 'c59e52064f1b5ee0394c5cfaa070e9c7739a7488', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
+    }
+    static get is() { return "seki-data-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-data-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-data-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ColumnDef[]",
+                    "resolved": "ColumnDef[] | string",
+                    "references": {
+                        "ColumnDef": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::ColumnDef"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column definitions (JSON array)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "'[]'"
+            },
+            "rowKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field that uniquely identifies each row"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-key",
+                "defaultValue": "'id'"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable row selection with checkboxes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable expandable row details"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expandable",
+                "defaultValue": "false"
+            },
+            "multiExpand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple rows expanded at once"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-expand",
+                "defaultValue": "false"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show global search input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchable",
+                "defaultValue": "false"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search input placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Search...'"
+            },
+            "searchDebounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search debounce delay in ms"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-debounce",
+                "defaultValue": "300"
+            },
+            "searchFields": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fields to include in global search"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-fields",
+                "defaultValue": "'[]'"
+            },
+            "columnPicker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show column visibility picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "column-picker",
+                "defaultValue": "false"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rows per page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "50"
+            },
+            "pageSizeOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number[]",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Page size dropdown options"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size-options",
+                "defaultValue": "'[25, 50, 100]'"
+            },
+            "virtualScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable virtualized rendering"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "virtual-scroll",
+                "defaultValue": "false"
+            },
+            "rowHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixed row height for virtualization"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-height",
+                "defaultValue": "48"
+            },
+            "bufferSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Buffer rows above/below viewport"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "buffer-size",
+                "defaultValue": "5"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message when no data"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "'No data'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "state": {},
+            "searchInputValue": {},
+            "virtualScrollState": {},
+            "viewportHeight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectionChange",
+                "name": "seki-selection-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when row selection changes"
+                },
+                "complexType": {
+                    "original": "SelectionChangeDetail",
+                    "resolved": "SelectionChangeDetail",
+                    "references": {
+                        "SelectionChangeDetail": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::SelectionChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowExpand",
+                "name": "seki-row-expand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a row is expanded/collapsed"
+                },
+                "complexType": {
+                    "original": "RowExpandDetail",
+                    "resolved": "RowExpandDetail",
+                    "references": {
+                        "RowExpandDetail": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::RowExpandDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowClick",
+                "name": "seki-row-click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a row is clicked"
+                },
+                "complexType": {
+                    "original": "RowClickDetail",
+                    "resolved": "RowClickDetail",
+                    "references": {
+                        "RowClickDetail": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::RowClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "columnResize",
+                "name": "seki-column-resize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a column is resized"
+                },
+                "complexType": {
+                    "original": "ColumnResizeDetail",
+                    "resolved": "ColumnResizeDetail",
+                    "references": {
+                        "ColumnResizeDetail": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::ColumnResizeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "columnReorder",
+                "name": "seki-column-reorder",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when columns are reordered"
+                },
+                "complexType": {
+                    "original": "ColumnReorderDetail",
+                    "resolved": "ColumnReorderDetail",
+                    "references": {
+                        "ColumnReorderDetail": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::ColumnReorderDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "columnsChange",
+                "name": "seki-columns-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when column visibility/order changes"
+                },
+                "complexType": {
+                    "original": "ColumnsChangeDetail",
+                    "resolved": "ColumnsChangeDetail",
+                    "references": {
+                        "ColumnsChangeDetail": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::ColumnsChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "sortChange",
+                "name": "seki-sort-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when sort changes"
+                },
+                "complexType": {
+                    "original": "SortChangeDetail",
+                    "resolved": "SortChangeDetail",
+                    "references": {
+                        "SortChangeDetail": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::SortChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "filterChange",
+                "name": "seki-filter-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when filters change"
+                },
+                "complexType": {
+                    "original": "FilterChangeDetail",
+                    "resolved": "FilterChangeDetail",
+                    "references": {
+                        "FilterChangeDetail": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::FilterChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pageChange",
+                "name": "seki-page-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when page/page size changes"
+                },
+                "complexType": {
+                    "original": "PageChangeDetail",
+                    "resolved": "PageChangeDetail",
+                    "references": {
+                        "PageChangeDetail": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::PageChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getSelectedRows": {
+                "complexType": {
+                    "signature": "() => Promise<Record<string, unknown>[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<Record<string, unknown>[]>"
+                },
+                "docs": {
+                    "text": "Get currently selected row objects",
+                    "tags": []
+                }
+            },
+            "getSelectedKeys": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Get currently selected row keys",
+                    "tags": []
+                }
+            },
+            "selectRows": {
+                "complexType": {
+                    "signature": "(keys: string[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "keys",
+                            "type": "string[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select rows by keys",
+                    "tags": []
+                }
+            },
+            "selectAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select all rows on current page",
+                    "tags": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear all selections",
+                    "tags": []
+                }
+            },
+            "setFilter": {
+                "complexType": {
+                    "signature": "(field: string, value: FilterValue) => Promise<void>",
+                    "parameters": [{
+                            "name": "field",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "value",
+                            "type": "string | string[] | { min?: number | undefined; max?: number | undefined; } | { start?: string | undefined; end?: string | undefined; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FilterValue": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::FilterValue"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set a filter value",
+                    "tags": []
+                }
+            },
+            "clearFilter": {
+                "complexType": {
+                    "signature": "(field: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "field",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear a specific filter",
+                    "tags": []
+                }
+            },
+            "clearAllFilters": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear all filters",
+                    "tags": []
+                }
+            },
+            "getFilters": {
+                "complexType": {
+                    "signature": "() => Promise<Record<string, FilterValue>>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "FilterValue": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::FilterValue"
+                        }
+                    },
+                    "return": "Promise<Record<string, FilterValue>>"
+                },
+                "docs": {
+                    "text": "Get current filter state",
+                    "tags": []
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Refresh data",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "columnsChanged"
+            }, {
+                "propName": "pageSize",
+                "methodName": "pageSizeChanged"
+            }];
+    }
+}