@sellmate/design-system 1.0.15 → 1.0.17

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

@@ -14,8 +14,6 @@ export class SdTable {
     noDataLabel = '데이터가 없습니다.';
     isLoading = false;
     pagination;
-    headerCellRenderer;
-    bodyCellRenderer;
     useInternalPagination = false;
     useRowsPerPageSelect = false;
     rowsPerPageOption = [
@@ -53,14 +51,13 @@ export class SdTable {
     // 가상 스크롤 Raf(Request Animation Frame) 관리
     scrollRequestAnimationFrame = null;
     scrollContainer = null;
+    resizeObserver = null;
     rafScheduled = false;
     pendingUpdates = {
         vertical: false,
         horizontal: false,
     };
     // 상태 캐시값
-    cachedVisibleColumns = null;
-    lastColumnsRef = null;
     cachedVirtualRows = null;
     cachedVirtualIndexKey = '';
     cachedColumnOrder = null;
@@ -75,13 +72,28 @@ export class SdTable {
     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');
+        this.columnWidths = this.getColumnWidths(newCols);
+        this.refreshColumnLayout();
+    }
+    handleUseVirtualScrollChange() {
+        this.columnWidths = this.getColumnWidths(this.columns || []);
+        this.refreshColumnLayout();
+        if (this.useVirtualScroll.vertical) {
+            this.scheduleUpdate('vertical');
         }
     }
+    handleVirtualColumnWidthChange() {
+        if (!this.useVirtualScroll.horizontal)
+            return;
+        this.columnWidths = this.getColumnWidths(this.columns || []);
+        this.refreshColumnLayout();
+    }
+    handleSelectableChange() {
+        this.refreshColumnLayout();
+    }
+    handleStickyColumnChange() {
+        this.refreshColumnLayout();
+    }
     handleColumnWidthsChange() {
         this.stickyStyleCache.clear();
         if (this.useVirtualScroll.horizontal) {
@@ -90,23 +102,38 @@ export class SdTable {
     }
     handleRowsChange(newRows) {
         this.innerRows = [...newRows];
-        this.cleanUpVirtualCache();
+        this.clearRowDerivedCache();
         if (this.useVirtualScroll.vertical) {
             this.scheduleUpdate('vertical');
         }
     }
     handleSelectedChange(newSelected) {
-        this.innerSelected = new Set(newSelected);
+        this.innerSelected = new Set(this.dedupeRowsByKey(newSelected || []));
+        this.clearSelectionCache();
     }
     cleanUpVirtualCache() {
-        this.cachedVisibleColumns = null;
-        this.lastColumnsRef = null;
         this.cachedVirtualRows = null;
         this.cachedVirtualIndexKey = '';
         this.cachedColumnOrder = null;
         this.lastColumnOrderKey = '';
     }
+    refreshColumnLayout() {
+        this.cleanUpVirtualCache();
+        this.stickyStyleCache.clear();
+        if (this.useVirtualScroll.horizontal) {
+            this.scheduleUpdate('horizontal');
+        }
+    }
+    clearSelectionCache() {
+        this.cachedIsAllChecked = undefined;
+        this.lastSelectionKey = '';
+    }
+    clearRowDerivedCache() {
+        this.cleanUpVirtualCache();
+        this.clearSelectionCache();
+    }
     handlePaginationChange(newVal) {
+        this.clearRowDerivedCache();
         if (newVal?.page && newVal.page !== this.currentPage) {
             this.currentPage = newVal.page;
             if (this.useVirtualScroll.vertical && this.scrollContainer) {
@@ -118,8 +145,8 @@ export class SdTable {
     }
     componentWillLoad() {
         this.innerRows = [...(this.rows || [])];
-        this.innerSelected = new Set(this.selected || []);
-        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
+        this.innerSelected = new Set(this.dedupeRowsByKey(this.selected || []));
+        this.columnWidths = this.getColumnWidths(this.columns || []);
         if (this.pagination?.page) {
             this.currentPage = this.pagination.page;
         }
@@ -165,6 +192,7 @@ export class SdTable {
                     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();
                     }
@@ -182,6 +210,12 @@ export class SdTable {
             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) {
@@ -202,24 +236,26 @@ export class SdTable {
             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 visibleColumns() {
-        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 tableColumns() {
+        return this.columns || [];
     }
     get paginatedRows() {
         if (!this.pagination || !this.useInternalPagination)
@@ -228,7 +264,10 @@ export class SdTable {
         return this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
     }
     get virtualRows() {
-        const newVirtualIndexKey = `${this.virtualStartIndex}-${this.virtualEndIndex}`;
+        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;
         }
@@ -258,9 +297,8 @@ export class SdTable {
         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 { 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;
@@ -295,52 +333,63 @@ export class SdTable {
             this.selectable && 'sd-table--selectable',
             this.resizable && 'sd-table--resizable',
             !this.innerRows.length && 'sd-table--no-data',
-            ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&
-                'sd-table--sticky-column',
+            this.hasStickyColumn && 'sd-table--sticky-column',
             this.scrolledLeft && 'sd-table--scrolled-left',
             this.scrolledRight && 'sd-table--scrolled-right',
         ]
             .filter(Boolean)
             .join(' ');
     }
+    get hasStickyColumn() {
+        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
+        return (this.selectable || stickyLeftCount > 0 || stickyRightCount > 0);
+    }
+    get hasStickyLeftDataColumn() {
+        return this.getNormalizedStickyCounts().stickyLeftCount > 0;
+    }
     // ----- Selection -----
     isRowSelected(row) {
-        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+        return Array.from(this.innerSelected).some(r => this.getRowKeyValue(r) === this.getRowKeyValue(row));
     }
     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.filter(r => this.getRowKeyValue(r) !== this.getRowKeyValue(row))
             : [...selectedArray, row];
         // 동일 상태면 set하지 않음 → 불필요 렌더 방지
         if (newSelected.length === selectedArray.length)
             return;
-        this.innerSelected = new Set(newSelected);
-        this.cachedIsAllChecked = undefined;
+        this.innerSelected = new Set(this.dedupeRowsByKey(newSelected));
+        this.clearSelectionCache();
         this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     toggleSelectAll(checked) {
+        const selectedRows = Array.from(this.innerSelected);
         if (checked) {
-            const pageRows = new Set([...this.paginatedRows]);
-            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
+            this.innerSelected = new Set(this.dedupeRowsByKey([...selectedRows, ...this.paginatedRows]));
         }
         else {
-            const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
+            const currentPageKeys = new Set(this.paginatedRows.map(r => this.getRowKeyValue(r)));
+            this.innerSelected = new Set(selectedRows.filter(r => !currentPageKeys.has(this.getRowKeyValue(r))));
         }
-        this.cachedIsAllChecked = undefined;
+        this.clearSelectionCache();
         this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     get isAllChecked() {
-        const selectionKey = `${this.paginatedRows.length}-${this.innerSelected.size}`;
+        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 => selectedRow[this.rowKey] === row[this.rowKey])).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; // 아무것도 안 선택됨
@@ -400,7 +449,7 @@ export class SdTable {
     calculateVisibleColumnRange() {
         if (!this.useVirtualScroll.horizontal) {
             this.virtualStartColIdx = 0;
-            this.virtualEndColIdx = this.visibleColumns.length - 1;
+            this.virtualEndColIdx = this.tableColumns.length - 1;
             return;
         }
         const scrollLeft = this.scrollLeftPosition;
@@ -410,10 +459,9 @@ export class SdTable {
             containerWidth = this.scrollContainer.clientWidth;
             this.cachedContainerWidth = containerWidth;
         }
-        const stickyLeftCount = this.stickyColumn.left || 0;
-        const stickyRightCount = this.stickyColumn.right || 0;
+        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
         // 가상 스크롤 컬럼 - sticky column 제외
-        const virtualColumns = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        const virtualColumns = this.tableColumns.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
         if (virtualColumns.length === 0) {
             this.virtualStartColIdx = 0;
             this.virtualEndColIdx = 0;
@@ -422,11 +470,11 @@ export class SdTable {
         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)
+            .slice(this.tableColumns.length - stickyRightCount)
             .reduce((sum, width) => sum + width, 0);
         // 가상 스크롤 영역의 너비 계산
         const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
-        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        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);
@@ -464,8 +512,9 @@ export class SdTable {
             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.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)
+            .filter((_, i) => i >= this.tableColumns.length - stickyRightCount && i > colIdx)
             .reduce((a, b) => a + b, 0);
         const style = {
             '--sticky-left-offset': `${leftOffset}px`,
@@ -478,6 +527,72 @@ export class SdTable {
         this.stickyStyleCache.set(colIdx, style);
         return style;
     }
+    startResizeObserver() {
+        if (!this.scrollContainer || typeof ResizeObserver === 'undefined')
+            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);
+        }
+        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];
+    }
+    dedupeRowsByKey(rows) {
+        const rowMap = new Map();
+        rows.forEach(row => {
+            rowMap.set(this.getRowKeyValue(row), row);
+        });
+        return Array.from(rowMap.values());
+    }
     handleResize(index, event) {
         // SSR 환경 체크
         if (typeof document === 'undefined')
@@ -485,11 +600,12 @@ export class SdTable {
         const startX = event.clientX;
         const startWidth = this.columnWidths[index];
         const handleMouseMove = (moveEvent) => {
-            const targetColumn = this.columnWidths[index];
-            if (!targetColumn)
+            const currentWidth = this.columnWidths[index];
+            if (!currentWidth)
                 return;
-            const minWidth = this.columns[index]?.minWidth || 50;
-            const maxWidth = this.columns[index]?.maxWidth || 9999;
+            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);
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
         };
@@ -506,20 +622,19 @@ export class SdTable {
         return format ? format(value, row) : value;
     }
     getColumnRenderedInOrder() {
-        const orderKey = `${this.visibleColumns.length}-${this.virtualStartColIdx}-${this.virtualEndColIdx}`;
+        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;
         }
-        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 stickyLeftCols = this.tableColumns.slice(0, stickyLeftCount);
+        const stickyRightCols = this.tableColumns.slice(this.tableColumns.length - stickyRightCount);
         const middleCols = this.useVirtualScroll.horizontal
-            ? this.visibleColumns
-                .slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
+            ? this.tableColumns
+                .slice(stickyLeftCount, this.tableColumns.length - stickyRightCount)
                 .slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
-            : this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+            : this.tableColumns.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
         this.cachedColumnOrder = {
             stickyLeftCount,
             stickyRightCount,
@@ -536,33 +651,31 @@ export class SdTable {
         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),
+                '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) => {
-            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) => {
+                }, 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;
-            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);
+                }, 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" }, 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) }))));
+                }, 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) }))));
         }))));
     }
     renderBody() {
@@ -580,46 +693,62 @@ export class SdTable {
                 : {} }, this.selectable && (h("td", { class: {
                 'sd-td': true,
                 'sd-td--selected': true,
-                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+                '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) => {
-            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)))));
+                }, 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;
-            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)))));
+                }, 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.visibleColumns.length - stickyRightCount + relativeIdx;
-            const rendered = this.bodyCellRenderer?.(column, row);
+            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}` }, 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}` }, 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: {
+            }, "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`,
             } }))));
     }
