@sellmate/design-system 1.0.45 → 1.0.47

package/dist/esm/sd-table.entry.js

@@ -0,0 +1,814 @@
+import { r as registerInstance, c as createEvent, g as getElement, a as readTask, h, F as Fragment } from './index-B8tGP77V.js';
+
+const sdTableCss = () => `.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);display:flex;flex-direction:column;position:relative;border:1px solid #E1E1E1;border-radius:8px;font-size:12px;overflow:hidden;background:#FFFFFF}.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: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;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label{position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label:before,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#F5FAFF;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#F5FAFF}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#F5FAFF;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #E1E1E1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #E1E1E1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;flex:1;min-height:240px;translate:0 -10%;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{font-size:12px;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #E1E1E1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #E1E1E1 calc(var(--row-height, 44px) - 1px), #E1E1E1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}`;
+
+const SdTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdSelectChange = createEvent(this, "sdSelectChange");
+        this.sdPageChange = createEvent(this, "sdPageChange");
+        this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange");
+    }
+    get el() { return getElement(this); }
+    columns;
+    rows;
+    selected = [];
+    rowKey = 'id';
+    selectable = false;
+    resizable = false;
+    width;
+    height;
+    stickyHeader = false;
+    stickyColumn = { left: 0, right: 0 };
+    noDataLabel = '데이터가 없습니다.';
+    isLoading = false;
+    pagination;
+    useInternalPagination = false;
+    useRowsPerPageSelect = false;
+    rowsPerPageOption = [
+        { label: '10개씩 보기', value: 10 },
+        { label: '25개씩 보기', value: 25 },
+        { label: '50개씩 보기', value: 50 },
+        { label: '100개씩 보기', value: 100 },
+    ];
+    useVirtualScroll = {}; // 가상 스크롤 사용 여부
+    virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
+    // 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
+    // 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
+    virtualColumnWidth = 120;
+    virtualBufferSize = {
+        vertical: 5,
+        horizontal: 5,
+    }; // 가상 스크롤 위아래 버퍼 크기
+    sdSelectChange;
+    sdPageChange;
+    sdRowsPerPageChange;
+    currentPage = this.pagination?.page || 1;
+    innerRows = [];
+    innerSelected = new Set();
+    columnWidths = [];
+    scrolledLeft = false;
+    scrolledRight = false;
+    // 세로 가상 스크롤 상태값
+    virtualStartIndex = 0;
+    virtualEndIndex = 0;
+    scrollTopPosition = 0;
+    // 가로 가상 스크롤 상태값
+    virtualStartColIdx = 0;
+    virtualEndColIdx = 0;
+    scrollLeftPosition = 0;
+    // 가상 스크롤 Raf(Request Animation Frame) 관리
+    scrollRequestAnimationFrame = null;
+    scrollContainer = null;
+    resizeObserver = null;
+    rafScheduled = false;
+    pendingUpdates = {
+        vertical: false,
+        horizontal: false,
+    };
+    // 상태 캐시값
+    cachedVirtualRows = null;
+    cachedVirtualIndexKey = '';
+    cachedColumnOrder = null;
+    lastColumnOrderKey = '';
+    // DOM 측정 캐시값
+    cachedContainerHeight = 0;
+    cachedContainerWidth = 0;
+    // 스타일 캐시
+    stickyStyleCache = new Map();
+    // isAllChecked 캐시
+    cachedIsAllChecked;
+    lastSelectionKey = '';
+    onScroll;
+    handleColumnsChange(newCols) {
+        this.columnWidths = this.getColumnWidths(newCols);
+        this.refreshColumnLayout();
+    }
+    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) {
+            this.scheduleUpdate('horizontal');
+        }
+    }
+    handleRowsChange(newRows) {
+        this.innerRows = [...newRows];
+        this.clearRowDerivedCache();
+        if (this.useVirtualScroll.vertical) {
+            this.scheduleUpdate('vertical');
+        }
+    }
+    handleSelectedChange(newSelected) {
+        this.innerSelected = new Set(this.dedupeRowsByKey(newSelected || []));
+        this.clearSelectionCache();
+    }
+    cleanUpVirtualCache() {
+        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) {
+                this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
+                this.scrollTopPosition = 0;
+                this.calculateVisibleRange();
+            }
+        }
+    }
+    componentWillLoad() {
+        this.innerRows = [...(this.rows || [])];
+        this.innerSelected = new Set(this.dedupeRowsByKey(this.selected || []));
+        this.columnWidths = this.getColumnWidths(this.columns || []);
+        if (this.pagination?.page) {
+            this.currentPage = this.pagination.page;
+        }
+    }
+    componentDidLoad() {
+        readTask(() => {
+            const middle = this.el.querySelector('.sd-table__middle');
+            if (!middle)
+                return;
+            this.onScroll = () => {
+                const scrollLeft = middle.scrollLeft;
+                const scrollWidth = middle.scrollWidth;
+                const clientWidth = middle.clientWidth;
+                const scrollTop = middle.scrollTop;
+                const verticalChanged = this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop;
+                const horizontalChanged = this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft;
+                const newScrolledLeft = scrollLeft > 0;
+                const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
+                if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
+                    this.scrolledLeft = newScrolledLeft;
+                    this.scrolledRight = newScrolledRight;
+                }
+                if (verticalChanged || horizontalChanged) {
+                    if (this.scrollRequestAnimationFrame !== null) {
+                        cancelAnimationFrame(this.scrollRequestAnimationFrame);
+                    }
+                    this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
+                        if (verticalChanged) {
+                            this.scrollTopPosition = scrollTop;
+                            this.calculateVisibleRange();
+                        }
+                        if (horizontalChanged) {
+                            this.scrollLeftPosition = scrollLeft;
+                            this.calculateVisibleColumnRange();
+                        }
+                        this.scrollRequestAnimationFrame = null;
+                    });
+                }
+            };
+            this.scrollContainer = middle;
+            requestAnimationFrame(() => {
+                if (this.scrollContainer && this.onScroll) {
+                    this.cachedContainerHeight = this.scrollContainer.clientHeight;
+                    this.cachedContainerWidth = this.scrollContainer.clientWidth;
+                    middle.addEventListener('scroll', this.onScroll, { passive: true });
+                    this.startResizeObserver();
+                    if (this.useVirtualScroll.vertical) {
+                        this.calculateVisibleRange();
+                    }
+                    if (this.useVirtualScroll.horizontal) {
+                        this.calculateVisibleColumnRange();
+                    }
+                    this.onScroll();
+                }
+            });
+        });
+    }
+    changePage(page) {
+        if (!this.useInternalPagination) {
+            this.sdPageChange.emit(page);
+            return;
+        }
+        this.currentPage = page;
+        this.clearRowDerivedCache();
+        if (this.useVirtualScroll.vertical && this.scrollContainer) {
+            this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
+            this.scrollTopPosition = 0;
+            this.calculateVisibleRange();
+        }
+        this.sdPageChange.emit(this.currentPage);
+    }
+    changeRowsPerPage(perPage) {
+        const changedRowsPerPage = perPage ? Number(perPage) : 0;
+        if (!this.useInternalPagination) {
+            this.sdRowsPerPageChange.emit(changedRowsPerPage);
+            return;
+        }
+        const newRowsPerPage = Number(perPage || 0);
+        let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
+        let newCurrentPage = this.currentPage;
+        if (newCurrentPage > newLastPage) {
+            newCurrentPage = newLastPage;
+        }
+        this.pagination = {
+            page: newCurrentPage,
+            rowsPerPage: newRowsPerPage,
+            lastPage: newLastPage,
+        };
+        this.currentPage = newCurrentPage;
+        this.clearRowDerivedCache();
+        if (this.useVirtualScroll.vertical && this.scrollContainer) {
+            this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
+            this.scrollTopPosition = 0;
+            this.calculateVisibleRange();
+        }
+        this.sdRowsPerPageChange.emit(changedRowsPerPage);
+    }
+    disconnectedCallback() {
+        if (this.scrollContainer && this.onScroll) {
+            this.scrollContainer.removeEventListener('scroll', this.onScroll);
+        }
+        this.resizeObserver?.disconnect();
+        if (this.scrollRequestAnimationFrame !== null) {
+            cancelAnimationFrame(this.scrollRequestAnimationFrame);
+        }
+    }
+    // ----- Derived getters -----
+    get tableColumns() {
+        return this.columns || [];
+    }
+    get paginatedRows() {
+        if (!this.pagination || !this.useInternalPagination)
+            return this.innerRows;
+        const { rowsPerPage = this.rows.length } = this.pagination || {};
+        return this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
+    }
+    get virtualRows() {
+        const pageKey = this.useInternalPagination
+            ? `${this.currentPage}-${this.pagination?.rowsPerPage ?? 'all'}`
+            : 'all';
+        const newVirtualIndexKey = `${pageKey}-${this.innerRows.length}-${this.virtualStartIndex}-${this.virtualEndIndex}`;
+        if (this.cachedVirtualRows && this.cachedVirtualIndexKey === newVirtualIndexKey) {
+            return this.cachedVirtualRows;
+        }
+        this.cachedVirtualIndexKey = newVirtualIndexKey;
+        if (!this.useVirtualScroll.vertical) {
+            this.cachedVirtualRows = this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
+        }
+        else {
+            this.cachedVirtualRows = this.paginatedRows
+                .slice(this.virtualStartIndex, this.virtualEndIndex + 1)
+                .map((row, relativeIdx) => ({
+                row,
+                actualIndex: this.virtualStartIndex + relativeIdx,
+            }));
+        }
+        return this.cachedVirtualRows;
+    }
+    get topSpacerHeight() {
+        if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
+            return 0;
+        return this.virtualStartIndex * this.virtualRowHeight;
+    }
+    get bottomSpacerHeight() {
+        if (!this.useVirtualScroll.vertical)
+            return 0;
+        const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
+        return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
+    }
+    getHorizontalSpacerWidth(position) {
+        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
+        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
+        const remainingCols = virtualColumnWidths.length - this.virtualEndColIdx - 1;
+        if (position === 'right' && remainingCols <= 0)
+            return 0;
+        const targetIndex = position === 'left' ? [0, this.virtualStartColIdx] : [this.virtualEndColIdx + 1];
+        return virtualColumnWidths.slice(...targetIndex).reduce((sum, width) => sum + width, 0);
+    }
+    get leftSpacerWidth() {
+        if (!this.useVirtualScroll.horizontal || this.virtualStartColIdx === 0) {
+            return 0;
+        }
+        return this.getHorizontalSpacerWidth('left');
+    }
+    get rightSpacerWidth() {
+        if (!this.useVirtualScroll.horizontal) {
+            return 0;
+        }
+        return this.getHorizontalSpacerWidth('right');
+    }
+    get totalVirtualHeight() {
+        if (!this.useVirtualScroll.vertical)
+            return 0;
+        return this.paginatedRows.length * this.virtualRowHeight;
+    }
+    get lastPageNumber() {
+        const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
+        return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
+    }
+    get sdTableClasses() {
+        return [
+            'sd-table',
+            this.stickyHeader && 'sd-table--sticky-header',
+            this.selectable && 'sd-table--selectable',
+            this.resizable && 'sd-table--resizable',
+            !this.innerRows.length && 'sd-table--no-data',
+            this.hasStickyColumn && 'sd-table--sticky-column',
+            this.scrolledLeft && 'sd-table--scrolled-left',
+            this.scrolledRight && 'sd-table--scrolled-right',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    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 => 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 => this.getRowKeyValue(r) !== this.getRowKeyValue(row))
+            : [...selectedArray, row];
+        // 동일 상태면 set하지 않음 → 불필요 렌더 방지
+        if (newSelected.length === selectedArray.length)
+            return;
+        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) {
+            this.innerSelected = new Set(this.dedupeRowsByKey([...selectedRows, ...this.paginatedRows]));
+        }
+        else {
+            const currentPageKeys = new Set(this.paginatedRows.map(r => this.getRowKeyValue(r)));
+            this.innerSelected = new Set(selectedRows.filter(r => !currentPageKeys.has(this.getRowKeyValue(r))));
+        }
+        this.clearSelectionCache();
+        this.selected = Array.from(this.innerSelected);
+        this.sdSelectChange.emit(Array.from(this.innerSelected));
+    }
+    get isAllChecked() {
+        const paginatedKeys = this.paginatedRows.map(row => String(this.getRowKeyValue(row))).join('|');
+        const selectedKeys = Array.from(this.innerSelected)
+            .map(row => String(this.getRowKeyValue(row)))
+            .sort()
+            .join('|');
+        const selectionKey = `${paginatedKeys}::${selectedKeys}`;
+        if (this.cachedIsAllChecked !== undefined && this.lastSelectionKey === selectionKey) {
+            return this.cachedIsAllChecked;
+        }
+        const total = this.paginatedRows.length;
+        const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => this.getRowKeyValue(selectedRow) === this.getRowKeyValue(row))).length;
+        let result;
+        if (selectedCount === 0) {
+            result = false; // 아무것도 안 선택됨
+        }
+        else if (selectedCount === total) {
+            result = true; // 전부 선택됨
+        }
+        else {
+            result = null; // 일부만 선택됨
+        }
+        this.cachedIsAllChecked = result;
+        this.lastSelectionKey = selectionKey;
+        return result;
+    }
+    // RAF 통합 관리
+    scheduleUpdate(type) {
+        this.pendingUpdates[type] = true;
+        if (!this.rafScheduled) {
+            this.rafScheduled = true;
+            this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
+                if (this.pendingUpdates.vertical)
+                    this.calculateVisibleRange();
+                if (this.pendingUpdates.horizontal)
+                    this.calculateVisibleColumnRange();
+                this.pendingUpdates = { vertical: false, horizontal: false };
+                this.rafScheduled = false;
+                this.scrollRequestAnimationFrame = null;
+            });
+        }
+    }
+    // 세로 가상 스크롤 렌더링 계산
+    calculateVisibleRange() {
+        if (!this.useVirtualScroll.vertical) {
+            this.virtualStartIndex = 0;
+            this.virtualEndIndex = this.paginatedRows.length - 1;
+            return;
+        }
+        const scrollTop = this.scrollTopPosition;
+        let containerHeight = this.cachedContainerHeight;
+        if (containerHeight === 0 && this.scrollContainer) {
+            containerHeight = this.scrollContainer.clientHeight;
+            this.cachedContainerHeight = containerHeight;
+        }
+        const bufferSize = this.virtualBufferSize.vertical || 5;
+        const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
+        const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
+        const endIndex = startIndex + visibleCount - 1;
+        const newStartIndex = Math.max(0, startIndex - bufferSize);
+        const newEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
+        // 실제로 변경된 경우에만 상태 업데이트
+        if (this.virtualStartIndex !== newStartIndex || this.virtualEndIndex !== newEndIndex) {
+            this.virtualStartIndex = newStartIndex;
+            this.virtualEndIndex = newEndIndex;
+        }
+    }
+    // 가로 가상 스크롤 렌더링 계산
+    calculateVisibleColumnRange() {
+        if (!this.useVirtualScroll.horizontal) {
+            this.virtualStartColIdx = 0;
+            this.virtualEndColIdx = this.tableColumns.length - 1;
+            return;
+        }
+        const scrollLeft = this.scrollLeftPosition;
+        // 캐시된 값 사용, 없으면 측정 후 캐시
+        let containerWidth = this.cachedContainerWidth;
+        if (containerWidth === 0 && this.scrollContainer) {
+            containerWidth = this.scrollContainer.clientWidth;
+            this.cachedContainerWidth = containerWidth;
+        }
+        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
+        // 가상 스크롤 컬럼 - sticky column 제외
+        const virtualColumns = this.tableColumns.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
+        if (virtualColumns.length === 0) {
+            this.virtualStartColIdx = 0;
+            this.virtualEndColIdx = 0;
+            return;
+        }
+        const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
+            (this.selectable ? 52 : 0);
+        const stickyRightWidth = this.columnWidths
+            .slice(this.tableColumns.length - stickyRightCount)
+            .reduce((sum, width) => sum + width, 0);
+        // 가상 스크롤 영역의 너비 계산
+        const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
+        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
+        const virtualScrollLeft = Math.max(0, scrollLeft - stickyLeftWidth);
+        const reducedVirtualWidth = virtualColumnWidths.reduce((acc, width, idx) => {
+            acc.push((acc[idx - 1] || 0) + width);
+            return acc;
+        }, []);
+        let startIdx = 0; // 가상 스크롤 시작 인덱스
+        let endIdx = virtualColumns.length - 1; // 가상 스크롤 종료 인덱스
+        // sticky left 영역 제외한 스크롤 위치
+        for (let i = 0; i < reducedVirtualWidth.length; i++) {
+            if (reducedVirtualWidth[i] > virtualScrollLeft) {
+                startIdx = Math.max(0, i);
+                break;
+            }
+        }
+        const scrollRight = virtualScrollLeft + virtualScrollableWidth;
+        for (let i = startIdx; i < reducedVirtualWidth.length; i++) {
+            if (reducedVirtualWidth[i] >= scrollRight) {
+                endIdx = Math.min(virtualColumns.length - 1, i);
+                break;
+            }
+        }
+        const bufferSize = this.virtualBufferSize.horizontal || 5;
+        const newStartColIdx = Math.max(0, startIdx - bufferSize);
+        const newEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
+        // 실제로 변경된 경우에만 상태 업데이트
+        if (this.virtualStartColIdx !== newStartColIdx || this.virtualEndColIdx !== newEndColIdx) {
+            this.virtualStartColIdx = newStartColIdx;
+            this.virtualEndColIdx = newEndColIdx;
+        }
+    }
+    // ----- Helpers -----
+    getStickyStyle(colIdx) {
+        // 캐시된 스타일이 있으면 반환
+        if (this.stickyStyleCache.has(colIdx)) {
+            return this.stickyStyleCache.get(colIdx);
+        }
+        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
+        const { stickyRightCount } = this.getNormalizedStickyCounts();
+        const rightOffset = this.columnWidths
+            .filter((_, i) => i >= this.tableColumns.length - stickyRightCount && i > colIdx)
+            .reduce((a, b) => a + b, 0);
+        const style = {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
+        };
+        // 스타일 캐시에 저장
+        this.stickyStyleCache.set(colIdx, style);
+        return style;
+    }
+    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')
+            return;
+        const startX = event.clientX;
+        const startWidth = this.columnWidths[index];
+        const handleMouseMove = (moveEvent) => {
+            const currentWidth = this.columnWidths[index];
+            if (!currentWidth)
+                return;
+            const targetColumn = this.tableColumns[index];
+            const minWidth = targetColumn?.minWidth || 50;
+            const maxWidth = targetColumn?.maxWidth || 9999;
+            const newWidth = Math.min(Math.max(startWidth + moveEvent.clientX - startX, minWidth), maxWidth);
+            this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }
+    getCellValue(column, row) {
+        const { field, format, name } = column;
+        const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
+        return format ? format(value, row) : value;
+    }
+    getColumnRenderedInOrder() {
+        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
+        const orderKey = `${this.tableColumns.map(col => col.name).join('|')}-${stickyLeftCount}-${stickyRightCount}-${this.useVirtualScroll.horizontal ? `${this.virtualStartColIdx}-${this.virtualEndColIdx}` : 'all'}`;
+        if (this.cachedColumnOrder && this.lastColumnOrderKey === orderKey) {
+            return this.cachedColumnOrder;
+        }
+        // Sticky left 컬럼들
+        const stickyLeftCols = this.tableColumns.slice(0, stickyLeftCount);
+        const stickyRightCols = this.tableColumns.slice(this.tableColumns.length - stickyRightCount);
+        const middleCols = this.useVirtualScroll.horizontal
+            ? this.tableColumns
+                .slice(stickyLeftCount, this.tableColumns.length - stickyRightCount)
+                .slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
+            : this.tableColumns.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
+        this.cachedColumnOrder = {
+            stickyLeftCount,
+            stickyRightCount,
+            stickyLeftCols,
+            middleCols,
+            stickyRightCols,
+        };
+        this.lastColumnOrderKey = orderKey;
+        return this.cachedColumnOrder;
+    }
+    // ----- Render -----
+    renderHead() {
+        const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
+        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
+                'sd-th': true,
+                'sd-th--selected': true,
+                'sticky-left': true,
+                'sticky-left-edge': !this.hasStickyLeftDataColumn,
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, h("sd-checkbox", { value: this.isAllChecked, disabled: !this.paginatedRows.length, onSdUpdate: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
+            return (h("th", { key: col.name, class: {
+                    'sd-th': true,
+                    [`${col.thClass}`]: Boolean(col.thClass),
+                    'sticky-left': true,
+                    'sticky-left-edge': idx === stickyLeftCount - 1,
+                }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))));
+        }), this.renderSpacerTh('left'), middleCols.map((col, relativeIdx) => {
+            const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
+            return (h("th", { key: col.name, class: {
+                    'sd-th': true,
+                    [`${col.thClass}`]: Boolean(col.thClass),
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+        }), this.renderSpacerTh('right'), stickyRightCols.map((col, relativeIdx) => {
+            const actualColIdx = this.tableColumns.length - stickyRightCount + relativeIdx;
+            return (h("th", { key: col.name, class: {
+                    'sd-th': true,
+                    [`${col.thClass}`]: Boolean(col.thClass),
+                    'sticky-right': true,
+                    'sticky-right-edge': relativeIdx === 0,
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+        }))));
+    }
+    renderBody() {
+        return (h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll.vertical ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && this.renderSpacerRow('top'), this.paginatedRows.length > 0 &&
+            this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll.vertical &&
+            this.bottomSpacerHeight > 0 &&
+            this.renderSpacerRow('bottom')));
+    }
+    renderRow(row, rowIdx) {
+        const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
+        return (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll.vertical
+                ? {
+                    height: `${this.virtualRowHeight}px`,
+                }
+                : {} }, this.selectable && (h("td", { class: {
+                'sd-td': true,
+                'sd-td--selected': true,
+                'sticky-left': true,
+                'sticky-left-edge': !this.hasStickyLeftDataColumn,
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, h("sd-checkbox", { value: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdUpdate: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
+            return (h("td", { key: column.name, part: `td-${column.name}`, class: {
+                    'sd-td': true,
+                    [`sd-td--${column.align || 'left'}`]: true,
+                    'sticky-left': true,
+                    'sticky-left-edge': idx === stickyLeftCount - 1,
+                    [`${column.tdClass}`]: Boolean(column.tdClass),
+                }, style: this.getStickyStyle(idx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, this.getCellValue(column, row))));
+        }), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
+            const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
+            return (h("td", { key: column.name, part: `td-${column.name}`, class: {
+                    'sd-td': true,
+                    [`sd-td--${column.align || 'left'}`]: true,
+                    [`${column.tdClass}`]: Boolean(column.tdClass),
+                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, this.getCellValue(column, row))));
+        }), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
+            const actualColIdx = this.tableColumns.length - stickyRightCount + relativeIdx;
+            return (h("td", { key: column.name, part: `td-${column.name}`, class: {
+                    'sd-td': true,
+                    [`sd-td--${column.align || 'left'}`]: true,
+                    'sticky-right': true,
+                    'sticky-right-edge': relativeIdx === 0,
+                    [`${column.tdClass}`]: Boolean(column.tdClass),
+                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, this.getCellValue(column, row))));
+        })));
+    }
+    renderSpacerRow(position) {
+        const spacerHeight = position === 'top' ? this.topSpacerHeight : this.bottomSpacerHeight;
+        return (h("tr", { key: `virtual-${position}-spacer`, class: "sd-table__virtual-row-spacer", style: {
+                height: `${spacerHeight}px`,
+            }, "aria-hidden": "true" }, h("td", { colSpan: this.tableColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton", style: {
+                '--row-height': `${this.virtualRowHeight}px`,
+            } }))));
+    }
+    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'
+            ? 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: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
+    }
+    render() {
+        return (h(Fragment, { key: 'f3e4930d36d080fd546dddc1e80190b831e93012' }, h("div", { key: 'ad2f798951631319190d93f83e25b87f871e58de', class: "sd-table__wrapper", style: {
+                '--table-width': this.width,
+                '--table-height': this.height,
+            } }, h("div", { key: 'c4b6d4080f1416d1c88ab1413c66848bdafe9019', class: "sd-table__container", style: {
+                '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
+            } }, h("div", { key: '3aacc27970b0c6d8b700063c0af7c57175e2cb22', class: {
+                'sd-table__middle': true,
+                'sd-table__middle--scrollable': this.paginatedRows.length > 0,
+                'sd-table__middle--loading': this.isLoading,
+            } }, this.isLoading && (h("div", { key: '25fca304a4e8ebf43aeeff20de3e3446d25e1ffb', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '48b0adad60cf422b884557b53097c28a4f0b8879' }))), h("table", { key: 'ec4328a1f43c865de642cc5814fbdef6a374b7e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'ba362ecb9fb8134a15ff3d0a3b8e6a523e94166a', class: "sd-table__bottom" }, h("div", { key: 'ca5c2e0b19a1e301ac159588436ef24eecfb6365', class: "sd-table__no-data" }, h("slot", { key: '68564a60a05833ba87743212d7189eef6e179fb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '88c3c7362234c20a60f6437ecd79d4c75b2caa6e', class: "sd-table__pagination" }, h("sd-pagination", { key: 'c3c8c435fcb752f2b1139981bb764cf4dfb153ab', 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: '03801039397a31321e5af96c2bd2d2900151240e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+    }
+    static get watchers() { return {
+        "columns": [{
+                "handleColumnsChange": 0
+            }],
+        "useVirtualScroll": [{
+                "handleUseVirtualScrollChange": 0
+            }],
+        "virtualColumnWidth": [{
+                "handleVirtualColumnWidthChange": 0
+            }],
+        "selectable": [{
+                "handleSelectableChange": 0
+            }],
+        "stickyColumn": [{
+                "handleStickyColumnChange": 0
+            }],
+        "columnWidths": [{
+                "handleColumnWidthsChange": 0
+            }],
+        "rows": [{
+                "handleRowsChange": 0
+            }],
+        "selected": [{
+                "handleSelectedChange": 0
+            }],
+        "pagination": [{
+                "handlePaginationChange": 0
+            }]
+    }; }
+};
+SdTable.style = sdTableCss();
+
+export { SdTable as sd_table };