@sellmate/design-system 0.0.55 → 1.0.0

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

@@ -1,9 +1,9 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host, readTask, } from "@stencil/core";
 export class SdTable {
     el;
     columns;
     rows;
-    selected = new Set();
+    selected = [];
     rowKey = 'id';
     selectable = false;
     resizable = false;
@@ -14,6 +14,7 @@ export class SdTable {
     noDataLabel = '데이터가 없습니다.';
     isLoading = false;
     pagination;
+    headerCellRenderer;
     bodyCellRenderer;
     useInternalPagination = false;
     useRowsPerPageSelect = false;
@@ -23,6 +24,15 @@ export class SdTable {
         { label: '50개씩 보기', value: 50 },
         { label: '100개씩 보기', value: 100 },
     ];
+    useVirtualScroll = {}; // 가상 스크롤 사용 여부
+    virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
+    // 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
+    // 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
+    virtualColumnWidth = 120;
+    virtualBufferSize = {
+        vertical: 5,
+        horizontal: 5,
+    }; // 가상 스크롤 위아래 버퍼 크기
     sdSelectChange;
     sdPageChange;
     sdRowsPerPageChange;
@@ -32,49 +42,247 @@ export class SdTable {
     columnWidths = [];
     scrolledLeft = false;
     scrolledRight = false;
+    // 세로 가상 스크롤 상태값
+    virtualStartIndex = 0;
+    virtualEndIndex = 0;
+    scrollTopPosition = 0;
+    // 가로 가상 스크롤 상태값
+    virtualStartColIdx = 0;
+    virtualEndColIdx = 0;
+    scrollLeftPosition = 0;
+    // 가상 스크롤 Raf(Request Animation Frame) 관리
+    scrollRequestAnimationFrame = null;
+    scrollContainer = null;
+    rafScheduled = false;
+    pendingUpdates = {
+        vertical: false,
+        horizontal: false,
+    };
+    // 상태 캐시값
+    cachedVisibleColumns = null;
+    lastColumnsRef = null;
+    cachedVirtualRows = null;
+    cachedVirtualIndexKey = '';
+    cachedColumnOrder = null;
+    lastColumnOrderKey = '';
+    // DOM 측정 캐시값
+    cachedContainerHeight = 0;
+    cachedContainerWidth = 0;
+    // 스타일 캐시
+    stickyStyleCache = new Map();
+    // isAllChecked 캐시
+    cachedIsAllChecked;
+    lastSelectionKey = '';
+    onScroll;
     handleColumnsChange(newCols) {
         this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+        this.cleanUpVirtualCache();
+        this.stickyStyleCache.clear();
+        if (this.useVirtualScroll.horizontal) {
+            this.scheduleUpdate('horizontal');
+        }
+    }
+    handleColumnWidthsChange() {
+        this.stickyStyleCache.clear();
+        if (this.useVirtualScroll.horizontal) {
+            this.scheduleUpdate('horizontal');
+        }
     }
     handleRowsChange(newRows) {
         this.innerRows = [...newRows];
+        this.cleanUpVirtualCache();
+        if (this.useVirtualScroll.vertical) {
+            this.scheduleUpdate('vertical');
+        }
     }
     handleSelectedChange(newSelected) {
         this.innerSelected = new Set(newSelected);
     }
+    cleanUpVirtualCache() {
+        this.cachedVisibleColumns = null;
+        this.lastColumnsRef = null;
+        this.cachedVirtualRows = null;
+        this.cachedVirtualIndexKey = '';
+        this.cachedColumnOrder = null;
+        this.lastColumnOrderKey = '';
+    }
     handlePaginationChange(newVal) {
-        if (newVal?.page && newVal.page !== this.currentPage)
+        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();
+            }
+        }
     }
     componentWillLoad() {
         this.innerRows = [...(this.rows || [])];
-        this.innerSelected = new Set(this.selected);
+        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;
+        }
     }
     componentDidLoad() {
-        // SSR 환경 체크
-        if (typeof window === 'undefined')
+        readTask(() => {
+            const middle = this.el.querySelector('.sd-table__middle');
+            if (!middle)
+                return;
+            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 newScrolledLeft = scrollLeft > 0;
+                const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
+                if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
+                    this.scrolledLeft = newScrolledLeft;
+                    this.scrolledRight = newScrolledRight;
+                }
+                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;
+                    });
+                }
+            };
+            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 });
+                    if (this.useVirtualScroll.vertical) {
+                        this.calculateVisibleRange();
+                    }
+                    if (this.useVirtualScroll.horizontal) {
+                        this.calculateVisibleColumnRange();
+                    }
+                    this.onScroll();
+                }
+            });
+        });
+    }
+    changePage(page) {
+        if (!this.useInternalPagination) {
+            this.sdPageChange.emit(page);
             return;
-        const middle = this.el.querySelector('.sd-table__middle');
-        if (!middle)
+        }
+        this.currentPage = page;
+        this.sdPageChange.emit(this.currentPage);
+    }
+    changeRowsPerPage(perPage) {
+        const changedRowsPerPage = perPage ? Number(perPage) : 0;
+        if (!this.useInternalPagination) {
+            this.sdRowsPerPageChange.emit(changedRowsPerPage);
             return;
-        const onScroll = () => {
-            const { scrollLeft, scrollWidth, clientWidth } = middle;
-            this.scrolledLeft = scrollLeft > 0;
-            this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
+        }
+        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,
         };
-        middle.addEventListener('scroll', onScroll, { passive: true });
-        onScroll();
+        this.currentPage = newCurrentPage;
+        this.sdRowsPerPageChange.emit(changedRowsPerPage);
+    }
+    disconnectedCallback() {
+        if (this.scrollContainer && this.onScroll) {
+            this.scrollContainer.removeEventListener('scroll', this.onScroll);
+        }
+        if (this.scrollRequestAnimationFrame !== null) {
+            cancelAnimationFrame(this.scrollRequestAnimationFrame);
+        }
     }
     // ----- Derived getters -----
     get visibleColumns() {
-        return this.columns.filter(col => col.visible !== false);
+        if (this.cachedVisibleColumns && this.lastColumnsRef === this.columns) {
+            return this.cachedVisibleColumns;
+        }
+        this.lastColumnsRef = this.columns;
+        this.cachedVisibleColumns = this.columns.filter(col => col.visible !== false);
+        return this.cachedVisibleColumns;
     }
     get paginatedRows() {
         if (!this.pagination || !this.useInternalPagination)
             return this.innerRows;
         const { rowsPerPage = this.rows.length } = this.pagination || {};
-        const result = this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
-        return result;
+        return this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
+    }
+    get virtualRows() {
+        const newVirtualIndexKey = `${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 }));
+        }
+        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;
+    }
+    getHorizontalSpacerWidth(position) {
+        const stickyLeftCount = this.stickyColumn.left || 0;
+        const stickyRightCount = this.stickyColumn.right || 0;
+        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.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);
+    }
+    get leftSpacerWidth() {
+        if (!this.useVirtualScroll.horizontal || this.virtualStartColIdx === 0) {
+            return 0;
+        }
+        return this.getHorizontalSpacerWidth('left');
+    }
+    get rightSpacerWidth() {
+        if (!this.useVirtualScroll.horizontal) {
+            return 0;
+        }
+        return this.getHorizontalSpacerWidth('right');
+    }
+    get totalVirtualHeight() {
+        if (!this.useVirtualScroll.vertical)
+            return 0;
+        return this.paginatedRows.length * this.virtualRowHeight;
     }
     get lastPageNumber() {
         const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
@@ -96,20 +304,23 @@ export class SdTable {
             .join(' ');
     }
     // ----- Selection -----
-    //  private isRowSelected(row: Row): boolean {
-    //   return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
-    //  }
-    //  private updateRowSelect(row: Row) {
-    //   const selectedArray = Array.from(this.innerSelected);
-    //   const exists = this.isRowSelected(row);
-    //   const newSelected = exists
-    //    ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
-    //    : [...selectedArray, row];
-    //   // 동일 상태면 set하지 않음 → 불필요 렌더 방지
-    //   if (newSelected.length === selectedArray.length) return;
-    //   this.innerSelected = new Set(newSelected);
-    //   this.sdSelectChange.emit(Array.from(this.innerSelected));
-    //  }
+    isRowSelected(row) {
+        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+    }
+    updateRowSelect(row) {
+        const selectedArray = Array.from(this.innerSelected);
+        const exists = this.isRowSelected(row);
+        const newSelected = exists
+            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
+            : [...selectedArray, row];
+        // 동일 상태면 set하지 않음 → 불필요 렌더 방지
+        if (newSelected.length === selectedArray.length)
+            return;
+        this.innerSelected = new Set(newSelected);
+        this.cachedIsAllChecked = undefined;
+        this.selected = Array.from(this.innerSelected);
+        this.sdSelectChange.emit(Array.from(this.innerSelected));
+    }
     toggleSelectAll(checked) {
         if (checked) {
             const pageRows = new Set([...this.paginatedRows]);
@@ -119,30 +330,153 @@ export class SdTable {
             const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
             this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
         }
+        this.cachedIsAllChecked = undefined;
+        this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     get isAllChecked() {
+        const selectionKey = `${this.paginatedRows.length}-${this.innerSelected.size}`;
+        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 => selectedRow[this.rowKey] === row[this.rowKey])).length;
-        if (selectedCount === 0)
-            return false; // 아무것도 안 선택됨
-        if (selectedCount === total)
-            return true; // 전부 선택됨
-        return null; // 일부만 선택됨
+        let result;
+        if (selectedCount === 0) {
+            result = false; // 아무것도 안 선택됨
+        }
+        else if (selectedCount === total) {
+            result = true; // 전부 선택됨
+        }
+        else {
+            result = null; // 일부만 선택됨
+        }
+        this.cachedIsAllChecked = result;
+        this.lastSelectionKey = selectionKey;
+        return result;
+    }
+    // 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;
+            });
+        }
+    }
+    // 세로 가상 스크롤 렌더링 계산
+    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;
+        }
+    }
+    // 가로 가상 스크롤 렌더링 계산
+    calculateVisibleColumnRange() {
+        if (!this.useVirtualScroll.horizontal) {
+            this.virtualStartColIdx = 0;
+            this.virtualEndColIdx = this.visibleColumns.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 = this.stickyColumn.left || 0;
+        const stickyRightCount = this.stickyColumn.right || 0;
+        // 가상 스크롤 컬럼 - sticky column 제외
+        const virtualColumns = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        if (virtualColumns.length === 0) {
+            this.virtualStartColIdx = 0;
+            this.virtualEndColIdx = 0;
+            return;
+        }
+        const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
+            (this.selectable ? 52 : 0);
+        const stickyRightWidth = this.columnWidths
+            .slice(this.visibleColumns.length - stickyRightCount)
+            .reduce((sum, width) => sum + width, 0);
+        // 가상 스크롤 영역의 너비 계산
+        const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
+        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.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;
+        }
     }
     // ----- 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 rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        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;
     }
     handleResize(index, event) {
         // SSR 환경 체크
@@ -151,7 +485,12 @@ export class SdTable {
         const startX = event.clientX;
         const startWidth = this.columnWidths[index];
         const handleMouseMove = (moveEvent) => {
-            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);
+            const targetColumn = this.columnWidths[index];
+            if (!targetColumn)
+                return;
+            const minWidth = this.columns[index]?.minWidth || 50;
+            const maxWidth = this.columns[index]?.maxWidth || 9999;
+            const newWidth = Math.min(Math.max(startWidth + moveEvent.clientX - startX, minWidth), maxWidth);
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
         };
         const handleMouseUp = () => {
@@ -161,62 +500,152 @@ export class SdTable {
         document.addEventListener('mousemove', handleMouseMove);
         document.addEventListener('mouseup', handleMouseUp);
     }
-    //  private getCellValue(column: SdTableColumn, row: Row) {
-    //   const { field, format, name } = column;
-    //   const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
-    //   return format ? format(value, row) : value;
-    //  }
+    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 orderKey = `${this.visibleColumns.length}-${this.virtualStartColIdx}-${this.virtualEndColIdx}`;
+        if (this.cachedColumnOrder && this.lastColumnOrderKey === orderKey) {
+            return this.cachedColumnOrder;
+        }
+        const stickyLeftCount = this.stickyColumn.left || 0;
+        const stickyRightCount = this.stickyColumn.right || 0;
+        // Sticky left 컬럼들
+        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
+        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
+        const middleCols = this.useVirtualScroll.horizontal
+            ? this.visibleColumns
+                .slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
+                .slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
+            : this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        this.cachedColumnOrder = {
+            stickyLeftCount,
+            stickyRightCount,
+            stickyLeftCols,
+            middleCols,
+            stickyRightCols,
+        };
+        this.lastColumnOrderKey = orderKey;
+        return this.cachedColumnOrder;
+    }
     // ----- Render -----
-    renderHeader() {
-        return (h("thead", null, h("sd-tr", null, this.selectable && (h("sd-th", { class: {
+    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': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
             }, style: {
                 '--sticky-left-offset': '0px',
-            } }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (h("sd-th", { key: col.name, class: {
-                'sd-th': true,
-                [`${col.thClass}`]: Boolean(col.thClass),
-                'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
-                'sticky-right': Boolean(this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right),
-                'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
-                'sticky-right-edge': Boolean(this.stickyColumn.right &&
-                    colIdx === this.visibleColumns.length - this.stickyColumn.right),
-            }, style: this.getStickyStyle(colIdx) }, 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(colIdx, evt) }))))))));
+            } }, h("sd-checkbox", { value: this.isAllChecked, disabled: !this.paginatedRows.length, onSdUpdate: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
+            const rendered = this.headerCellRenderer?.(col);
+            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" }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (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.renderSpacerTd('left', -1), middleCols.map((col, relativeIdx) => {
+            const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
+            const rendered = this.headerCellRenderer?.(col);
+            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" }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (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.renderSpacerTd('right', -1), stickyRightCols.map((col, relativeIdx) => {
+            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
+            const rendered = this.headerCellRenderer?.(col);
+            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" }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (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) }))));
+        }))));
+    }
+    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')));
+    }
+    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': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, h("sd-checkbox", { value: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdUpdate: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
+            const rendered = this.bodyCellRenderer?.(column, row);
+            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}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+        }), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
+            const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
+            const rendered = this.bodyCellRenderer?.(column, row);
+            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}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+        }), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
+            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
+            const rendered = this.bodyCellRenderer?.(column, row);
+            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}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+        })));
+    }
+    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.visibleColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton", style: {
+                '--row-height': `${this.virtualRowHeight}px`,
+            } }))));
+    }
+    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)
+            return null;
+        return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: {
+                width: `${spacerWidth}px`,
+                minWidth: `${spacerWidth}px`,
+                maxWidth: `${spacerWidth}px`,
+                padding: '0',
+                border: 'none',
+            }, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Host, { key: '2ebf8e9464f1cdf23182fca5c51b16a05bfe0dd7' }, h("div", { key: 'd4fc8f59fd9b9d161514149a27746d83f99dc0f4', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: 'e6ec01e7493b69bab1bf2766d9c322cee388b274' }, h("div", { key: 'cc717d111a6ce64c34b6a23b1feb9cc8933a0438', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '0788f53b9e0945d4bdc0c0d57c946c3771034772', class: "sd-table__container" }, h("div", { key: 'a784983bbd7fcc36d92a54bd3dbfa0726e03abbe', class: "sd-table__middle", role: "table" }, h("div", { key: '17c733dd95289a3c96ed6715905c874c97a83815', part: "table", class: this.sdTableClasses }, this.renderHeader(), h("sd-tbody", { key: '9c4190b99f8c25479860b2caf330a0153a995215' }, h("slot", { key: '135f42fe21f830703b7e04acfdcd8a572b6dbf50' })))), h("div", { key: '5e8955886809083ad94bf77c68cc5cc69ca893ac', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'c1c9fa082e817f4df5e393d21fb749c78f40db02', class: "sd-table__pagination" }, h("sd-pagination", { key: 'a10b36dbf2ae6fa80ee69f945e0577b38fd0fcee', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
-                if (!this.useInternalPagination) {
-                    this.sdPageChange.emit(e.detail);
-                }
-                else {
-                    this.currentPage = e.detail;
-                    this.sdPageChange.emit(this.currentPage);
-                }
-            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '005995ad1681f5e7dc16b0a711e87eccc2bedb01', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
-                const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
-                if (!this.useInternalPagination) {
-                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
-                }
-                else {
-                    const newRowsPerPage = Number(e.detail.value || 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.sdRowsPerPageChange.emit(changedRowsPerPage);
-                }
-            } })))))));
+            } }, h("div", { key: '0c89a798a475bb25c10c5959b5e50c81f01503c4', class: "sd-table__container", style: {
+                '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
+            } }, h("div", { key: 'e83ee499928d95e719ffca0411a422deeed162d0', class: {
+                'sd-table__middle': true,
+                'sd-table__middle--scrollable': this.paginatedRows.length > 0,
+                'sd-table__middle--loading': this.isLoading,
+            } }, this.isLoading && (h("div", { key: '30d8283122a21484e0029128e637fdd9a5c6ae8c', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '92911a08fa4d0776712e8c30be2f16d59d512cbc' }))), h("table", { key: '209eb39f61bb46e9027046be619da492be2b080e', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'cb1fccb96bb51a4e14d40c2ff286f17d8bc8ce11', class: "sd-table__bottom" }, h("div", { key: '9149ee50257114145d14e0666239f72dcfc5b01a', class: "sd-table__no-data" }, h("slot", { key: 'a5ead23bc5a2e32418473f6f6737f3b156177842', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'd5482e1bb04d20579a88841bf8d885d08c1593b1', class: "sd-table__pagination" }, h("sd-pagination", { key: '65425eff37a1f2c1add27b8923cd86fe8d98ba98', 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: 'dfb3ba8654e33dc334392f37189f422d6a1f1416', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get is() { return "sd-table"; }
     static get originalStyleUrls() {
@@ -281,13 +710,9 @@ export class SdTable {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "Set<Row>",
-                    "resolved": "Set<Row>",
+                    "original": "Row[]",
+                    "resolved": "Row[]",
                     "references": {
-                        "Set": {
-                            "location": "global",
-                            "id": "global::Set"
-                        },
                         "Row": {
                             "location": "local",
                             "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table.tsx",
@@ -303,7 +728,7 @@ export class SdTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "new Set()"
+                "defaultValue": "[]"
             },
             "rowKey": {
                 "type": "string",
@@ -498,6 +923,33 @@ export class SdTable {
                 "getter": false,
                 "setter": false
             },
+            "headerCellRenderer": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(column: SdTableColumn) => HTMLElement | string | null | undefined",
+                    "resolved": "((column: SdTableColumn) => string | HTMLElement | null | undefined) | undefined",
+                    "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"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "bodyCellRenderer": {
                 "type": "unknown",
                 "mutable": false,
@@ -593,6 +1045,82 @@ 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 ]"
+            },
+            "useVirtualScroll": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ vertical?: boolean; horizontal?: boolean }",
+                    "resolved": "{ vertical?: boolean | undefined; horizontal?: boolean | undefined; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "virtualRowHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "virtual-row-height",
+                "defaultValue": "44"
+            },
+            "virtualColumnWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "virtual-column-width",
+                "defaultValue": "120"
+            },
+            "virtualBufferSize": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ vertical?: number; horizontal?: number }",
+                    "resolved": "{ vertical?: number | undefined; horizontal?: number | undefined; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n  vertical: 5,\n  horizontal: 5,\n }"
             }
         };
     }
@@ -603,7 +1131,13 @@ export class SdTable {
             "innerSelected": {},
             "columnWidths": {},
             "scrolledLeft": {},
-            "scrolledRight": {}
+            "scrolledRight": {},
+            "virtualStartIndex": {},
+            "virtualEndIndex": {},
+            "scrollTopPosition": {},
+            "virtualStartColIdx": {},
+            "virtualEndColIdx": {},
+            "scrollLeftPosition": {}
         };
     }
     static get events() {
@@ -665,6 +1199,9 @@ export class SdTable {
         return [{
                 "propName": "columns",
                 "methodName": "handleColumnsChange"
+            }, {
+                "propName": "columnWidths",
+                "methodName": "handleColumnWidthsChange"
             }, {
                 "propName": "rows",
                 "methodName": "handleRowsChange"