+    getSpacerCellStyle(spacerWidth) {
+        return {
+            width: `${spacerWidth}px`,
+            minWidth: `${spacerWidth}px`,
+            maxWidth: `${spacerWidth}px`,
+            padding: '0',
+            border: 'none',
+        };
+    }
+    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" })));
+    }
     renderSpacerTd(position, rowIdx) {
         const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
         const showSpacer = position === 'left'
@@ -627,25 +756,19 @@ export class SdTable {
             : 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" })));
+        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" })));
     }
     render() {
-        return (h(Fragment, { key: '7aea9a9b5854e18ba13760e12b801a355ea52add' }, h("div", { key: '5f2ae57e4ba8babba34bca163f7afa625a4a8c5d', class: "sd-table__wrapper", style: {
+        return (h(Fragment, { key: 'd5568bc96a6ec0e973eda494deacceef6ec4bce9' }, h("div", { key: '8ec11dd8a4e0cd9f32a9dccd345711e64d10043a', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '964adaf80c1ecabb83effc9f42a468434d0e8774', class: "sd-table__container", style: {
+            } }, h("div", { key: 'f96bbc29c77f6aaa46467d375a8a457938a27e13', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: '081ad3b8df8796cc71d81f6e77d8c8459ad75ffa', class: {
+            } }, h("div", { key: 'fe66db102a053e90ffe02d26a28ac225e90f1ea3', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '2c6c7a9f8f978118b5c9bf90eb3eff1d4ab918af', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '09ba19e6ad135e7bc5cfc2ced11e584eb4ce5dd5' }))), h("table", { key: 'f06d35afbbaf2c0a9787836d1adac3b3ddd9b562', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'eb594ff940a0c005b67369b433b1d53fb60660f2', class: "sd-table__bottom" }, h("div", { key: 'f9191f0643b4a50a37d7c2916ee7e52b1c2957e4', class: "sd-table__no-data" }, h("slot", { key: 'dabb530c384a0e8bffac1b9bdb8f68ea01c55c1c', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '48df8203d88221faa836b364c4cfb2728439c695', class: "sd-table__pagination" }, h("sd-pagination", { key: '6e3655ecc990a295fda78d05458dfce27ac66af5', 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: 'bfbb5f6f11e379ec4395ca9c3741bf7eb921a2e4', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: '0851750dd88030f05e413bbdb6a7911bbc259d00', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '557674426413df32198427509c8f50921b268212' }))), h("table", { key: 'f04e1c387e34523c3a77137b82457ace6aeeb74b', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'aca217244defe434eb44cea583e1b2d7b17431ef', class: "sd-table__bottom" }, h("div", { key: '19a1049a467f9aec618324b0268803ddfa52e0d5', class: "sd-table__no-data" }, h("slot", { key: 'a2170c15879dc9124eb41985e902c0119b5e45c1', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '6a12ce1409f35ff6ec9dd737829b4678b2ce2920', class: "sd-table__pagination" }, h("sd-pagination", { key: 'cec76c2c6f7dc276565e17f25ed42ea2f1578b02', 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: 'f868e4f6fc8f67e00d25914b189a82d342cc767a', 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() {
@@ -923,65 +1046,6 @@ 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,
-                "complexType": {
-                    "original": "(\n  column: SdTableColumn,\n  row: Row,\n ) => HTMLElement | string | null | undefined",
-                    "resolved": "((column: SdTableColumn, row: Row) => 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"
-                        },
-                        "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"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
             "useInternalPagination": {
                 "type": "boolean",
                 "mutable": false,
@@ -1032,7 +1096,8 @@ export class SdTable {
                         "SelectOption": {
                             "location": "import",
                             "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectOption"
+                            "id": "src/components/sd-select/sd-select.tsx::SelectOption",
+                            "referenceLocation": "SelectOption"
                         }
                     }
                 },
@@ -1199,6 +1264,18 @@ export class SdTable {
         return [{
                 "propName": "columns",
                 "methodName": "handleColumnsChange"
+            }, {
+                "propName": "useVirtualScroll",
+                "methodName": "handleUseVirtualScrollChange"
+            }, {
+                "propName": "virtualColumnWidth",
+                "methodName": "handleVirtualColumnWidthChange"
+            }, {
+                "propName": "selectable",
+                "methodName": "handleSelectableChange"
+            }, {
+                "propName": "stickyColumn",
+                "methodName": "handleStickyColumnChange"
             }, {
                 "propName": "columnWidths",
                 "methodName": "handleColumnWidthsChange"
@@ -1214,4 +1291,3 @@ export class SdTable {
             }];
     }
 }
-//# sourceMappingURL=sd-table.js.map