@sellmate/design-system 0.0.46 → 0.0.47

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

@@ -14,6 +14,7 @@ export class SdTable {
     noDataLabel = '데이터가 없습니다.';
     isLoading = false;
     pagination;
+    headerCellRenderer;
     bodyCellRenderer;
     useInternalPagination = false;
     useRowsPerPageSelect = false;
@@ -23,9 +24,15 @@ export class SdTable {
         { label: '50개씩 보기', value: 50 },
         { label: '100개씩 보기', value: 100 },
     ];
-    useVirtualScroll = false; // 가상 스크롤 사용 여부
-    virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 가상 스크롤 사용시 필수값
-    virtualBufferSize = 5; // 가상 스크롤 위아래 버퍼 크기
+    useVirtualScroll = {}; // 가상 스크롤 사용 여부
+    virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
+    // 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
+    // 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
+    virtualColumnWidth = 120;
+    virtualBufferSize = {
+        vertical: 5,
+        horizontal: 5,
+    }; // 가상 스크롤 위아래 버퍼 크기
     sdSelectChange;
     sdPageChange;
     sdRowsPerPageChange;
@@ -35,17 +42,34 @@ export class SdTable {
     columnWidths = [];
     scrolledLeft = false;
     scrolledRight = false;
-    virtualStartIndex = 0; // 렌더링 시작 인덱스
-    virtualEndIndex = 0; // 렌더링 종료 인덱스
+    // 세로 가상 스크롤 상태값
+    virtualStartIndex = 0;
+    virtualEndIndex = 0;
     scrollTopPosition = 0;
+    // 가로 가상 스크롤 상태값
+    virtualStartColIdx = 0;
+    virtualEndColIdx = 0;
+    scrollLeftPosition = 0;
     scrollRequestAnimationFrame = null;
     scrollContainer = null;
     handleColumnsChange(newCols) {
         this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+        if (this.useVirtualScroll.horizontal) {
+            requestAnimationFrame(() => {
+                this.calculateVisibleColumnRange();
+            });
+        }
+    }
+    handleColumnWidthsChange() {
+        if (this.useVirtualScroll.horizontal) {
+            requestAnimationFrame(() => {
+                this.calculateVisibleColumnRange();
+            });
+        }
     }
     handleRowsChange(newRows) {
         this.innerRows = [...newRows];
-        if (this.useVirtualScroll) {
+        if (this.useVirtualScroll.vertical) {
             requestAnimationFrame(() => {
                 this.calculateVisibleRange();
             });
@@ -57,7 +81,7 @@ export class SdTable {
     handlePaginationChange(newVal) {
         if (newVal?.page && newVal.page !== this.currentPage) {
             this.currentPage = newVal.page;
-            if (this.useVirtualScroll && this.scrollContainer) {
+            if (this.useVirtualScroll.vertical && this.scrollContainer) {
                 this.scrollContainer.scrollTop = 0;
                 this.scrollTopPosition = 0;
                 this.calculateVisibleRange();
@@ -84,13 +108,21 @@ export class SdTable {
             const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
             this.scrolledLeft = scrollLeft > 0;
             this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
-            if (this.useVirtualScroll) {
+            if (this.useVirtualScroll.vertical || this.useVirtualScroll.horizontal) {
                 if (this.scrollRequestAnimationFrame !== null) {
                     cancelAnimationFrame(this.scrollRequestAnimationFrame);
                 }
                 this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
-                    this.scrollTopPosition = scrollTop;
-                    this.calculateVisibleRange();
+                    // 세로 가상 스크롤 계산
+                    if (this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop) {
+                        this.scrollTopPosition = scrollTop;
+                        this.calculateVisibleRange();
+                    }
+                    // 가로 가상 스크롤 계산
+                    if (this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft) {
+                        this.scrollLeftPosition = scrollLeft;
+                        this.calculateVisibleColumnRange();
+                    }
                     this.scrollRequestAnimationFrame = null;
                 });
             }
@@ -115,7 +147,7 @@ export class SdTable {
         return result;
     }
     get virtualRows() {
-        if (!this.useVirtualScroll) {
+        if (!this.useVirtualScroll.vertical) {
             return this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
         }
         return this.paginatedRows
@@ -126,18 +158,40 @@ export class SdTable {
         }));
     }
     get topSpacerHeight() {
-        if (!this.useVirtualScroll || this.virtualStartIndex === 0)
+        if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
             return 0;
         return this.virtualStartIndex * this.virtualRowHeight;
     }
     get bottomSpacerHeight() {
-        if (!this.useVirtualScroll)
+        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)
+        if (!this.useVirtualScroll.vertical)
             return 0;
         return this.paginatedRows.length * this.virtualRowHeight;
     }
@@ -196,8 +250,9 @@ export class SdTable {
             return true; // 전부 선택됨
         return null; // 일부만 선택됨
     }
+    // 세로 가상 스크롤 렌더링 계산
     calculateVisibleRange() {
-        if (!this.useVirtualScroll) {
+        if (!this.useVirtualScroll.vertical) {
             this.virtualStartIndex = 0;
             this.virtualEndIndex = this.paginatedRows.length - 1;
             return;
@@ -207,8 +262,60 @@ export class SdTable {
         const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
         const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
         const endIndex = startIndex + visibleCount;
-        this.virtualStartIndex = Math.max(0, startIndex - this.virtualBufferSize);
-        this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + this.virtualBufferSize);
+        const bufferSize = this.virtualBufferSize.vertical || 5;
+        this.virtualStartIndex = Math.max(0, startIndex - bufferSize);
+        this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
+    }
+    // 가로 가상 스크롤 렌더링 계산
+    calculateVisibleColumnRange() {
+        if (!this.useVirtualScroll.horizontal) {
+            this.virtualStartColIdx = 0;
+            this.virtualEndColIdx = this.visibleColumns.length - 1;
+            return;
+        }
+        const scrollLeft = this.scrollLeftPosition;
+        const containerWidth = this.scrollContainer?.clientWidth || 0;
+        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;
+        this.virtualStartColIdx = Math.max(0, startIdx - bufferSize);
+        this.virtualEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
     }
     // ----- Helpers -----
     getStickyStyle(colIdx) {
@@ -251,34 +358,71 @@ export class SdTable {
         const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
         return format ? format(value, row) : value;
     }
+    getColumnRenderedInOrder() {
+        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);
+        return {
+            stickyLeftCount,
+            stickyRightCount,
+            stickyLeftCols,
+            middleCols,
+            stickyRightCols,
+        };
+    }
     // ----- Render -----
-    renderHeader() {
+    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("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: { ...col.thStyle, ...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", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (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 ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.isLoading && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), this.useVirtualScroll && this.topSpacerHeight > 0 && (h("tr", { key: "virtual-top-spacer", style: {
+        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.isLoading && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && (h("tr", { key: "virtual-top-spacer", class: "sd-table__virtual-row-spacer", style: {
                 height: `${this.topSpacerHeight}px`,
-            }, "aria-hidden": "true" })), this.paginatedRows.length > 0 &&
-            this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll && this.bottomSpacerHeight > 0 && (h("tr", { key: "virtual-bottom-spacer", style: {
+            }, "aria-hidden": "true" }, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton" })))), this.paginatedRows.length > 0 &&
+            this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll.vertical && this.bottomSpacerHeight > 0 && (h("tr", { key: "virtual-bottom-spacer", class: "sd-table__virtual-row-spacer", style: {
                 height: `${this.bottomSpacerHeight}px`,
-            }, "aria-hidden": "true" }))));
+            }, "aria-hidden": "true" }, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton" }))))));
     }
     renderRow(row, rowIdx) {
-        return (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll
+        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`,
                 }
@@ -288,29 +432,61 @@ export class SdTable {
                 'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
             }, style: {
                 '--sticky-left-offset': '0px',
-            } }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
+            } }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => 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,
-                    '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),
                     [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(colIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+                }, 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)))));
         })));
     }
+    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" })));
+    }
     render() {
-        return (h(Host, { key: 'd197993fd67107e7a7d310cdc2f3c58a1edf988f' }, h("div", { key: '8176782d6413f05b8b088a35942c31c37584ea0d', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: '06caa893329f7de501804922dea824c01fc393bb' }, h("div", { key: '7b806f1fa25c60e11dd22cf67177c4856a576e76', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '9b158db9adedb593ecc1b6f024d237575a30be83', class: "sd-table__container" }, h("div", { key: '2152375a11adfde7ab0f5209bf86fde80b245ca7', class: {
+            } }, h("div", { key: '6d24df1310c746fe7742dbeee3750d62bd286c25', class: "sd-table__container", style: {
+                '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
+            } }, h("div", { key: 'de042c2e56baa207d1602b6d9cdcbe7d2c2780dd', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, h("table", { key: '024cffa35522fd73f53a873aef9679bcd53705ba', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: '05c66542866f68d96af6dd530f051e5054d5b6a0', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '09ed3481961c68427b85e5e973b1a94c30188af6', class: "sd-table__no-data" }, h("slot", { key: 'e754ed759750cfc3ac61c3b59ccc897cb263ea1b', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '390141abc35cd0bbc4c261943084e9f5ccd27c78', class: "sd-table__pagination" }, h("sd-pagination", { key: 'fa55c8ed7fc1cc811231fa4266e0021f8b03fc51', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, h("table", { key: 'f392dbedf10677e704e0dd6fc1233dc931e2e017', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: '99fa9cff08bd0599a63a34caba645e9893ea963d', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '3e135dd33d5188abbe753b03c9a0c6c6f38210dc', class: "sd-table__no-data" }, h("slot", { key: '144d91b72af6ca2b966e7d3de783eb09f6880b20', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '0ce235dc30c09823f3bc37b47dfd4d1941d3dbd8', class: "sd-table__pagination" }, h("sd-pagination", { key: 'e68be3464a8e8c6e99290e6ec3308d22c4238738', 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);
                 }
@@ -318,7 +494,7 @@ export class SdTable {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }), this.useRowsPerPageSelect && (h("sd-select", { key: 'c2463db21492100f4f78b87cac9fe62bcfaca9a2', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+            } }), this.useRowsPerPageSelect && (h("sd-select", { key: 'ba48f26b761cd65c5f52f4b4734be6c2a55120f1', 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);
@@ -620,6 +796,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-backup/sd-table-backup.tsx",
+                            "id": "src/components/sd-table-backup/sd-table-backup.tsx::SdTableColumn"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "bodyCellRenderer": {
                 "type": "unknown",
                 "mutable": false,
@@ -717,11 +920,11 @@ export class SdTable {
                 "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": "boolean",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "{ vertical?: boolean; horizontal?: boolean }",
+                    "resolved": "{ vertical?: boolean | undefined; horizontal?: boolean | undefined; }",
                     "references": {}
                 },
                 "required": false,
@@ -732,9 +935,7 @@ export class SdTable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "use-virtual-scroll",
-                "defaultValue": "false"
+                "defaultValue": "{}"
             },
             "virtualRowHeight": {
                 "type": "number",
@@ -756,7 +957,7 @@ export class SdTable {
                 "attribute": "virtual-row-height",
                 "defaultValue": "44"
             },
-            "virtualBufferSize": {
+            "virtualColumnWidth": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -773,8 +974,26 @@ export class SdTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "virtual-buffer-size",
-                "defaultValue": "5"
+                "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 }"
             }
         };
     }
@@ -788,7 +1007,10 @@ export class SdTable {
             "scrolledRight": {},
             "virtualStartIndex": {},
             "virtualEndIndex": {},
-            "scrollTopPosition": {}
+            "scrollTopPosition": {},
+            "virtualStartColIdx": {},
+            "virtualEndColIdx": {},
+            "scrollLeftPosition": {}
         };
     }
     static get events() {
@@ -850,6 +1072,9 @@ export class SdTable {
         return [{
                 "propName": "columns",
                 "methodName": "handleColumnsChange"
+            }, {
+                "propName": "columnWidths",
+                "methodName": "handleColumnWidthsChange"
             }, {
                 "propName": "rows",
                 "methodName": "handleRowsChange"