@sellmate/design-system 1.0.62 → 1.0.63

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

@@ -1,7 +1,12 @@
-import { h, readTask, Fragment, } from "@stencil/core";
+import { h, Host, readTask, } from "@stencil/core";
+import { nanoid } from "nanoid";
+import { TABLE_ID_ATTR, } from "./constants";
 export class SdTable {
+    static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
-    columns;
+    tableId = nanoid(8);
+    fallbackTableId = nanoid(8);
+    columns = [];
     rows;
     selected = [];
     rowKey = 'id';
@@ -11,603 +16,391 @@ export class SdTable {
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
-    noDataLabel = '데이터가 없습니다.';
+    noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
+    resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     isLoading = false;
     pagination;
     useInternalPagination = false;
     useRowsPerPageSelect = false;
+    // ─── Virtual Scroll ───────────────────────────────────────────────
+    useVirtualScroll = false;
+    rowHeight = 40;
+    virtualBuffer = 5;
+    virtualEndThreshold = 10;
+    // ─────────────────────────────────────────────────────────────────
     rowsPerPageOption = [
         { label: '10개씩 보기', value: 10 },
         { label: '25개씩 보기', value: 25 },
         { label: '50개씩 보기', value: 50 },
         { label: '100개씩 보기', value: 100 },
     ];
-    useVirtualScroll = {}; // 가상 스크롤 사용 여부
-    virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
-    // 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
-    // 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
-    virtualColumnWidth = 120;
-    virtualBufferSize = {
-        vertical: 5,
-        horizontal: 5,
-    }; // 가상 스크롤 위아래 버퍼 크기
     sdSelectChange;
     sdPageChange;
     sdRowsPerPageChange;
-    currentPage = this.pagination?.page || 1;
-    innerRows = [];
+    sdVirtualUpdate;
+    sdVirtualReachEnd;
+    currentPage = 1;
+    innerRowsPerPage = 10;
     innerSelected = new Set();
     columnWidths = [];
     scrolledLeft = false;
     scrolledRight = false;
-    // 세로 가상 스크롤 상태값
-    virtualStartIndex = 0;
-    virtualEndIndex = 0;
-    scrollTopPosition = 0;
-    // 가로 가상 스크롤 상태값
-    virtualStartColIdx = 0;
-    virtualEndColIdx = 0;
-    scrollLeftPosition = 0;
-    // 가상 스크롤 Raf(Request Animation Frame) 관리
-    scrollRequestAnimationFrame = null;
+    rowCount = 0;
+    loadingScrollTop = 0;
+    vsStart = 0;
+    vsEnd = 0;
+    lastReachEndNotifiedRowCount = -1;
     scrollContainer = null;
-    resizeObserver = null;
-    rafScheduled = false;
-    pendingUpdates = {
-        vertical: false,
-        horizontal: false,
-    };
-    // 상태 캐시값
-    cachedVirtualRows = null;
-    cachedVirtualIndexKey = '';
-    cachedColumnOrder = null;
-    lastColumnOrderKey = '';
-    // DOM 측정 캐시값
-    cachedContainerHeight = 0;
-    cachedContainerWidth = 0;
-    // 스타일 캐시
-    stickyStyleCache = new Map();
-    // isAllChecked 캐시
-    cachedIsAllChecked;
-    lastSelectionKey = '';
     onScroll;
-    handleColumnsChange(newCols) {
-        this.columnWidths = this.getColumnWidths(newCols);
-        this.refreshColumnLayout();
+    toFiniteNumber(value, fallback) {
+        const n = typeof value === 'number' ? value : Number(value);
+        return Number.isFinite(n) ? n : fallback;
     }
-    handleUseVirtualScrollChange() {
-        this.columnWidths = this.getColumnWidths(this.columns || []);
-        this.refreshColumnLayout();
-        if (this.useVirtualScroll.vertical) {
-            this.scheduleUpdate('vertical');
-        }
+    isRowsPerPageValue(value) {
+        return value === null || typeof value === 'string' || typeof value === 'number';
     }
-    handleVirtualColumnWidthChange() {
-        if (!this.useVirtualScroll.horizontal)
-            return;
-        this.columnWidths = this.getColumnWidths(this.columns || []);
-        this.refreshColumnLayout();
+    isValidTableId(value) {
+        return (typeof value === 'string' &&
+            value.trim().length > 0 &&
+            value !== 'undefined' &&
+            value !== 'null');
     }
-    handleSelectableChange() {
-        this.refreshColumnLayout();
+    getResolvedTableId() {
+        if (this.isValidTableId(this.tableId))
+            return this.tableId;
+        const attrId = this.el?.getAttribute(TABLE_ID_ATTR);
+        if (this.isValidTableId(attrId))
+            return attrId;
+        return this.fallbackTableId;
     }
-    handleStickyColumnChange() {
-        this.refreshColumnLayout();
+    syncTableIdAttribute() {
+        const resolvedTableId = this.getResolvedTableId();
+        if (this.el?.getAttribute(TABLE_ID_ATTR) !== resolvedTableId) {
+            this.el.setAttribute(TABLE_ID_ATTR, resolvedTableId);
+        }
     }
-    handleColumnWidthsChange() {
-        this.stickyStyleCache.clear();
-        if (this.useVirtualScroll.horizontal) {
-            this.scheduleUpdate('horizontal');
+    handleIsLoadingChange(newVal) {
+        if (newVal) {
+            this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
         }
     }
-    handleRowsChange(newRows) {
-        this.innerRows = [...newRows];
-        this.clearRowDerivedCache();
-        if (this.useVirtualScroll.vertical) {
-            this.scheduleUpdate('vertical');
+    handleUseVirtualScrollChange(newVal) {
+        if (newVal) {
+            // DOM이 새 --table-container-height로 업데이트된 후 계산해야 정확함
+            readTask(() => this.propagateVirtualUpdate());
         }
     }
-    handleSelectedChange(newSelected) {
-        this.innerSelected = new Set(this.dedupeRowsByKey(newSelected || []));
-        this.clearSelectionCache();
+    handleColumnsChange(newCols) {
+        this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+        this.refreshChildrenConfig();
+    }
+    handleRowsChange(newRows) {
+        if (!Array.isArray(newRows))
+            return;
+        this.rowCount = newRows.length;
+        if (this.useVirtualScroll)
+            this.propagateVirtualUpdate(true);
+        this.pushRowsToChildren(newRows);
     }
-    cleanUpVirtualCache() {
-        this.cachedVirtualRows = null;
-        this.cachedVirtualIndexKey = '';
-        this.cachedColumnOrder = null;
-        this.lastColumnOrderKey = '';
+    handleTableIdChange() {
+        this.syncTableIdAttribute();
     }
-    refreshColumnLayout() {
-        this.cleanUpVirtualCache();
-        this.stickyStyleCache.clear();
-        if (this.useVirtualScroll.horizontal) {
-            this.scheduleUpdate('horizontal');
+    handleNoDataLabelChange(newLabel) {
+        if (typeof newLabel === 'string' &&
+            newLabel.trim().length > 0 &&
+            newLabel !== 'undefined' &&
+            newLabel !== 'null') {
+            this.resolvedNoDataLabel = newLabel;
+        }
+        else {
+            this.resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
         }
     }
-    clearSelectionCache() {
-        this.cachedIsAllChecked = undefined;
-        this.lastSelectionKey = '';
+    handleConfigChange() {
+        this.refreshChildrenConfig();
     }
-    clearRowDerivedCache() {
-        this.cleanUpVirtualCache();
-        this.clearSelectionCache();
+    handleSelectedChange(newSelected) {
+        this.innerSelected = new Set(newSelected);
     }
     handlePaginationChange(newVal) {
-        this.clearRowDerivedCache();
         if (newVal?.page && newVal.page !== this.currentPage) {
             this.currentPage = newVal.page;
-            if (this.useVirtualScroll.vertical && this.scrollContainer) {
-                this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
-                this.scrollTopPosition = 0;
-                this.calculateVisibleRange();
-            }
+        }
+        if (newVal?.rowsPerPage && newVal.rowsPerPage !== this.innerRowsPerPage) {
+            this.innerRowsPerPage = newVal.rowsPerPage;
         }
     }
     componentWillLoad() {
-        this.innerRows = [...(this.rows || [])];
-        this.innerSelected = new Set(this.dedupeRowsByKey(this.selected || []));
-        this.columnWidths = this.getColumnWidths(this.columns || []);
+        this.syncTableIdAttribute();
+        this.handleNoDataLabelChange(this.noDataLabel);
+        this.innerSelected = new Set(this.selected || []);
+        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
         if (this.pagination?.page) {
             this.currentPage = this.pagination.page;
         }
+        if (this.pagination?.rowsPerPage) {
+            this.innerRowsPerPage = this.pagination.rowsPerPage;
+        }
+        const el = this.el;
+        el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
+        el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
+        el.toggleSelectAllSync = this.toggleSelectAllSync.bind(this);
+        el.getIsAllCheckedSync = this.getIsAllCheckedSync.bind(this);
+        el.getStickyStyleSync = this.getStickyStyleSync.bind(this);
+        el.setRowCountSync = this.setRowCountSync.bind(this);
+        el.handleResize = this.handleResize.bind(this);
+        el.getPaginationInfoSync = this.getPaginationInfoSync.bind(this);
+        el.getVirtualScrollRangeSync = this.getVirtualScrollRangeSync.bind(this);
+        el.getConfigSync = this.getConfigSync.bind(this);
+        el.getTableIdSync = () => this.getResolvedTableId();
+        el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
+        el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
+        if (Array.isArray(this.rows)) {
+            this.rowCount = this.rows.length;
+            this.pushRowsToChildren(this.rows);
+        }
     }
     componentDidLoad() {
+        if (Array.isArray(this.rows)) {
+            this.pushRowsToChildren(this.rows);
+        }
         readTask(() => {
-            const middle = this.el.querySelector('.sd-table__middle');
-            if (!middle)
+            const wrapper = this.el.shadowRoot?.querySelector('.sd-table__wrapper');
+            if (!wrapper)
                 return;
+            let rafPending = false;
             this.onScroll = () => {
-                const scrollLeft = middle.scrollLeft;
-                const scrollWidth = middle.scrollWidth;
-                const clientWidth = middle.clientWidth;
-                const scrollTop = middle.scrollTop;
-                const verticalChanged = this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop;
-                const horizontalChanged = this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft;
+                // 가로 스크롤 그림자
+                const scrollLeft = wrapper.scrollLeft;
+                const scrollWidth = wrapper.scrollWidth;
+                const clientWidth = wrapper.clientWidth;
                 const newScrolledLeft = scrollLeft > 0;
                 const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
                 if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
                     this.scrolledLeft = newScrolledLeft;
                     this.scrolledRight = newScrolledRight;
+                    this.refreshChildrenConfig();
                 }
-                if (verticalChanged || horizontalChanged) {
-                    if (this.scrollRequestAnimationFrame !== null) {
-                        cancelAnimationFrame(this.scrollRequestAnimationFrame);
-                    }
-                    this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
-                        if (verticalChanged) {
-                            this.scrollTopPosition = scrollTop;
-                            this.calculateVisibleRange();
-                        }
-                        if (horizontalChanged) {
-                            this.scrollLeftPosition = scrollLeft;
-                            this.calculateVisibleColumnRange();
-                        }
-                        this.scrollRequestAnimationFrame = null;
+                // 세로 가상 스크롤 — RAF로 프레임당 1회만 처리
+                if (this.useVirtualScroll && !rafPending) {
+                    rafPending = true;
+                    requestAnimationFrame(() => {
+                        rafPending = false;
+                        this.propagateVirtualUpdate();
                     });
                 }
             };
-            this.scrollContainer = middle;
-            requestAnimationFrame(() => {
-                if (this.scrollContainer && this.onScroll) {
-                    this.cachedContainerHeight = this.scrollContainer.clientHeight;
-                    this.cachedContainerWidth = this.scrollContainer.clientWidth;
-                    middle.addEventListener('scroll', this.onScroll, { passive: true });
-                    this.startResizeObserver();
-                    if (this.useVirtualScroll.vertical) {
-                        this.calculateVisibleRange();
-                    }
-                    if (this.useVirtualScroll.horizontal) {
-                        this.calculateVisibleColumnRange();
-                    }
-                    this.onScroll();
-                }
-            });
+            this.scrollContainer = wrapper;
+            wrapper.addEventListener('scroll', this.onScroll, { passive: true });
+            this.onScroll();
+            if (this.useVirtualScroll) {
+                this.propagateVirtualUpdate(); // 초기 렌더
+            }
         });
     }
-    changePage(page) {
-        if (!this.useInternalPagination) {
-            this.sdPageChange.emit(page);
-            return;
-        }
-        this.currentPage = page;
-        this.clearRowDerivedCache();
-        if (this.useVirtualScroll.vertical && this.scrollContainer) {
-            this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
-            this.scrollTopPosition = 0;
-            this.calculateVisibleRange();
-        }
-        this.sdPageChange.emit(this.currentPage);
-    }
-    changeRowsPerPage(perPage) {
-        const changedRowsPerPage = perPage ? Number(perPage) : 0;
-        if (!this.useInternalPagination) {
-            this.sdRowsPerPageChange.emit(changedRowsPerPage);
-            return;
-        }
-        const newRowsPerPage = Number(perPage || 0);
-        let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
-        let newCurrentPage = this.currentPage;
-        if (newCurrentPage > newLastPage) {
-            newCurrentPage = newLastPage;
-        }
-        this.pagination = {
-            page: newCurrentPage,
-            rowsPerPage: newRowsPerPage,
-            lastPage: newLastPage,
-        };
-        this.currentPage = newCurrentPage;
-        this.clearRowDerivedCache();
-        if (this.useVirtualScroll.vertical && this.scrollContainer) {
-            this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
-            this.scrollTopPosition = 0;
-            this.calculateVisibleRange();
-        }
-        this.sdRowsPerPageChange.emit(changedRowsPerPage);
-    }
     disconnectedCallback() {
         if (this.scrollContainer && this.onScroll) {
             this.scrollContainer.removeEventListener('scroll', this.onScroll);
         }
-        this.resizeObserver?.disconnect();
-        if (this.scrollRequestAnimationFrame !== null) {
-            cancelAnimationFrame(this.scrollRequestAnimationFrame);
-        }
     }
-    // ----- Derived getters -----
-    get tableColumns() {
-        return this.columns || [];
+    pushRowsToChildren(rows) {
+        const tbody = this.el.querySelector('sd-tbody');
+        if (tbody)
+            tbody.rows = rows;
+        const thead = this.el.querySelector('sd-thead');
+        if (thead)
+            thead.rows = rows;
     }
-    get paginatedRows() {
-        if (!this.pagination || !this.useInternalPagination)
-            return this.innerRows;
-        const { rowsPerPage = this.rows.length } = this.pagination || {};
-        return this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
-    }
-    get virtualRows() {
-        const pageKey = this.useInternalPagination
-            ? `${this.currentPage}-${this.pagination?.rowsPerPage ?? 'all'}`
-            : 'all';
-        const newVirtualIndexKey = `${pageKey}-${this.innerRows.length}-${this.virtualStartIndex}-${this.virtualEndIndex}`;
-        if (this.cachedVirtualRows && this.cachedVirtualIndexKey === newVirtualIndexKey) {
-            return this.cachedVirtualRows;
-        }
-        this.cachedVirtualIndexKey = newVirtualIndexKey;
-        if (!this.useVirtualScroll.vertical) {
-            this.cachedVirtualRows = this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
+    handleStructureSlotChange = () => {
+        if (Array.isArray(this.rows)) {
+            this.pushRowsToChildren(this.rows);
         }
-        else {
-            this.cachedVirtualRows = this.paginatedRows
-                .slice(this.virtualStartIndex, this.virtualEndIndex + 1)
-                .map((row, relativeIdx) => ({
-                row,
-                actualIndex: this.virtualStartIndex + relativeIdx,
-            }));
-        }
-        return this.cachedVirtualRows;
-    }
-    get topSpacerHeight() {
-        if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
-            return 0;
-        return this.virtualStartIndex * this.virtualRowHeight;
-    }
-    get bottomSpacerHeight() {
-        if (!this.useVirtualScroll.vertical)
-            return 0;
-        const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
-        return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
+        this.refreshChildrenConfig();
+    };
+    refreshChildrenSelection() {
+        const thead = this.el.querySelector('sd-thead');
+        const rows = this.el.querySelectorAll('sd-tr');
+        thead?.refreshSelection?.();
+        rows.forEach(tr => tr?.refreshSelection?.());
     }
-    getHorizontalSpacerWidth(position) {
-        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
-        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
-        const remainingCols = virtualColumnWidths.length - this.virtualEndColIdx - 1;
-        if (position === 'right' && remainingCols <= 0)
-            return 0;
-        const targetIndex = position === 'left' ? [0, this.virtualStartColIdx] : [this.virtualEndColIdx + 1];
-        return virtualColumnWidths.slice(...targetIndex).reduce((sum, width) => sum + width, 0);
+    refreshChildrenConfig() {
+        const thead = this.el.querySelector('sd-thead');
+        const rows = this.el.querySelectorAll('sd-tr');
+        thead?.refreshConfig?.();
+        rows.forEach(tr => tr?.refreshConfig?.());
     }
-    get leftSpacerWidth() {
-        if (!this.useVirtualScroll.horizontal || this.virtualStartColIdx === 0) {
-            return 0;
-        }
-        return this.getHorizontalSpacerWidth('left');
+    maybeEmitVirtualReachEnd(start, end) {
+        const threshold = Math.max(1, this.virtualEndThreshold);
+        const nearEnd = end >= Math.max(0, this.rowCount - threshold);
+        if (!nearEnd)
+            return;
+        if (this.lastReachEndNotifiedRowCount === this.rowCount)
+            return;
+        this.lastReachEndNotifiedRowCount = this.rowCount;
+        this.sdVirtualReachEnd.emit({
+            from: start,
+            to: end,
+            rowCount: this.rowCount,
+            threshold,
+        });
     }
-    get rightSpacerWidth() {
-        if (!this.useVirtualScroll.horizontal) {
-            return 0;
+    propagateVirtualUpdate(forceSpacerUpdate = false) {
+        if (!this.scrollContainer || !this.useVirtualScroll)
+            return;
+        const scrollTop = this.toFiniteNumber(this.scrollContainer.scrollTop, 0);
+        const containerHeight = this.toFiniteNumber(this.scrollContainer.clientHeight, 0);
+        const { start, end } = this.calculateVisibleRange(scrollTop, containerHeight);
+        if (!Number.isFinite(start) || !Number.isFinite(end))
+            return;
+        const rangeChanged = this.vsStart !== start || this.vsEnd !== end;
+        if (!rangeChanged && !forceSpacerUpdate)
+            return;
+        this.vsStart = start;
+        this.vsEnd = end;
+        const topHeight = start * this.rowHeight;
+        const bottomHeight = Math.max(0, (this.rowCount - end) * this.rowHeight);
+        const tbody = this.el.querySelector('sd-tbody');
+        tbody?.setSpacersSync?.(topHeight, bottomHeight);
+        if (rangeChanged) {
+            this.sdVirtualUpdate.emit({
+                from: start,
+                to: end,
+            });
         }
-        return this.getHorizontalSpacerWidth('right');
+        this.maybeEmitVirtualReachEnd(start, end);
     }
-    get totalVirtualHeight() {
-        if (!this.useVirtualScroll.vertical)
-            return 0;
-        return this.paginatedRows.length * this.virtualRowHeight;
-    }
-    get lastPageNumber() {
-        const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
-        return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
-    }
-    get sdTableClasses() {
-        return [
-            'sd-table',
-            this.stickyHeader && 'sd-table--sticky-header',
-            this.selectable && 'sd-table--selectable',
-            this.resizable && 'sd-table--resizable',
-            !this.innerRows.length && 'sd-table--no-data',
-            this.hasStickyColumn && 'sd-table--sticky-column',
-            this.scrolledLeft && 'sd-table--scrolled-left',
-            this.scrolledRight && 'sd-table--scrolled-right',
-        ]
-            .filter(Boolean)
-            .join(' ');
+    getVirtualScrollConfigSync() {
+        return {
+            useVirtualScroll: this.useVirtualScroll,
+            rowHeight: this.rowHeight,
+            virtualBuffer: this.virtualBuffer,
+            vsStart: this.vsStart,
+            vsEnd: this.vsEnd,
+            rowCount: this.rowCount,
+        };
     }
-    get hasStickyColumn() {
-        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
-        return (this.selectable || stickyLeftCount > 0 || stickyRightCount > 0);
+    getConfigSync() {
+        return {
+            columns: this.columns,
+            selectable: this.selectable,
+            resizable: this.resizable,
+            stickyColumn: this.stickyColumn,
+            stickyHeader: this.stickyHeader,
+            scrolledLeft: this.scrolledLeft,
+            scrolledRight: this.scrolledRight,
+            columnWidths: this.columnWidths,
+        };
     }
-    get hasStickyLeftDataColumn() {
-        return this.getNormalizedStickyCounts().stickyLeftCount > 0;
+    isRowSelectedSync(row) {
+        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
     }
-    // ----- Selection -----
-    isRowSelected(row) {
-        return Array.from(this.innerSelected).some(r => this.getRowKeyValue(r) === this.getRowKeyValue(row));
+    async isRowSelected(row) {
+        return this.isRowSelectedSync(row);
     }
-    updateRowSelect(row) {
+    updateRowSelectSync(row) {
         const selectedArray = Array.from(this.innerSelected);
-        const exists = this.isRowSelected(row);
+        const exists = this.isRowSelectedSync(row);
         const newSelected = exists
-            ? selectedArray.filter(r => this.getRowKeyValue(r) !== this.getRowKeyValue(row))
+            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
             : [...selectedArray, row];
-        // 동일 상태면 set하지 않음 → 불필요 렌더 방지
         if (newSelected.length === selectedArray.length)
             return;
-        this.innerSelected = new Set(this.dedupeRowsByKey(newSelected));
-        this.clearSelectionCache();
+        this.innerSelected = new Set(newSelected);
         this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
+        this.refreshChildrenSelection();
+    }
+    async updateRowSelect(row) {
+        this.updateRowSelectSync(row);
     }
-    toggleSelectAll(checked) {
-        const selectedRows = Array.from(this.innerSelected);
+    toggleSelectAllSync(checked, rows) {
         if (checked) {
-            this.innerSelected = new Set(this.dedupeRowsByKey([...selectedRows, ...this.paginatedRows]));
+            const pageRows = new Set([...rows]);
+            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
         }
         else {
-            const currentPageKeys = new Set(this.paginatedRows.map(r => this.getRowKeyValue(r)));
-            this.innerSelected = new Set(selectedRows.filter(r => !currentPageKeys.has(this.getRowKeyValue(r))));
+            const currentPageKeys = rows.map(r => r[this.rowKey]);
+            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
         }
-        this.clearSelectionCache();
         this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
+        this.refreshChildrenSelection();
     }
-    get isAllChecked() {
-        const paginatedKeys = this.paginatedRows.map(row => String(this.getRowKeyValue(row))).join('|');
-        const selectedKeys = Array.from(this.innerSelected)
-            .map(row => String(this.getRowKeyValue(row)))
-            .sort()
-            .join('|');
-        const selectionKey = `${paginatedKeys}::${selectedKeys}`;
-        if (this.cachedIsAllChecked !== undefined && this.lastSelectionKey === selectionKey) {
-            return this.cachedIsAllChecked;
-        }
-        const total = this.paginatedRows.length;
-        const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => this.getRowKeyValue(selectedRow) === this.getRowKeyValue(row))).length;
-        let result;
-        if (selectedCount === 0) {
-            result = false; // 아무것도 안 선택됨
-        }
-        else if (selectedCount === total) {
-            result = true; // 전부 선택됨
-        }
-        else {
-            result = null; // 일부만 선택됨
-        }
-        this.cachedIsAllChecked = result;
-        this.lastSelectionKey = selectionKey;
-        return result;
+    async toggleSelectAll(checked, rows) {
+        this.toggleSelectAllSync(checked, rows);
     }
-    // RAF 통합 관리
-    scheduleUpdate(type) {
-        this.pendingUpdates[type] = true;
-        if (!this.rafScheduled) {
-            this.rafScheduled = true;
-            this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
-                if (this.pendingUpdates.vertical)
-                    this.calculateVisibleRange();
-                if (this.pendingUpdates.horizontal)
-                    this.calculateVisibleColumnRange();
-                this.pendingUpdates = { vertical: false, horizontal: false };
-                this.rafScheduled = false;
-                this.scrollRequestAnimationFrame = null;
-            });
-        }
+    getIsAllCheckedSync(rows) {
+        const total = rows.length;
+        const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
+        if (selectedCount === 0)
+            return false;
+        if (selectedCount === total)
+            return true;
+        return null; // indeterminate
     }
-    // 세로 가상 스크롤 렌더링 계산
-    calculateVisibleRange() {
-        if (!this.useVirtualScroll.vertical) {
-            this.virtualStartIndex = 0;
-            this.virtualEndIndex = this.paginatedRows.length - 1;
-            return;
-        }
-        const scrollTop = this.scrollTopPosition;
-        let containerHeight = this.cachedContainerHeight;
-        if (containerHeight === 0 && this.scrollContainer) {
-            containerHeight = this.scrollContainer.clientHeight;
-            this.cachedContainerHeight = containerHeight;
-        }
-        const bufferSize = this.virtualBufferSize.vertical || 5;
-        const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
-        const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
-        const endIndex = startIndex + visibleCount - 1;
-        const newStartIndex = Math.max(0, startIndex - bufferSize);
-        const newEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
-        // 실제로 변경된 경우에만 상태 업데이트
-        if (this.virtualStartIndex !== newStartIndex || this.virtualEndIndex !== newEndIndex) {
-            this.virtualStartIndex = newStartIndex;
-            this.virtualEndIndex = newEndIndex;
-        }
+    async getIsAllChecked(rows) {
+        return this.getIsAllCheckedSync(rows);
     }
-    // 가로 가상 스크롤 렌더링 계산
-    calculateVisibleColumnRange() {
-        if (!this.useVirtualScroll.horizontal) {
-            this.virtualStartColIdx = 0;
-            this.virtualEndColIdx = this.tableColumns.length - 1;
-            return;
-        }
-        const scrollLeft = this.scrollLeftPosition;
-        // 캐시된 값 사용, 없으면 측정 후 캐시
-        let containerWidth = this.cachedContainerWidth;
-        if (containerWidth === 0 && this.scrollContainer) {
-            containerWidth = this.scrollContainer.clientWidth;
-            this.cachedContainerWidth = containerWidth;
-        }
-        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
-        // 가상 스크롤 컬럼 - sticky column 제외
-        const virtualColumns = this.tableColumns.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
-        if (virtualColumns.length === 0) {
-            this.virtualStartColIdx = 0;
-            this.virtualEndColIdx = 0;
+    changePage(page) {
+        if (!this.useInternalPagination) {
+            this.sdPageChange.emit(page);
             return;
         }
-        const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
-            (this.selectable ? 52 : 0);
-        const stickyRightWidth = this.columnWidths
-            .slice(this.tableColumns.length - stickyRightCount)
-            .reduce((sum, width) => sum + width, 0);
-        // 가상 스크롤 영역의 너비 계산
-        const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
-        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
-        const virtualScrollLeft = Math.max(0, scrollLeft - stickyLeftWidth);
-        const reducedVirtualWidth = virtualColumnWidths.reduce((acc, width, idx) => {
-            acc.push((acc[idx - 1] || 0) + width);
-            return acc;
-        }, []);
-        let startIdx = 0; // 가상 스크롤 시작 인덱스
-        let endIdx = virtualColumns.length - 1; // 가상 스크롤 종료 인덱스
-        // sticky left 영역 제외한 스크롤 위치
-        for (let i = 0; i < reducedVirtualWidth.length; i++) {
-            if (reducedVirtualWidth[i] > virtualScrollLeft) {
-                startIdx = Math.max(0, i);
-                break;
-            }
-        }
-        const scrollRight = virtualScrollLeft + virtualScrollableWidth;
-        for (let i = startIdx; i < reducedVirtualWidth.length; i++) {
-            if (reducedVirtualWidth[i] >= scrollRight) {
-                endIdx = Math.min(virtualColumns.length - 1, i);
-                break;
-            }
-        }
-        const bufferSize = this.virtualBufferSize.horizontal || 5;
-        const newStartColIdx = Math.max(0, startIdx - bufferSize);
-        const newEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
-        // 실제로 변경된 경우에만 상태 업데이트
-        if (this.virtualStartColIdx !== newStartColIdx || this.virtualEndColIdx !== newEndColIdx) {
-            this.virtualStartColIdx = newStartColIdx;
-            this.virtualEndColIdx = newEndColIdx;
-        }
+        this.currentPage = page;
+        this.sdPageChange.emit(this.currentPage);
+        this.updateRowsVisibility();
     }
-    // ----- Helpers -----
-    getStickyStyle(colIdx) {
-        // 캐시된 스타일이 있으면 반환
-        if (this.stickyStyleCache.has(colIdx)) {
-            return this.stickyStyleCache.get(colIdx);
-        }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
-        const { stickyRightCount } = this.getNormalizedStickyCounts();
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.tableColumns.length - stickyRightCount && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        const style = {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
-        };
-        // 스타일 캐시에 저장
-        this.stickyStyleCache.set(colIdx, style);
-        return style;
+    updateRowsVisibility() {
+        const rows = this.el.querySelectorAll('sd-tr');
+        rows.forEach(tr => tr?.updateVisibility?.());
     }
-    startResizeObserver() {
-        if (!this.scrollContainer || typeof ResizeObserver === 'undefined')
+    changeRowsPerPage(perPage) {
+        const changedRowsPerPage = perPage ? Number(perPage) : 0;
+        if (!this.useInternalPagination) {
+            this.sdRowsPerPageChange.emit(changedRowsPerPage);
             return;
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = new ResizeObserver(() => {
-            if (!this.scrollContainer)
-                return;
-            const nextHeight = this.scrollContainer.clientHeight;
-            const nextWidth = this.scrollContainer.clientWidth;
-            const heightChanged = this.cachedContainerHeight !== nextHeight;
-            const widthChanged = this.cachedContainerWidth !== nextWidth;
-            if (!heightChanged && !widthChanged)
-                return;
-            this.cachedContainerHeight = nextHeight;
-            this.cachedContainerWidth = nextWidth;
-            if (heightChanged && this.useVirtualScroll.vertical) {
-                this.scheduleUpdate('vertical');
-            }
-            if (widthChanged && this.useVirtualScroll.horizontal) {
-                this.scheduleUpdate('horizontal');
-            }
-        });
-        this.resizeObserver.observe(this.scrollContainer);
-    }
-    parseColumnWidth(width, fallbackWidth) {
-        if (typeof width === 'number') {
-            return Number.isFinite(width) ? width : fallbackWidth;
         }
-        if (typeof width !== 'string')
-            return fallbackWidth;
-        const normalized = width.trim();
-        if (!normalized)
-            return fallbackWidth;
-        if (/^\d+(\.\d+)?px$/.test(normalized)) {
-            return Number.parseFloat(normalized);
+        this.innerRowsPerPage = changedRowsPerPage;
+        const newLastPage = Math.max(1, Math.ceil(this.rowCount / changedRowsPerPage));
+        if (this.currentPage > newLastPage) {
+            this.currentPage = newLastPage;
         }
-        if (/^\d+(\.\d+)?$/.test(normalized)) {
-            return Number.parseFloat(normalized);
-        }
-        return fallbackWidth;
-    }
-    getColumnWidths(columns = []) {
-        const fallbackWidth = this.useVirtualScroll.horizontal ? this.virtualColumnWidth : 120;
-        return columns.map(c => this.parseColumnWidth(c.width, fallbackWidth));
-    }
-    getNormalizedStickyCounts() {
-        const totalColumnCount = this.tableColumns.length;
-        const requestedLeft = Number(this.stickyColumn?.left ?? 0) || 0;
-        const requestedRight = Number(this.stickyColumn?.right ?? 0) || 0;
-        const stickyLeftCount = Math.min(totalColumnCount, Math.max(0, requestedLeft));
-        const stickyRightCount = Math.min(Math.max(0, totalColumnCount - stickyLeftCount), Math.max(0, requestedRight));
-        return {
-            stickyLeftCount,
-            stickyRightCount,
-        };
-    }
-    getRowKeyValue(row) {
-        return row?.[this.rowKey];
+        this.sdRowsPerPageChange.emit(changedRowsPerPage);
+        this.updateRowsVisibility();
     }
-    dedupeRowsByKey(rows) {
-        const rowMap = new Map();
-        rows.forEach(row => {
-            rowMap.set(this.getRowKeyValue(row), row);
-        });
-        return Array.from(rowMap.values());
+    get lastPageNumber() {
+        if (this.useInternalPagination) {
+            return Math.max(1, Math.ceil(this.rowCount / this.innerRowsPerPage));
+        }
+        const { lastPage, rowsPerPage = 10 } = this.pagination || {};
+        return lastPage ?? Math.max(1, Math.ceil(this.rowCount / rowsPerPage));
     }
-    handleResize(index, event) {
-        // SSR 환경 체크
+    handleResize(index, event, reversed = false) {
         if (typeof document === 'undefined')
             return;
         const startX = event.clientX;
         const startWidth = this.columnWidths[index];
         const handleMouseMove = (moveEvent) => {
-            const currentWidth = this.columnWidths[index];
-            if (!currentWidth)
+            const col = this.columns[index];
+            if (!col)
                 return;
-            const targetColumn = this.tableColumns[index];
-            const minWidth = targetColumn?.minWidth || 50;
-            const maxWidth = targetColumn?.maxWidth || 9999;
-            const newWidth = Math.min(Math.max(startWidth + moveEvent.clientX - startX, minWidth), maxWidth);
+            const minWidth = col.minWidth || 50;
+            const maxWidth = col.maxWidth || 9999;
+            const delta = moveEvent.clientX - startX;
+            const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
+            const thead = this.el.querySelector('sd-thead');
+            const rows = this.el.querySelectorAll('sd-tr');
+            thead?.setColumnWidths?.(this.columnWidths);
+            rows.forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
+            const stickyRightCount = this.stickyColumn?.right || 0;
+            const visibleColCount = this.columns.filter(c => c.visible !== false).length;
+            const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
+            if (isRightStickyEdgeResizer) {
+                requestAnimationFrame(() => {
+                    this.onScroll?.();
+                });
+            }
         };
         const handleMouseUp = () => {
             document.removeEventListener('mousemove', handleMouseMove);
@@ -616,161 +409,119 @@ export class SdTable {
         document.addEventListener('mousemove', handleMouseMove);
         document.addEventListener('mouseup', handleMouseUp);
     }
-    getCellValue(column, row) {
-        const { field, format, name } = column;
-        const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
-        return format ? format(value, row) : value;
-    }
-    getColumnRenderedInOrder() {
-        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
-        const orderKey = `${this.tableColumns.map(col => col.name).join('|')}-${stickyLeftCount}-${stickyRightCount}-${this.useVirtualScroll.horizontal ? `${this.virtualStartColIdx}-${this.virtualEndColIdx}` : 'all'}`;
-        if (this.cachedColumnOrder && this.lastColumnOrderKey === orderKey) {
-            return this.cachedColumnOrder;
-        }
-        // Sticky left 컬럼들
-        const stickyLeftCols = this.tableColumns.slice(0, stickyLeftCount);
-        const stickyRightCols = this.tableColumns.slice(this.tableColumns.length - stickyRightCount);
-        const middleCols = this.useVirtualScroll.horizontal
-            ? this.tableColumns
-                .slice(stickyLeftCount, this.tableColumns.length - stickyRightCount)
-                .slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
-            : this.tableColumns.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
-        this.cachedColumnOrder = {
-            stickyLeftCount,
-            stickyRightCount,
-            stickyLeftCols,
-            middleCols,
-            stickyRightCols,
+    getStickyStyleSync(colIdx) {
+        const leftOffset = this.columnWidths
+            .slice(0, colIdx)
+            .reduce((a, b) => a + b, this.selectable ? 52 : 0);
+        const rightOffset = this.columnWidths
+            .filter((_, i) => i >=
+            this.columns.filter(c => c.visible !== false).length -
+                (this.stickyColumn?.right || 0) && i > colIdx)
+            .reduce((a, b) => a + b, 0);
+        return {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
         };
-        this.lastColumnOrderKey = orderKey;
-        return this.cachedColumnOrder;
     }
-    // ----- Render -----
-    renderHead() {
-        const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
-        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
-                'sd-th': true,
-                'sd-th--selected': true,
-                'sticky-left': true,
-                'sticky-left-edge': !this.hasStickyLeftDataColumn,
-            }, style: {
-                '--sticky-left-offset': '0px',
-            } }, h("sd-checkbox", { value: this.isAllChecked, disabled: !this.paginatedRows.length, onSdUpdate: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
-            return (h("th", { key: col.name, class: {
-                    'sd-th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'sticky-left': true,
-                    'sticky-left-edge': idx === stickyLeftCount - 1,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))));
-        }), this.renderSpacerTh('left'), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
-            return (h("th", { key: col.name, class: {
-                    'sd-th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
-        }), this.renderSpacerTh('right'), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.tableColumns.length - stickyRightCount + relativeIdx;
-            return (h("th", { key: col.name, class: {
-                    'sd-th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
-        }))));
+    async getStickyStyle(colIdx) {
+        return this.getStickyStyleSync(colIdx);
     }
-    renderBody() {
-        return (h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll.vertical ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && this.renderSpacerRow('top'), this.paginatedRows.length > 0 &&
-            this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll.vertical &&
-            this.bottomSpacerHeight > 0 &&
-            this.renderSpacerRow('bottom')));
+    setRowCountSync(count) {
+        const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
+        if (safeCount !== this.rowCount) {
+            this.lastReachEndNotifiedRowCount = -1;
+        }
+        this.rowCount = safeCount;
+        if (this.useVirtualScroll) {
+            this.propagateVirtualUpdate(true);
+        }
     }
-    renderRow(row, rowIdx) {
-        const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
-        return (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll.vertical
-                ? {
-                    height: `${this.virtualRowHeight}px`,
-                }
-                : {} }, this.selectable && (h("td", { class: {
-                'sd-td': true,
-                'sd-td--selected': true,
-                'sticky-left': true,
-                'sticky-left-edge': !this.hasStickyLeftDataColumn,
-            }, style: {
-                '--sticky-left-offset': '0px',
-            } }, h("sd-checkbox", { value: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdUpdate: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
-            return (h("td", { key: column.name, part: `td-${column.name}`, class: {
-                    'sd-td': true,
-                    [`sd-td--${column.align || 'left'}`]: true,
-                    'sticky-left': true,
-                    'sticky-left-edge': idx === stickyLeftCount - 1,
-                    [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(idx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, this.getCellValue(column, row))));
-        }), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
-            return (h("td", { key: column.name, part: `td-${column.name}`, class: {
-                    'sd-td': true,
-                    [`sd-td--${column.align || 'left'}`]: true,
-                    [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, this.getCellValue(column, row))));
-        }), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
-            const actualColIdx = this.tableColumns.length - stickyRightCount + relativeIdx;
-            return (h("td", { key: column.name, part: `td-${column.name}`, class: {
-                    'sd-td': true,
-                    [`sd-td--${column.align || 'left'}`]: true,
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                    [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, this.getCellValue(column, row))));
-        })));
+    async setRowCount(count) {
+        this.setRowCountSync(count);
     }
-    renderSpacerRow(position) {
-        const spacerHeight = position === 'top' ? this.topSpacerHeight : this.bottomSpacerHeight;
-        return (h("tr", { key: `virtual-${position}-spacer`, class: "sd-table__virtual-row-spacer", style: {
-                height: `${spacerHeight}px`,
-            }, "aria-hidden": "true" }, h("td", { colSpan: this.tableColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton", style: {
-                '--row-height': `${this.virtualRowHeight}px`,
-            } }))));
+    calculateVisibleRange(scrollTop, containerHeight) {
+        const safeRowHeight = Math.max(1, this.toFiniteNumber(this.rowHeight, 40));
+        const safeBuffer = Math.max(0, Math.floor(this.toFiniteNumber(this.virtualBuffer, 5)));
+        const safeScrollTop = Math.max(0, this.toFiniteNumber(scrollTop, 0));
+        const safeContainerHeight = Math.max(0, this.toFiniteNumber(containerHeight, 0));
+        const safeRowCount = Math.max(0, Math.floor(this.toFiniteNumber(this.rowCount, 0)));
+        const firstVisible = Math.floor(safeScrollTop / safeRowHeight);
+        const visibleCount = Math.ceil(safeContainerHeight / safeRowHeight);
+        const start = Math.max(0, firstVisible - safeBuffer);
+        const end = Math.min(safeRowCount, firstVisible + visibleCount + safeBuffer);
+        return { start, end };
     }
-    getSpacerCellStyle(spacerWidth) {
+    getPaginationInfoSync() {
+        if (!this.useInternalPagination || !this.pagination)
+            return null;
+        const startIndex = (this.currentPage - 1) * this.innerRowsPerPage;
+        const endIndex = startIndex + this.innerRowsPerPage;
         return {
-            width: `${spacerWidth}px`,
-            minWidth: `${spacerWidth}px`,
-            maxWidth: `${spacerWidth}px`,
-            padding: '0',
-            border: 'none',
+            startIndex,
+            endIndex,
+            currentPage: this.currentPage,
+            rowsPerPage: this.innerRowsPerPage,
         };
     }
-    renderSpacerTh(position) {
-        const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
-        const showSpacer = position === 'left'
-            ? this.useVirtualScroll.horizontal && this.leftSpacerWidth > 0
-            : this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
-        if (!showSpacer)
-            return null;
-        return (h("th", { key: `virtual-${position}-spacer-header`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
+    async getPaginationInfo() {
+        return this.getPaginationInfoSync();
     }
-    renderSpacerTd(position, rowIdx) {
-        const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
-        const showSpacer = position === 'left'
-            ? this.useVirtualScroll.horizontal && this.leftSpacerWidth > 0
-            : this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
-        if (!showSpacer)
+    getVirtualScrollRangeSync() {
+        if (!this.useVirtualScroll)
             return null;
-        return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
+        if (!(this.vsEnd > 0))
+            return null;
+        return { from: this.vsStart, to: this.vsEnd };
+    }
+    get tableClasses() {
+        return [
+            'sd-table',
+            this.stickyHeader && 'sd-table--sticky-header',
+            this.selectable && 'sd-table--selectable',
+            this.resizable && 'sd-table--resizable',
+            (this.selectable ||
+                (this.stickyColumn?.left ?? 0) > 0 ||
+                (this.stickyColumn?.right ?? 0) > 0) &&
+                'sd-table--sticky-column',
+            this.scrolledLeft && 'sd-table--scrolled-left',
+            this.scrolledRight && 'sd-table--scrolled-right',
+            this.rowCount === 0 && !this.isLoading && 'sd-table--no-data',
+        ]
+            .filter(Boolean)
+            .join(' ');
     }
     render() {
-        return (h(Fragment, { key: 'cc7236bc2511f0b7c6bd31610e005c558e4dda81' }, h("div", { key: 'c78feb1d4ba89c8340660405598c8892d660078d', class: "sd-table__wrapper", style: {
+        const resolvedTableId = this.getResolvedTableId();
+        return (h(Host, { key: 'dd25a84ce29a197a7e853d1812ce0f0fbdf043bd' }, h("div", { key: '8b256e995d55c36ff9622148054911fcbe8aa89b', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'e127e5e51cfa1b930a79d031ff4fbffac3cf8b69', class: "sd-table__container", style: {
-                '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: 'ea47affe622b7f7c98b9c044db73f275a9c7b8ba', class: {
-                'sd-table__middle': true,
-                'sd-table__middle--scrollable': this.paginatedRows.length > 0,
-                'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '52c9d3a0b83bf786980cb6561b39234d3f1697ad', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '60d8f10a4f35e509969190ab23713057f9fb1efb' }))), h("table", { key: 'fd25840b4aeddd456d97c7397541da58c8d0aed9', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: '5d1ed19126eb328a78ff50e701392b0d18208030', class: "sd-table__bottom" }, h("div", { key: 'e3cc512088e0bf7f6ec9699c1ce948910d621e45', class: "sd-table__no-data" }, h("slot", { key: 'a5285e5d607a66a6e9f7993c6a82dc9bd6d53a08', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '1a57bf7960624ebfd80005cd320d0d29ed7b6123', class: "sd-table__pagination" }, h("sd-pagination", { key: 'dbc457c10036556928c3503ef84b8bfc29849342', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '6a0bdf472ed0dfca4c57725635c50bf1a375f11c', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+                '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
+            } }, h("div", { key: 'b4949fed8c50b93bcddace22978aff358ea7c210', class: {
+                'sd-table__clip': true,
+                'sd-table__clip--has-pagination': !!(this.pagination &&
+                    this.pagination.rowsPerPage > 0 &&
+                    this.rowCount > 0 &&
+                    !this.useVirtualScroll),
+            } }, h("div", { key: '5fcceeb27568afdd367e7dbf2886fcbd107089c5', class: {
+                'sd-table__wrapper': true,
+                'sd-table__wrapper--loading': this.isLoading,
+                'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
+            } }, this.isLoading && (h("div", { key: 'edabfb6b601cfad985e3b8614d603f2df1da8f98', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '40de9b2b97407523d1b02b97f208682e4946be66', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: 'fe0d54f45a2a0a8ca1cc6552a42c7725ecd84c99', class: "sd-table__no-data" }, h("slot", { key: 'f64d232d1b3bd69d7c43a5170d06e73cbc586226', name: "no-data" }, h("span", { key: '71f5dcf2e5af2403032bdefd19a3cc4793a823e9' }, this.resolvedNoDataLabel)))), h("table", { key: 'e32c9f96523db174a57efffa584237836a67214a', class: this.tableClasses }, h("slot", { key: 'ce5e49454ac9044d6b3fcf3ac51809bb1e5465f8', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), h("slot", { key: '800b45ddc05aac02cf8827b31beca5d0f363b55f', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
+            this.pagination.rowsPerPage > 0 &&
+            this.rowCount > 0 &&
+            !this.useVirtualScroll && (h("div", { key: 'ea2afbe59f7b249d3f4e9d9763ab402438e47008', class: "sd-table__pagination" }, h("sd-pagination", { key: 'a64223b9d2374142cbf12ec582e580f1b9f8f8dc', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select-v2", { key: '597cd596ac0ce2752ab6fc792887ce447c863eb8', value: this.useInternalPagination
+                ? this.innerRowsPerPage
+                : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
+                if (!this.isRowsPerPageValue(e.detail))
+                    return;
+                this.changeRowsPerPage(e.detail);
+            } })))))));
     }
     static get is() { return "sd-table"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-table.scss"]
@@ -783,6 +534,26 @@ export class SdTable {
     }
     static get properties() {
         return {
+            "tableId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "table-id",
+                "defaultValue": "nanoid(8)"
+            },
             "columns": {
                 "type": "unknown",
                 "mutable": false,
@@ -791,37 +562,40 @@ export class SdTable {
                     "resolved": "SdTableColumn[]",
                     "references": {
                         "SdTableColumn": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table.tsx",
-                            "id": "src/components/sd-table/sd-table.tsx::SdTableColumn"
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::SdTableColumn",
+                            "referenceLocation": "SdTableColumn"
                         }
                     }
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "[]"
             },
             "rows": {
                 "type": "unknown",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "Row[]",
-                    "resolved": "Row[]",
+                    "resolved": "Row[] | undefined",
                     "references": {
                         "Row": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table.tsx",
-                            "id": "src/components/sd-table/sd-table.tsx::Row"
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
                         }
                     }
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -837,9 +611,10 @@ export class SdTable {
                     "resolved": "Row[]",
                     "references": {
                         "Row": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table.tsx",
-                            "id": "src/components/sd-table/sd-table.tsx::Row"
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
                         }
                     }
                 },
@@ -975,9 +750,16 @@ export class SdTable {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ left?: number; right?: number }",
-                    "resolved": "{ left?: number | undefined; right?: number | undefined; }",
-                    "references": {}
+                    "original": "SdTableStickyColumn",
+                    "resolved": "SdTableStickyColumn",
+                    "references": {
+                        "SdTableStickyColumn": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::SdTableStickyColumn",
+                            "referenceLocation": "SdTableStickyColumn"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -1007,7 +789,7 @@ export class SdTable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "no-data-label",
-                "defaultValue": "'\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.'"
+                "defaultValue": "SdTable.DEFAULT_NO_DATA_LABEL"
             },
             "isLoading": {
                 "type": "boolean",
@@ -1033,9 +815,16 @@ export class SdTable {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{\n  page: number;\n  rowsPerPage: number;\n  lastPage?: number;\n }",
-                    "resolved": "undefined | { page: number; rowsPerPage: number; lastPage?: number | undefined; }",
-                    "references": {}
+                    "original": "SdTablePagination",
+                    "resolved": "SdTablePagination | undefined",
+                    "references": {
+                        "SdTablePagination": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::SdTablePagination",
+                            "referenceLocation": "SdTablePagination"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -1086,20 +875,13 @@ export class SdTable {
                 "attribute": "use-rows-per-page-select",
                 "defaultValue": "false"
             },
-            "rowsPerPageOption": {
-                "type": "unknown",
+            "useVirtualScroll": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "SelectOption[]",
-                    "resolved": "SelectOption[]",
-                    "references": {
-                        "SelectOption": {
-                            "location": "import",
-                            "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectOption",
-                            "referenceLocation": "SelectOption"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -1109,14 +891,16 @@ export class SdTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\n  { label: '10\uAC1C\uC529 \uBCF4\uAE30', value: 10 },\n  { label: '25\uAC1C\uC529 \uBCF4\uAE30', value: 25 },\n  { label: '50\uAC1C\uC529 \uBCF4\uAE30', value: 50 },\n  { label: '100\uAC1C\uC529 \uBCF4\uAE30', value: 100 },\n ]"
+                "reflect": false,
+                "attribute": "use-virtual-scroll",
+                "defaultValue": "false"
             },
-            "useVirtualScroll": {
-                "type": "unknown",
+            "rowHeight": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ vertical?: boolean; horizontal?: boolean }",
-                    "resolved": "{ vertical?: boolean | undefined; horizontal?: boolean | undefined; }",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
@@ -1127,9 +911,11 @@ export class SdTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{}"
+                "reflect": false,
+                "attribute": "row-height",
+                "defaultValue": "40"
             },
-            "virtualRowHeight": {
+            "virtualBuffer": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -1146,10 +932,10 @@ export class SdTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "virtual-row-height",
-                "defaultValue": "44"
+                "attribute": "virtual-buffer",
+                "defaultValue": "5"
             },
-            "virtualColumnWidth": {
+            "virtualEndThreshold": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -1166,16 +952,23 @@ export class SdTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "virtual-column-width",
-                "defaultValue": "120"
+                "attribute": "virtual-end-threshold",
+                "defaultValue": "10"
             },
-            "virtualBufferSize": {
+            "rowsPerPageOption": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ vertical?: number; horizontal?: number }",
-                    "resolved": "{ vertical?: number | undefined; horizontal?: number | undefined; }",
-                    "references": {}
+                    "original": "SelectOption[]",
+                    "resolved": "SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -1185,24 +978,21 @@ export class SdTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\n  vertical: 5,\n  horizontal: 5,\n }"
+                "defaultValue": "[\n    { label: '10\uAC1C\uC529 \uBCF4\uAE30', value: 10 },\n    { label: '25\uAC1C\uC529 \uBCF4\uAE30', value: 25 },\n    { label: '50\uAC1C\uC529 \uBCF4\uAE30', value: 50 },\n    { label: '100\uAC1C\uC529 \uBCF4\uAE30', value: 100 },\n  ]"
             }
         };
     }
     static get states() {
         return {
+            "resolvedNoDataLabel": {},
             "currentPage": {},
-            "innerRows": {},
+            "innerRowsPerPage": {},
             "innerSelected": {},
             "columnWidths": {},
             "scrolledLeft": {},
             "scrolledRight": {},
-            "virtualStartIndex": {},
-            "virtualEndIndex": {},
-            "scrollTopPosition": {},
-            "virtualStartColIdx": {},
-            "virtualEndColIdx": {},
-            "scrollLeftPosition": {}
+            "rowCount": {},
+            "loadingScrollTop": {}
         };
     }
     static get events() {
@@ -1221,9 +1011,10 @@ export class SdTable {
                     "resolved": "Row[]",
                     "references": {
                         "Row": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table.tsx",
-                            "id": "src/components/sd-table/sd-table.tsx::Row"
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
                         }
                     }
                 }
@@ -1257,31 +1048,245 @@ export class SdTable {
                     "resolved": "number",
                     "references": {}
                 }
+            }, {
+                "method": "sdVirtualUpdate",
+                "name": "sdVirtualUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    from: number;\n    to: number;\n  }",
+                    "resolved": "{ from: number; to: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "sdVirtualReachEnd",
+                "name": "sdVirtualReachEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    from: number;\n    to: number;\n    rowCount: number;\n    threshold: number;\n  }",
+                    "resolved": "{ from: number; to: number; rowCount: number; threshold: number; }",
+                    "references": {}
+                }
             }];
     }
+    static get methods() {
+        return {
+            "isRowSelected": {
+                "complexType": {
+                    "signature": "(row: Row) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "row",
+                            "type": "Row",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Row": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "updateRowSelect": {
+                "complexType": {
+                    "signature": "(row: Row) => Promise<void>",
+                    "parameters": [{
+                            "name": "row",
+                            "type": "Row",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Row": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggleSelectAll": {
+                "complexType": {
+                    "signature": "(checked: boolean, rows: Row[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "checked",
+                            "type": "boolean",
+                            "docs": ""
+                        }, {
+                            "name": "rows",
+                            "type": "Row[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Row": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getIsAllChecked": {
+                "complexType": {
+                    "signature": "(rows: Row[]) => Promise<boolean | null>",
+                    "parameters": [{
+                            "name": "rows",
+                            "type": "Row[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Row": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
+                        }
+                    },
+                    "return": "Promise<boolean | null>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getStickyStyle": {
+                "complexType": {
+                    "signature": "(colIdx: number) => Promise<{ '--sticky-left-offset': string; '--sticky-right-offset': string; width: string; minWidth: string; maxWidth: string; }>",
+                    "parameters": [{
+                            "name": "colIdx",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ '--sticky-left-offset': string; '--sticky-right-offset': string; width: string; minWidth: string; maxWidth: string; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setRowCount": {
+                "complexType": {
+                    "signature": "(count: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "count",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getPaginationInfo": {
+                "complexType": {
+                    "signature": "() => Promise<{ startIndex: number; endIndex: number; currentPage: number; rowsPerPage: number; } | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ startIndex: number; endIndex: number; currentPage: number; rowsPerPage: number; } | null>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "columns",
-                "methodName": "handleColumnsChange"
+                "propName": "isLoading",
+                "methodName": "handleIsLoadingChange"
             }, {
                 "propName": "useVirtualScroll",
                 "methodName": "handleUseVirtualScrollChange"
             }, {
-                "propName": "virtualColumnWidth",
-                "methodName": "handleVirtualColumnWidthChange"
+                "propName": "columns",
+                "methodName": "handleColumnsChange"
+            }, {
+                "propName": "rows",
+                "methodName": "handleRowsChange"
+            }, {
+                "propName": "tableId",
+                "methodName": "handleTableIdChange"
+            }, {
+                "propName": "noDataLabel",
+                "methodName": "handleNoDataLabelChange"
             }, {
                 "propName": "selectable",
-                "methodName": "handleSelectableChange"
+                "methodName": "handleConfigChange"
             }, {
-                "propName": "stickyColumn",
-                "methodName": "handleStickyColumnChange"
+                "propName": "resizable",
+                "methodName": "handleConfigChange"
             }, {
-                "propName": "columnWidths",
-                "methodName": "handleColumnWidthsChange"
+                "propName": "stickyColumn",
+                "methodName": "handleConfigChange"
             }, {
-                "propName": "rows",
-                "methodName": "handleRowsChange"
+                "propName": "stickyHeader",
+                "methodName": "handleConfigChange"
             }, {
                 "propName": "selected",
                 "methodName": "handleSelectedChange"