@sellmate/design-system 0.0.48 → 0.0.49

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

@@ -113,7 +113,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: 'b24b7f844564365e887dc8cee8b98e26a94961cd' });
+        return h("slot", { key: '2f6a1908864a2b5bbe86127fbf41b6b44a599666' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -13,10 +13,10 @@ export class SdProgress {
         error: '#FB4444',
     };
     render() {
-        return (h(Host, { key: 'e5a1be5c3343e0645db107b076fac36d1a935ca7', style: {
+        return (h(Host, { key: 'fa4a0bdd1e76231bc3ff349c5e94a18f1d747bf4', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'd2676df17ad3474f88d3c0972802a7b373b5652e', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '2c356835e29ec88765f0be0efbe9ee416f1e27ea', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: 'f1874b4e539573ddaa48cb2bdc9d13ea96bf350e' }, h("div", { key: '5a3bbd66f6623a1c02d5e1295bb974e82883b8a1', class: {
+        return (h(Host, { key: '70eafe63e44409063337d0a43846c3be869086df' }, h("div", { key: '21cafb06d87968387f9b9ec91fdd09643cded1ca', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -208,11 +208,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '0e488c3906b12e73abc6e6216e14b2b4e6a130c8', style: style }, h("div", { key: '714a95f446631269a19e44d098ef0dc81c7c6fd5', class: {
+        return (h(Host, { key: '71bf4aa9bb298ddd42fa2df53ffcaa75acd17811', style: style }, h("div", { key: '9f0970babd424f097b82acab1e93d4922cd5a36e', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '08912b8586c926107cbcaed28b73bd6eb94d47d9', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '57d243584fdf590139ec3436c473d54daa477e36', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: 'e96411f172ed4ed5359fef2a124bf49df88e10ec', class: {
+        return (h("div", { key: '1fb3028e6869ec0d77878dd577ad9f4f711edc38', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'fa9464cac1ee58b46b983f17882eeb847e3dc9b7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'f9a7ab839d566671d6ee9e7164424d307a81f2d6', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '5d2f2564587c376d4708921e5eb68bc1d41039ab', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '0d4e839a0a091d47f0a07f8a248fbc71cf2b67a3', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'ee27fb5e2d14acf898c7ce1e22b8cbffe59cec31', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'aaf9552da0a665ac34848ab5649d5993133394c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '6ff97d5a3c84e97a4712d98f04b4cf5a5fef1895', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '861bc3ff0ac64af5482783e7412f1ec706fe90e4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTbody {
     render() {
-        return (h(Host, { key: 'b94310b0ad1566cf9ccbac3ccdc5fbcdd2e53f8c' }, h("slot", { key: '382fb835aa4516adad374443556084703b8560c3' })));
+        return (h(Host, { key: 'f981fe2f39d8d1f292f018fba5f6f28f6606fc12' }, h("slot", { key: 'ae556a0c16e782d1842fabc1cb54a495b88f1ce5' })));
     }
     static get is() { return "sd-tbody"; }
     static get originalStyleUrls() {

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

@@ -5,11 +5,11 @@ export class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (h(Host, { key: '87c947cf0092ac524cdfed0be5f1703685a64db6', role: "cell", class: {
+        return (h(Host, { key: '3fe3f8f4ec5b068bda0edd22ebbc5c973ae75b15', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, h("slot", { key: '4369629e345d8cc5bb17166d6877dba421522e4d' })));
+            }, style: this.tdStyle }, h("slot", { key: 'f94a99bafb7723389304e01f809b3003deda067c' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTh {
     render() {
-        return (h(Host, { key: 'cf30b704166adc6d7de5ade8d455d34ecf575199', role: "columnheader" }, h("slot", { key: '7863306b924a749aba5ba55f70b8b3d5c205d133' })));
+        return (h(Host, { key: '59aee067627e3ac7c23ea5d9f9401c19a00203bd', role: "columnheader" }, h("slot", { key: 'ea015f9ebcdccd3e08aab46af4e2a8bcb46e4a3a' })));
     }
     static get is() { return "sd-th"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTr {
     render() {
-        return (h(Host, { key: '2cfec32649fa440cb44f83392c439e58dcb24644', role: "row" }, h("slot", { key: '0146af3690a7a6445b65893f86e0b9e5cd1d8a02' })));
+        return (h(Host, { key: '90de593581b21ca801462331e50126899946bf43', role: "row" }, h("slot", { key: '58eb2f9b52a36495afe40899d45bd6d1ba62b5d4' })));
     }
     static get is() { return "sd-tr"; }
     static get originalStyleUrls() {

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

@@ -40,12 +40,27 @@
 .sd-table__wrapper .sd-table__container .sd-table__middle {
   overflow: auto;
   will-change: scroll-position;
+  min-height: var(--table-container-height, auto);
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle--scrollable {
   height: var(--table-container-height, auto);
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle--loading {
   overflow: hidden !important;
+  pointer-events: none;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--table-width, 100%);
+  height: var(--table-container-height, 100%);
+  min-height: var(--table-container-height, 100%);
+  background: rgba(255, 255, 255, 0.6);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table {
   background-color: white;
@@ -203,19 +218,6 @@
   border-left: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: var(--table-width, 100%);
-  height: var(--table-container-height, 100%);
-  min-height: var(--table-container-height, 100%);
-  background: rgba(255, 255, 255, 0.6);
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td {
   height: 44px;
   padding: 0 16px;
@@ -259,11 +261,11 @@
 }
 .sd-table__wrapper .sd-table__virtual-spacer,
 .sd-table__wrapper .sd-table__virtual-row-spacer {
-  padding: 0;
+  padding: 0 !important;
 }
 .sd-table__wrapper .sd-table__virtual-spacer td,
 .sd-table__wrapper .sd-table__virtual-row-spacer td {
-  padding: 0;
+  padding: 0 !important;
   border: none;
 }
 .sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,

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

@@ -1,4 +1,4 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host, readTask, } from "@stencil/core";
 export class SdTable {
     el;
     columns;
@@ -50,6 +50,7 @@ export class SdTable {
     virtualStartColIdx = 0;
     virtualEndColIdx = 0;
     scrollLeftPosition = 0;
+    // 가상 스크롤 Raf(Request Animation Frame) 관리
     scrollRequestAnimationFrame = null;
     scrollContainer = null;
     rafScheduled = false;
@@ -57,19 +58,39 @@ export class SdTable {
         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');
         }
@@ -77,11 +98,19 @@ export class SdTable {
     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) {
             this.currentPage = newVal.page;
             if (this.useVirtualScroll.vertical && this.scrollContainer) {
-                this.scrollContainer.scrollTop = 0;
+                this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
                 this.scrollTopPosition = 0;
                 this.calculateVisibleRange();
             }
@@ -96,66 +125,120 @@ export class SdTable {
         }
     }
     componentDidLoad() {
-        // SSR 환경 체크
-        if (typeof window === 'undefined')
-            return;
-        const middle = this.el.querySelector('.sd-table__middle');
-        if (!middle)
-            return;
-        this.scrollContainer = middle;
-        const onScroll = () => {
-            const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
-            this.scrolledLeft = scrollLeft > 0;
-            this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
-            // 실제 변경사항이 있을 때만 RAF 스케줄
-            const verticalChanged = this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop;
-            const horizontalChanged = this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft;
-            if (verticalChanged || horizontalChanged) {
-                if (this.scrollRequestAnimationFrame !== null) {
-                    cancelAnimationFrame(this.scrollRequestAnimationFrame);
+        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;
                 }
-                this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
-                    if (verticalChanged) {
-                        this.scrollTopPosition = scrollTop;
-                        this.calculateVisibleRange();
-                    }
-                    if (horizontalChanged) {
-                        this.scrollLeftPosition = scrollLeft;
-                        this.calculateVisibleColumnRange();
+                if (verticalChanged || horizontalChanged) {
+                    if (this.scrollRequestAnimationFrame !== null) {
+                        cancelAnimationFrame(this.scrollRequestAnimationFrame);
                     }
-                    this.scrollRequestAnimationFrame = null;
-                });
-            }
+                    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 });
+                    this.onScroll();
+                }
+            });
+        });
+    }
+    changePage(page) {
+        if (!this.useInternalPagination) {
+            this.sdPageChange.emit(page);
+            return;
+        }
+        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 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) {
-            return this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
+            this.cachedVirtualRows = this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
         }
-        return this.paginatedRows
-            .slice(this.virtualStartIndex, this.virtualEndIndex + 1)
-            .map((row, relativeIdx) => ({
-            row,
-            actualIndex: this.virtualStartIndex + relativeIdx,
-        }));
+        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)
@@ -228,6 +311,7 @@ export class SdTable {
         if (newSelected.length === selectedArray.length)
             return;
         this.innerSelected = new Set(newSelected);
+        this.cachedIsAllChecked = undefined;
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     toggleSelectAll(checked) {
@@ -239,16 +323,29 @@ 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.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) {
@@ -274,13 +371,22 @@ export class SdTable {
             return;
         }
         const scrollTop = this.scrollTopPosition;
-        const containerHeight = this.scrollContainer?.clientHeight || 0;
+        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;
-        const bufferSize = this.virtualBufferSize.vertical || 5;
-        this.virtualStartIndex = Math.max(0, startIndex - bufferSize);
-        this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
+        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() {
@@ -290,7 +396,12 @@ export class SdTable {
             return;
         }
         const scrollLeft = this.scrollLeftPosition;
-        const containerWidth = this.scrollContainer?.clientWidth || 0;
+        // 캐시된 값 사용, 없으면 측정 후 캐시
+        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 제외
@@ -330,22 +441,34 @@ export class SdTable {
             }
         }
         const bufferSize = this.virtualBufferSize.horizontal || 5;
-        this.virtualStartColIdx = Math.max(0, startIdx - bufferSize);
-        this.virtualEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
+        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 환경 체크
@@ -375,6 +498,10 @@ export class SdTable {
         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 컬럼들
@@ -385,13 +512,15 @@ export class SdTable {
                 .slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
                 .slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
             : this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        return {
+        this.cachedColumnOrder = {
             stickyLeftCount,
             stickyRightCount,
             stickyLeftCols,
             middleCols,
             stickyRightCols,
         };
+        this.lastColumnOrderKey = orderKey;
+        return this.cachedColumnOrder;
     }
     // ----- Render -----
     renderHead() {
@@ -429,7 +558,7 @@ export class SdTable {
         }))));
     }
     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.isLoading && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && this.renderSpacerRow('top'), this.paginatedRows.length > 0 &&
+        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')));
@@ -499,44 +628,16 @@ export class SdTable {
             }, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Host, { key: '658ead41c51d9f031c0334d91cad9a06811721b9' }, h("div", { key: 'c98a48d31b16cbd934e4ae47b55bcfeaa5db2520', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: '8c01d8c3b3428d0fccb37e337fd12412c7aee51a' }, h("div", { key: 'be41d64f4b9daaa1440f2a89e253ce487894758e', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '080fc2b81b016c4876cf90502952e49a5e468534', class: "sd-table__container", style: {
+            } }, h("div", { key: '580c4ca69d5374585eeacc756561e5caf2ea6e29', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: 'd56754a7cd4acc0505bb36d2d8a116a20d19c0e4', class: {
+            } }, h("div", { key: '2832a6e9078923daeefa28512450950abfca0aad', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, h("table", { key: '39d620db8e2f9ea585f8c73222687f59aaa830e6', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: 'dcd87252620d5fb95deda064e2a7b4e6871c9dc1', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: 'd31ea2dbc747385fb7f7a733725e0e34f24f4489', class: "sd-table__no-data" }, h("slot", { key: '8375b5f42dafa7d430ad33226500d2a84b099990', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '2b231be27d05c5bb52ff1c0ced255f10be449068', class: "sd-table__pagination" }, h("sd-pagination", { key: '45676f7c4c931896c6414fa8beb6a6c23e203e92', 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: '3f65639b064a27993dc62a8e4a5dc86b16aec4f8', 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);
-                }
-            } })))))));
+            } }, this.isLoading && (h("div", { key: '696cc35d6d3c58dabf92aa49dbff9a7034a0ed64', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '8cbd272006b64c4a6e10c87c58313a0792358451' }))), h("table", { key: 'de78dba38361cfebe39f8c3cddb57a1c93861ff6', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: '662407b29c2ea446d96553dd548bec11e8179185', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '3a475142c5da9cc40f92b761923415893a1366fa', class: "sd-table__no-data" }, h("slot", { key: '49e90e85516b6656c7019b4b33a50f6b36d949a8', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '460a669cb3841fdc7745e4acb774729910890b42', class: "sd-table__pagination" }, h("sd-pagination", { key: '971f5e41f8df09f4455cdf41f969e5f47d2aac99', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'ed37b8efc95ae51bf4c903a5c7c5a068ec9bfcca', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get is() { return "sd-table-backup"; }
     static get originalStyleUrls() {