@sellmate/design-system 1.27.1 → 1.29.0

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

@@ -1,1709 +0,0 @@
-import { h, Host, readTask, forceUpdate, } from "@stencil/core";
-import { nanoid } from "nanoid";
-import { TABLE_ID_ATTR, } from "./constants";
-import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY, TABLE_BODY_LAYOUT, TABLE_SELECTABLE_COLUMN_WIDTH, } from "./sd-table.config";
-export class SdTable {
-    static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
-    el;
-    /** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
-    tableId = nanoid(8);
-    fallbackTableId = nanoid(8);
-    /** 컬럼 정의 목록 */
-    columns = [];
-    /** 행 데이터 배열 */
-    rows;
-    /** 현재 선택된 행 목록 */
-    selected = [];
-    /** 행 고유 식별 필드명 */
-    rowKey = 'id';
-    /** 행 선택(체크박스) 기능 활성화 여부 */
-    selectable = false;
-    /** 컬럼 너비 조절 기능 활성화 여부 */
-    resizable = false;
-    /** 테이블 너비 */
-    width;
-    /** 테이블 높이 */
-    height;
-    /** 헤더 고정(sticky) 여부 */
-    stickyHeader = false;
-    /** 고정할 좌우 컬럼 수 */
-    stickyColumn = { left: 0, right: 0 };
-    /** border-radius 제어 */
-    radius = 'default';
-    /** 데이터 없을 때 표시할 메시지 */
-    noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
-    resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
-    /** 로딩 스피너 표시 여부 */
-    isLoading = false;
-    /** 페이지네이션 옵션 */
-    pagination;
-    /** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
-    useInternalPagination = false;
-    /** 페이지당 행 수 선택 셀렉트 표시 여부 */
-    useRowsPerPageSelect = false;
-    /** 행 높이를 줄인 조밀 모드 여부 */
-    dense = false;
-    // ─── Virtual Scroll ───────────────────────────────────────────────
-    /** 가상 스크롤 사용 여부 */
-    useVirtualScroll = false;
-    /** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
-    rowHeight;
-    get effectiveRowHeight() {
-        if (this.rowHeight != null)
-            return this.rowHeight;
-        return this.dense
-            ? Number(TABLE_BODY_LAYOUT.dense.height)
-            : Number(TABLE_BODY_LAYOUT.default.height);
-    }
-    /** 가상 스크롤 상하 버퍼 행 수 */
-    virtualBuffer = 5;
-    /** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
-    virtualEndThreshold = 10;
-    // ─────────────────────────────────────────────────────────────────
-    /** 페이지당 행 수 선택 옵션 목록 */
-    rowsPerPageOption = [
-        { label: '10개씩 보기', value: 10 },
-        { label: '25개씩 보기', value: 25 },
-        { label: '50개씩 보기', value: 50 },
-        { label: '100개씩 보기', value: 100 },
-    ];
-    /** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
-    sdSelectChange;
-    /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
-    sdPageChange;
-    /** 페이지당 행 수가 변경될 때 발생합니다. */
-    sdRowsPerPageChange;
-    /** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
-    sdVirtualUpdate;
-    /** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
-    sdVirtualReachEnd;
-    currentPage = 1;
-    innerRowsPerPage = 10;
-    innerSelected = new Set();
-    columnWidths = [];
-    scrolledLeft = false;
-    scrolledRight = false;
-    rowCount = 0;
-    loadingScrollTop = 0;
-    noDataBodyHeight = 60;
-    // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
-    // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
-    autoThead = false;
-    autoTbody = false;
-    vsStart = 0;
-    vsEnd = 0;
-    lastReachEndNotifiedRowCount = -1;
-    scrollContainer = null;
-    noDataContentEl = null;
-    noDataContentResizeObserver;
-    onScroll;
-    // 키: `${rowKey}::${field}` → { rowspan, colspan }
-    spanRegistry = new Map();
-    // rowKey → Set<field>: useFrame=true인 sd-td가 있는 행을 추적한다.
-    // 하나라도 등록되면 해당 행은 dense를 무시하고 default 레이아웃으로 렌더된다.
-    useFrameRegistry = new Map();
-    // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
-    // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
-    cellClassRegistry = new Map();
-    // rowKey 문자열 → rows 배열에서의 visual index.
-    // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
-    // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
-    rowIndexMap = new Map();
-    rebuildRowIndexMap() {
-        this.rowIndexMap.clear();
-        if (!Array.isArray(this.rows))
-            return;
-        const field = this.rowKey;
-        this.rows.forEach((r, i) => {
-            const k = r?.[field];
-            if (k == null)
-                return;
-            this.rowIndexMap.set(String(k), i);
-        });
-    }
-    // rowKey의 시각적 행 인덱스를 돌려준다.
-    // 1) rows 기반 맵에 있으면 그 값 (임의 문자열 rowKey 지원)
-    // 2) 없으면 Number(rowKey) fallback (rows prop 없이 슬롯-온리 + 숫자 rowKey 사용 패턴)
-    // 3) 둘 다 안 되면 null — rowspan 평가 스킵
-    resolveRowIndex(rowKey) {
-        const fromMap = this.rowIndexMap.get(rowKey);
-        if (fromMap !== undefined)
-            return fromMap;
-        const n = Number(rowKey);
-        return Number.isFinite(n) ? n : null;
-    }
-    toFiniteNumber(value, fallback) {
-        const n = typeof value === 'number' ? value : Number(value);
-        return Number.isFinite(n) ? n : fallback;
-    }
-    isRowsPerPageValue(value) {
-        return value === null || typeof value === 'string' || typeof value === 'number';
-    }
-    isValidTableId(value) {
-        return (typeof value === 'string' &&
-            value.trim().length > 0 &&
-            value !== 'undefined' &&
-            value !== 'null');
-    }
-    getResolvedTableId() {
-        if (this.isValidTableId(this.tableId))
-            return this.tableId;
-        const attrId = this.el?.getAttribute(TABLE_ID_ATTR);
-        if (this.isValidTableId(attrId))
-            return attrId;
-        return this.fallbackTableId;
-    }
-    syncTableIdAttribute() {
-        const resolvedTableId = this.getResolvedTableId();
-        if (this.el?.getAttribute(TABLE_ID_ATTR) !== resolvedTableId) {
-            this.el.setAttribute(TABLE_ID_ATTR, resolvedTableId);
-        }
-    }
-    handleIsLoadingChange(newVal) {
-        if (newVal) {
-            this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
-        }
-        this.syncNoDataContentObserver();
-    }
-    handleUseVirtualScrollChange(newVal) {
-        if (newVal) {
-            // DOM이 새 --table-container-height로 업데이트된 후 계산해야 정확함
-            readTask(() => this.propagateVirtualUpdate());
-        }
-    }
-    handleColumnsChange(newCols) {
-        this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
-        this.refreshChildrenConfig();
-    }
-    handleRowsChange(newRows) {
-        if (!Array.isArray(newRows))
-            return;
-        this.rowCount = newRows.length;
-        this.rebuildRowIndexMap();
-        if (this.useVirtualScroll)
-            this.propagateVirtualUpdate(true);
-        this.pushRowsToChildren(newRows);
-        this.syncNoDataContentObserver();
-    }
-    handleRowKeyChange() {
-        this.rebuildRowIndexMap();
-    }
-    handleTableIdChange() {
-        this.syncTableIdAttribute();
-    }
-    handleNoDataLabelChange(newLabel) {
-        if (typeof newLabel === 'string' &&
-            newLabel.trim().length > 0 &&
-            newLabel !== 'undefined' &&
-            newLabel !== 'null') {
-            this.resolvedNoDataLabel = newLabel;
-        }
-        else {
-            this.resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
-        }
-    }
-    handleConfigChange() {
-        this.refreshChildrenConfig();
-    }
-    handleSelectedChange(newSelected) {
-        this.innerSelected = new Set(newSelected);
-    }
-    handlePaginationChange(newVal) {
-        if (newVal?.page != null && newVal.page !== this.currentPage) {
-            this.currentPage = newVal.page;
-        }
-        if (newVal?.rowsPerPage != null && newVal.rowsPerPage !== this.innerRowsPerPage) {
-            this.innerRowsPerPage = newVal.rowsPerPage;
-        }
-    }
-    detectChildren() {
-        const hasThead = !!this.el.querySelector(':scope > sd-thead');
-        const hasTbody = !!this.el.querySelector(':scope > sd-tbody');
-        this.autoThead = !hasThead;
-        this.autoTbody = !hasTbody;
-    }
-    componentWillLoad() {
-        this.syncTableIdAttribute();
-        this.handleNoDataLabelChange(this.noDataLabel);
-        this.detectChildren();
-        this.innerSelected = new Set(this.selected || []);
-        this.columnWidths = (this.columns || []).map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
-        this.rebuildRowIndexMap();
-        if (this.pagination?.page != null) {
-            this.currentPage = this.pagination.page;
-        }
-        if (this.pagination?.rowsPerPage != null) {
-            this.innerRowsPerPage = this.pagination.rowsPerPage;
-        }
-        // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
-        // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
-        // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const el = this.el;
-        el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
-        el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
-        el.toggleSelectAllSync = this.toggleSelectAllSync.bind(this);
-        el.getIsAllCheckedSync = this.getIsAllCheckedSync.bind(this);
-        el.getStickyStyleSync = this.getStickyStyleSync.bind(this);
-        el.setRowCountSync = this.setRowCountSync.bind(this);
-        el.handleResize = this.handleResize.bind(this);
-        el.getPaginationInfoSync = this.getPaginationInfoSync.bind(this);
-        el.getVirtualScrollRangeSync = this.getVirtualScrollRangeSync.bind(this);
-        el.getConfigSync = this.getConfigSync.bind(this);
-        el.getTableIdSync = () => this.getResolvedTableId();
-        el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
-        el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
-        el.registerSpanSync = this.registerSpanSync.bind(this);
-        el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
-        el.getSpanSync = this.getSpanSync.bind(this);
-        el.isCoveredSync = this.isCoveredSync.bind(this);
-        el.hasRowspanSync = this.hasRowspanSync.bind(this);
-        el.registerCellClassSync = this.registerCellClassSync.bind(this);
-        el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
-        el.getCellClassSync = this.getCellClassSync.bind(this);
-        el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
-        el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
-        el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
-        el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
-        if (Array.isArray(this.rows)) {
-            this.rowCount = this.rows.length;
-            this.pushRowsToChildren(this.rows);
-        }
-    }
-    componentDidLoad() {
-        if (Array.isArray(this.rows)) {
-            this.pushRowsToChildren(this.rows);
-        }
-        readTask(() => {
-            const wrapper = this.el.shadowRoot?.querySelector('.sd-table__scroll-container');
-            if (!wrapper)
-                return;
-            let rafPending = false;
-            this.onScroll = () => {
-                // 가로 스크롤 그림자
-                const scrollLeft = wrapper.scrollLeft;
-                const scrollWidth = wrapper.scrollWidth;
-                const clientWidth = wrapper.clientWidth;
-                const newScrolledLeft = scrollLeft > 0;
-                const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
-                if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
-                    this.scrolledLeft = newScrolledLeft;
-                    this.scrolledRight = newScrolledRight;
-                    this.refreshChildrenConfig();
-                }
-                // 세로 가상 스크롤 — RAF로 프레임당 1회만 처리
-                if (this.useVirtualScroll && !rafPending) {
-                    rafPending = true;
-                    requestAnimationFrame(() => {
-                        rafPending = false;
-                        this.propagateVirtualUpdate();
-                    });
-                }
-            };
-            this.scrollContainer = wrapper;
-            wrapper.addEventListener('scroll', this.onScroll, { passive: true });
-            this.onScroll();
-            if (this.useVirtualScroll) {
-                this.propagateVirtualUpdate(); // 초기 렌더
-            }
-        });
-        this.syncNoDataContentObserver();
-    }
-    disconnectedCallback() {
-        if (this.scrollContainer && this.onScroll) {
-            this.scrollContainer.removeEventListener('scroll', this.onScroll);
-        }
-        this.noDataContentResizeObserver?.disconnect();
-        this.noDataContentResizeObserver = undefined;
-    }
-    syncNoDataContentObserver() {
-        const isNoData = this.rowCount === 0 && !this.isLoading;
-        if (!isNoData) {
-            this.noDataContentResizeObserver?.disconnect();
-            this.noDataContentResizeObserver = undefined;
-            this.noDataBodyHeight = 60;
-            return;
-        }
-        this.observeNoDataContentHeight();
-    }
-    // observer를 붙이고 콘텐츠 높이를 측정해 noDataBodyHeight를 갱신하는 함수
-    observeNoDataContentHeight() {
-        if (typeof ResizeObserver === 'undefined')
-            return;
-        const target = this.noDataContentEl;
-        if (!target)
-            return;
-        this.noDataContentResizeObserver?.disconnect();
-        this.noDataContentResizeObserver = new ResizeObserver(() => {
-            const measured = Math.ceil(target.scrollHeight);
-            const nextHeight = Math.max(60, measured);
-            if (nextHeight !== this.noDataBodyHeight) {
-                this.noDataBodyHeight = nextHeight;
-            }
-        });
-        this.noDataContentResizeObserver.observe(target);
-        readTask(() => {
-            if (!this.noDataContentEl)
-                return;
-            const measured = Math.ceil(this.noDataContentEl.scrollHeight);
-            const next = Math.max(60, measured);
-            if (next !== this.noDataBodyHeight) {
-                this.noDataBodyHeight = next;
-            }
-        });
-    }
-    queryChildEl(selector) {
-        return (this.el.querySelector(selector) ??
-            this.el.shadowRoot?.querySelector(selector) ??
-            null);
-    }
-    queryAllTr() {
-        const light = Array.from(this.el.querySelectorAll('sd-tr'));
-        const shadow = Array.from(this.el.shadowRoot?.querySelectorAll('sd-tr') ?? []);
-        return [...light, ...shadow];
-    }
-    pushRowsToChildren(rows) {
-        const tbody = this.queryChildEl('sd-tbody');
-        if (tbody)
-            tbody.rows = rows;
-        const thead = this.queryChildEl('sd-thead');
-        if (thead)
-            thead.rows = rows;
-    }
-    handleStructureSlotChange = () => {
-        if (Array.isArray(this.rows)) {
-            this.pushRowsToChildren(this.rows);
-        }
-        this.refreshChildrenConfig();
-    };
-    refreshChildrenSelection() {
-        const thead = this.queryChildEl('sd-thead');
-        thead?.refreshSelection?.();
-        this.queryAllTr().forEach(tr => tr.refreshSelection?.());
-    }
-    refreshChildrenConfig() {
-        const thead = this.queryChildEl('sd-thead');
-        thead?.refreshConfig?.();
-        this.queryAllTr().forEach(tr => tr.refreshConfig?.());
-    }
-    maybeEmitVirtualReachEnd(start, end) {
-        const threshold = Math.max(1, this.virtualEndThreshold);
-        const nearEnd = end >= Math.max(0, this.rowCount - threshold);
-        if (!nearEnd)
-            return;
-        if (this.lastReachEndNotifiedRowCount === this.rowCount)
-            return;
-        this.lastReachEndNotifiedRowCount = this.rowCount;
-        this.sdVirtualReachEnd.emit({
-            from: start,
-            to: end,
-            rowCount: this.rowCount,
-            threshold,
-        });
-    }
-    propagateVirtualUpdate(forceSpacerUpdate = false) {
-        if (!this.scrollContainer || !this.useVirtualScroll)
-            return;
-        const scrollTop = this.toFiniteNumber(this.scrollContainer.scrollTop, 0);
-        const containerHeight = this.toFiniteNumber(this.scrollContainer.clientHeight, 0);
-        const { start, end } = this.calculateVisibleRange(scrollTop, containerHeight);
-        if (!Number.isFinite(start) || !Number.isFinite(end))
-            return;
-        const rangeChanged = this.vsStart !== start || this.vsEnd !== end;
-        if (!rangeChanged && !forceSpacerUpdate)
-            return;
-        this.vsStart = start;
-        this.vsEnd = end;
-        const topHeight = start * this.effectiveRowHeight;
-        const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
-        // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
-        const tbody = this.queryChildEl('sd-tbody');
-        tbody?.setSpacersSync?.(topHeight, bottomHeight);
-        if (rangeChanged) {
-            this.sdVirtualUpdate.emit({
-                from: start,
-                to: end,
-            });
-        }
-        this.maybeEmitVirtualReachEnd(start, end);
-    }
-    getVirtualScrollConfigSync() {
-        return {
-            useVirtualScroll: this.useVirtualScroll,
-            rowHeight: this.effectiveRowHeight,
-            virtualBuffer: this.virtualBuffer,
-            vsStart: this.vsStart,
-            vsEnd: this.vsEnd,
-            rowCount: this.rowCount,
-        };
-    }
-    getConfigSync() {
-        return {
-            columns: this.columns,
-            selectable: this.selectable,
-            resizable: this.resizable,
-            stickyColumn: this.stickyColumn,
-            stickyHeader: this.stickyHeader,
-            scrolledLeft: this.scrolledLeft,
-            scrolledRight: this.scrolledRight,
-            columnWidths: this.columnWidths,
-            dense: this.dense,
-        };
-    }
-    registerUseFrameSync(rowKey, field) {
-        if (rowKey == null || field === '')
-            return;
-        let fields = this.useFrameRegistry.get(rowKey);
-        if (!fields) {
-            fields = new Set();
-            this.useFrameRegistry.set(rowKey, fields);
-        }
-        fields.add(field);
-    }
-    unregisterUseFrameSync(rowKey, field) {
-        if (rowKey == null || field === '')
-            return;
-        const fields = this.useFrameRegistry.get(rowKey);
-        if (!fields)
-            return;
-        fields.delete(field);
-        if (fields.size === 0)
-            this.useFrameRegistry.delete(rowKey);
-    }
-    hasUseFrameInRowSync(rowKey) {
-        const fields = this.useFrameRegistry.get(rowKey);
-        return fields != null && fields.size > 0;
-    }
-    isCellUseFrameSync(rowKey, field) {
-        return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
-    }
-    isRowSelectedSync(row) {
-        return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
-    }
-    /** 행이 선택되어 있는지 확인합니다. */
-    async isRowSelected(row) {
-        return this.isRowSelectedSync(row);
-    }
-    updateRowSelectSync(row) {
-        const selectedArray = Array.from(this.innerSelected);
-        const exists = this.isRowSelectedSync(row);
-        const newSelected = exists
-            ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
-            : [...selectedArray, row];
-        if (newSelected.length === selectedArray.length)
-            return;
-        this.innerSelected = new Set(newSelected);
-        this.selected = Array.from(this.innerSelected);
-        this.sdSelectChange.emit(Array.from(this.innerSelected));
-        this.refreshChildrenSelection();
-    }
-    /** 행 선택 상태를 토글합니다. */
-    async updateRowSelect(row) {
-        this.updateRowSelectSync(row);
-    }
-    toggleSelectAllSync(checked, rows) {
-        if (checked) {
-            const pageRows = new Set([...rows]);
-            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
-        }
-        else {
-            const currentPageKeys = rows.map(r => r[this.rowKey ?? 'id']);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey ?? 'id'])));
-        }
-        this.selected = Array.from(this.innerSelected);
-        this.sdSelectChange.emit(Array.from(this.innerSelected));
-        this.refreshChildrenSelection();
-    }
-    /** 전체 행 선택/해제를 처리합니다. */
-    async toggleSelectAll(checked, rows) {
-        this.toggleSelectAllSync(checked, rows);
-    }
-    getIsAllCheckedSync(rows) {
-        const total = rows.length;
-        const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id'])).length;
-        if (selectedCount === 0)
-            return false;
-        if (selectedCount === total)
-            return true;
-        return null; // indeterminate
-    }
-    /** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
-    async getIsAllChecked(rows) {
-        return this.getIsAllCheckedSync(rows);
-    }
-    changePage(page) {
-        if (!this.useInternalPagination) {
-            this.sdPageChange.emit(page);
-            return;
-        }
-        this.currentPage = page;
-        this.sdPageChange.emit(this.currentPage);
-        this.updateRowsVisibility();
-    }
-    updateRowsVisibility() {
-        this.queryAllTr().forEach(tr => tr.updateVisibility?.());
-    }
-    changeRowsPerPage(perPage) {
-        const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
-        if (!this.useInternalPagination) {
-            this.sdRowsPerPageChange.emit(changedRowsPerPage);
-            return;
-        }
-        this.innerRowsPerPage = changedRowsPerPage;
-        const newLastPage = Math.max(1, Math.ceil(this.rowCount / changedRowsPerPage));
-        if (this.currentPage > newLastPage) {
-            this.currentPage = newLastPage;
-        }
-        this.sdRowsPerPageChange.emit(changedRowsPerPage);
-        this.updateRowsVisibility();
-    }
-    get lastPageNumber() {
-        if (this.useInternalPagination) {
-            return Math.max(1, Math.ceil(this.rowCount / this.innerRowsPerPage));
-        }
-        const { lastPage, rowsPerPage = 10 } = this.pagination || {};
-        return lastPage ?? Math.max(1, Math.ceil(this.rowCount / rowsPerPage));
-    }
-    handleResize(index, event, reversed = false) {
-        if (typeof document === 'undefined')
-            return;
-        const startX = event.clientX;
-        const startWidth = this.columnWidths[index];
-        const handleMouseMove = (moveEvent) => {
-            const col = this.columns[index];
-            if (col == null)
-                return;
-            const minWidth = col.minWidth || 50;
-            const maxWidth = col.maxWidth || 9999;
-            const delta = moveEvent.clientX - startX;
-            const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
-            this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
-            const thead = this.queryChildEl('sd-thead');
-            thead?.setColumnWidths?.(this.columnWidths);
-            this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
-            const stickyRightCount = this.stickyColumn?.right || 0;
-            const visibleColCount = this.columns.filter(c => c.visible !== false).length;
-            const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
-            if (isRightStickyEdgeResizer) {
-                requestAnimationFrame(() => {
-                    this.onScroll?.();
-                });
-            }
-        };
-        const handleMouseUp = () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-    }
-    getStickyStyleSync(colIdx) {
-        const leftOffset = this.columnWidths
-            .slice(0, colIdx)
-            .reduce((a, b) => a + b, this.selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >=
-            this.columns.filter(c => c.visible !== false).length -
-                (this.stickyColumn?.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        const visibleCol = this.columns.filter(c => c.visible !== false)[colIdx];
-        const base = {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-        };
-        if (!visibleCol?.autoWidth) {
-            base['width'] = `${this.columnWidths[colIdx]}px`;
-            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
-            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
-        }
-        return base;
-    }
-    /** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
-    async getStickyStyle(colIdx) {
-        return this.getStickyStyleSync(colIdx);
-    }
-    // ─── rowspan / colspan registry ─────────────────────────────────
-    // sd-td가 mount/unmount 시 자기 (rowKey, field)와 span을 등록한다.
-    // sd-tr는 render마다 isCoveredSync로 자신의 셀 위치가 다른 셀의 span에
-    // 덮였는지 판정해 <td>를 그릴지 결정한다.
-    spanKey(rowKey, field) {
-        return `${rowKey}::${field}`;
-    }
-    // span 등록은 sd-td의 lifecycle에서 비동기적으로 일어나므로,
-    // 등록/해제 직후 형제 sd-tr들이 새 레지스트리 상태로 다시 그려져야
-    // 덮인 셀이 사라지거나 다시 나타난다.
-    // forceUpdate는 React 래퍼 환경에서 prop 동기화 사이클과 부딪혀 누락되는
-    // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
-    requestAllTrUpdate() {
-        this.queryAllTr().forEach(tr => {
-            if (typeof tr.bumpSpansVersion === 'function') {
-                tr.bumpSpansVersion();
-            }
-            else {
-                forceUpdate(tr);
-            }
-        });
-    }
-    registerSpanSync(rowKey, field, rowspan, colspan) {
-        if (rowKey == null || field === '')
-            return;
-        const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
-        const safeColspan = Math.max(1, Math.floor(colspan || 1));
-        const key = this.spanKey(rowKey, field);
-        const prev = this.spanRegistry.get(key);
-        if (safeRowspan === 1 && safeColspan === 1) {
-            if (!prev)
-                return;
-            this.spanRegistry.delete(key);
-            this.requestAllTrUpdate();
-            return;
-        }
-        if (prev && prev.rowspan === safeRowspan && prev.colspan === safeColspan)
-            return;
-        this.spanRegistry.set(key, { rowspan: safeRowspan, colspan: safeColspan });
-        this.requestAllTrUpdate();
-    }
-    unregisterSpanSync(rowKey, field) {
-        if (rowKey == null || field === '')
-            return;
-        const key = this.spanKey(rowKey, field);
-        if (!this.spanRegistry.has(key))
-            return;
-        this.spanRegistry.delete(key);
-        this.requestAllTrUpdate();
-    }
-    getSpanSync(rowKey, field) {
-        return this.spanRegistry.get(this.spanKey(rowKey, field));
-    }
-    // sd-td의 sdClass 등록. 빈/공백만 있는 값은 해제로 취급.
-    // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
-    // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
-    registerCellClassSync(rowKey, field, cls) {
-        if (rowKey == null || field === '')
-            return;
-        const key = this.spanKey(rowKey, field);
-        const safe = (cls ?? '').trim();
-        if (safe === '') {
-            this.cellClassRegistry.delete(key);
-            return;
-        }
-        this.cellClassRegistry.set(key, safe);
-    }
-    unregisterCellClassSync(rowKey, field) {
-        if (rowKey == null || field === '')
-            return;
-        this.cellClassRegistry.delete(this.spanKey(rowKey, field));
-    }
-    getCellClassSync(rowKey, field) {
-        return this.cellClassRegistry.get(this.spanKey(rowKey, field));
-    }
-    // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
-    // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
-    hasRowspanSync() {
-        for (const span of this.spanRegistry.values()) {
-            if (span.rowspan > 1)
-                return true;
-        }
-        return false;
-    }
-    isCoveredSync(rowKey, colIdx, columns) {
-        if (this.spanRegistry.size === 0)
-            return false;
-        const visibleCols = columns.filter(c => c.visible !== false);
-        // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
-        for (let i = 0; i < colIdx; i++) {
-            const c = visibleCols[i];
-            if (c == null)
-                continue;
-            const field = typeof c.field === 'string' ? c.field : c.name;
-            const span = this.spanRegistry.get(this.spanKey(rowKey, field));
-            if (!span)
-                continue;
-            if (i + span.colspan > colIdx)
-                return true;
-        }
-        // 2. 위쪽 행 스캔 — rows 기반 visual index로 "내 위에 있느냐" 판정
-        //    rows prop이 있으면 rowIndexMap로 임의 문자열 rowKey 지원,
-        //    없으면 Number(rowKey) fallback (resolveRowIndex가 처리)
-        const myRowIdx = this.resolveRowIndex(rowKey);
-        if (myRowIdx == null)
-            return false;
-        for (const [key, span] of this.spanRegistry) {
-            if (span.rowspan <= 1)
-                continue;
-            const sepIdx = key.indexOf('::');
-            if (sepIdx < 0)
-                continue;
-            const otherRowKey = key.slice(0, sepIdx);
-            const otherField = key.slice(sepIdx + 2);
-            const otherRowIdx = this.resolveRowIndex(otherRowKey);
-            if (otherRowIdx == null)
-                continue;
-            if (otherRowIdx >= myRowIdx)
-                continue;
-            if (otherRowIdx + span.rowspan <= myRowIdx)
-                continue;
-            const otherColIdx = visibleCols.findIndex(c => (typeof c.field === 'string' ? c.field : c.name) === otherField);
-            if (otherColIdx < 0)
-                continue;
-            if (otherColIdx <= colIdx && otherColIdx + span.colspan > colIdx)
-                return true;
-        }
-        return false;
-    }
-    setRowCountSync(count) {
-        const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
-        if (safeCount !== this.rowCount) {
-            this.lastReachEndNotifiedRowCount = -1;
-        }
-        this.rowCount = safeCount;
-        if (this.useVirtualScroll) {
-            this.propagateVirtualUpdate(true);
-        }
-    }
-    /** 가상 스크롤 총 행 수를 설정합니다. */
-    async setRowCount(count) {
-        this.setRowCountSync(count);
-    }
-    calculateVisibleRange(scrollTop, containerHeight) {
-        const safeRowHeight = Math.max(1, this.toFiniteNumber(this.effectiveRowHeight, 40));
-        const safeBuffer = Math.max(0, Math.floor(this.toFiniteNumber(this.virtualBuffer, 5)));
-        const safeScrollTop = Math.max(0, this.toFiniteNumber(scrollTop, 0));
-        const safeContainerHeight = Math.max(0, this.toFiniteNumber(containerHeight, 0));
-        const safeRowCount = Math.max(0, Math.floor(this.toFiniteNumber(this.rowCount, 0)));
-        const firstVisible = Math.floor(safeScrollTop / safeRowHeight);
-        const visibleCount = Math.ceil(safeContainerHeight / safeRowHeight);
-        const start = Math.max(0, firstVisible - safeBuffer);
-        const end = Math.min(safeRowCount, firstVisible + visibleCount + safeBuffer);
-        return { start, end };
-    }
-    getPaginationInfoSync() {
-        if (!this.useInternalPagination || !this.pagination)
-            return null;
-        const startIndex = (this.currentPage - 1) * this.innerRowsPerPage;
-        const endIndex = startIndex + this.innerRowsPerPage;
-        return {
-            startIndex,
-            endIndex,
-            currentPage: this.currentPage,
-            rowsPerPage: this.innerRowsPerPage,
-        };
-    }
-    /** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
-    async getPaginationInfo() {
-        return this.getPaginationInfoSync();
-    }
-    getVirtualScrollRangeSync() {
-        if (!this.useVirtualScroll)
-            return null;
-        if (!(this.vsEnd > 0))
-            return null;
-        return { from: this.vsStart, to: this.vsEnd };
-    }
-    // autoTbody fallback에서 sd-table이 직접 sd-tr을 만들어내는 경로.
-    // 가상 스크롤은 사용자가 직접 SdTbody+SdTr을 작성해야 하므로 빈 배열을 반환한다.
-    renderAutoRows() {
-        if (this.useVirtualScroll)
-            return null;
-        const allRows = this.rows ?? [];
-        const pageInfo = this.getPaginationInfoSync();
-        const startIdx = pageInfo?.startIndex ?? 0;
-        const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
-        return displayed.map((row, i) => {
-            const absoluteIdx = startIdx + i;
-            return h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
-        });
-    }
-    get tableClasses() {
-        return [
-            'sd-table',
-            this.stickyHeader && 'sd-table--sticky-header',
-            this.selectable && 'sd-table--selectable',
-            this.resizable && 'sd-table--resizable',
-            (this.selectable ||
-                (this.stickyColumn?.left ?? 0) > 0 ||
-                (this.stickyColumn?.right ?? 0) > 0) &&
-                'sd-table--sticky-column',
-            this.scrolledLeft && 'sd-table--scrolled-left',
-            this.scrolledRight && 'sd-table--scrolled-right',
-            this.rowCount === 0 && !this.isLoading && 'sd-table--no-data',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    render() {
-        const resolvedTableId = this.getResolvedTableId();
-        const isNoData = this.rowCount === 0 && !this.isLoading;
-        const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
-        const noDataTotalHeight = 36 + this.noDataBodyHeight;
-        const hostHeight = isNoData
-            ? this.height !== undefined
-                ? `max(${this.height}, ${noDataTotalHeight}px)`
-                : `max(${noDataTotalHeight}px, 100%)`
-            : (this.height ?? '100%');
-        const hostStyle = {
-            '--table-radius': `${TABLE_RADIUS}px`,
-            '--table-border-color': TABLE_BORDER.color,
-            '--table-border-width': `${TABLE_BORDER.width}px`,
-            '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
-            '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
-            '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
-            '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
-            '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
-            '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
-            '--table-host-height': hostHeight,
-        };
-        return (h(Host, { key: 'b90b9865f78c2b42c3c13ad27ed968dd97827eb6', style: hostStyle }, h("div", { key: '2eb291b03b219a3abb4da5967c6d0f43195b458e', class: "sd-table__container", style: {
-                '--table-width': this.width,
-                '--pagination-height': `${paginationHeight}px`,
-            } }, h("div", { key: '999feaffbf82db9233416a1d66974e8859b9b3a0', class: {
-                'sd-table__wrapper': true,
-                'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
-                'sd-table__wrapper--radius-full': this.radius === 'full',
-            } }, h("div", { key: 'ff0a04325ab9fe1ba5e6b25f52bb8265226fbba4', class: {
-                'sd-table__scroll-container': true,
-                'sd-table__scroll-container--loading': this.isLoading,
-                'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (h("div", { key: '1a4dbf4a721240b3395230997c18c8ef989bbffc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '793a6772ef4c792e7f50c2ad90d43bdfbdde11a0', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '13b76f695edddfa3d4a13bcb1091f95cafb1ae17', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'f271bfa20d06cba0cc6c5fe6b5af5c874c1e0682', class: "sd-table__no-data" }, h("div", { key: '6791f70e0b4cd1226bdcc16414249ad178b70396', class: "sd-table__no-data-content", ref: el => {
-                this.noDataContentEl = el;
-                if (el)
-                    this.syncNoDataContentObserver();
-            } }, h("slot", { key: '9cba0ff5c5ea3b4c78ccdb961de9cfe3ef2ac1e9', name: "no-data" }, h("span", { key: '1022372f37f1564b0d636c888a17cb5ab5ac2e35' }, this.resolvedNoDataLabel)))))), h("table", { key: 'e3d8c7dec8b3c76896b3063266dd5450bbfa7c13', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
-            this.pagination.rowsPerPage > 0 &&
-            this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '5410b53a9182f97406a0992464bc3435eb8439b1', class: "sd-table__pagination" }, h("sd-pagination", { key: 'aa237fe475797dd626856f5335395bdfa870f6db', 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: 'd2b98c053c6d63f0bbea73d66779dfa5c1828b5a', value: this.useInternalPagination
-                ? this.innerRowsPerPage
-                : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
-                if (!this.isRowsPerPageValue(e.detail))
-                    return;
-                this.changeRowsPerPage(e.detail);
-            } })))))));
-    }
-    static get is() { return "sd-table"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["sd-table.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["sd-table.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "tableId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD14C\uC774\uBE14 \uACE0\uC720 ID (\uC790\uC2DD \uC2AC\uB86F \uB9E4\uD551\uC5D0 \uC0AC\uC6A9)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "table-id",
-                "defaultValue": "nanoid(8)"
-            },
-            "columns": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SdTableColumn[]",
-                    "resolved": "SdTableColumn[]",
-                    "references": {
-                        "SdTableColumn": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::SdTableColumn",
-                            "referenceLocation": "SdTableColumn"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uCEEC\uB7FC \uC815\uC758 \uBAA9\uB85D"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "rows": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Row[]",
-                    "resolved": "Row[] | undefined",
-                    "references": {
-                        "Row": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::Row",
-                            "referenceLocation": "Row"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD589 \uB370\uC774\uD130 \uBC30\uC5F4"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "selected": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "Row[]",
-                    "resolved": "Row[]",
-                    "references": {
-                        "Row": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::Row",
-                            "referenceLocation": "Row"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD604\uC7AC \uC120\uD0DD\uB41C \uD589 \uBAA9\uB85D"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "rowKey": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD589 \uACE0\uC720 \uC2DD\uBCC4 \uD544\uB4DC\uBA85"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "row-key",
-                "defaultValue": "'id'"
-            },
-            "selectable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD589 \uC120\uD0DD(\uCCB4\uD06C\uBC15\uC2A4) \uAE30\uB2A5 \uD65C\uC131\uD654 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selectable",
-                "defaultValue": "false"
-            },
-            "resizable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uCEEC\uB7FC \uB108\uBE44 \uC870\uC808 \uAE30\uB2A5 \uD65C\uC131\uD654 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "resizable",
-                "defaultValue": "false"
-            },
-            "width": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD14C\uC774\uBE14 \uB108\uBE44"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width"
-            },
-            "height": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD14C\uC774\uBE14 \uB192\uC774"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "height"
-            },
-            "stickyHeader": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD5E4\uB354 \uACE0\uC815(sticky) \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "sticky-header",
-                "defaultValue": "false"
-            },
-            "stickyColumn": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SdTableStickyColumn",
-                    "resolved": "SdTableStickyColumn",
-                    "references": {
-                        "SdTableStickyColumn": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::SdTableStickyColumn",
-                            "referenceLocation": "SdTableStickyColumn"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uACE0\uC815\uD560 \uC88C\uC6B0 \uCEEC\uB7FC \uC218"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{ left: 0, right: 0 }"
-            },
-            "radius": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'default' | 'useTop' | 'full'",
-                    "resolved": "\"default\" | \"full\" | \"useTop\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "border-radius \uC81C\uC5B4"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "radius",
-                "defaultValue": "'default'"
-            },
-            "noDataLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uB370\uC774\uD130 \uC5C6\uC744 \uB54C \uD45C\uC2DC\uD560 \uBA54\uC2DC\uC9C0"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "no-data-label",
-                "defaultValue": "SdTable.DEFAULT_NO_DATA_LABEL"
-            },
-            "isLoading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uB85C\uB529 \uC2A4\uD53C\uB108 \uD45C\uC2DC \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-loading",
-                "defaultValue": "false"
-            },
-            "pagination": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SdTablePagination",
-                    "resolved": "SdTablePagination | undefined",
-                    "references": {
-                        "SdTablePagination": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::SdTablePagination",
-                            "referenceLocation": "SdTablePagination"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD398\uC774\uC9C0\uB124\uC774\uC158 \uC635\uC158"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "useInternalPagination": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD14C\uC774\uBE14 \uB0B4\uBD80\uC5D0\uC11C \uD398\uC774\uC9C0\uB124\uC774\uC158\uC744 \uC9C1\uC811 \uAD00\uB9AC\uD560\uC9C0 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "use-internal-pagination",
-                "defaultValue": "false"
-            },
-            "useRowsPerPageSelect": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD398\uC774\uC9C0\uB2F9 \uD589 \uC218 \uC120\uD0DD \uC140\uB809\uD2B8 \uD45C\uC2DC \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "use-rows-per-page-select",
-                "defaultValue": "false"
-            },
-            "dense": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD589 \uB192\uC774\uB97C \uC904\uC778 \uC870\uBC00 \uBAA8\uB4DC \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "dense",
-                "defaultValue": "false"
-            },
-            "useVirtualScroll": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uC0AC\uC6A9 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "use-virtual-scroll",
-                "defaultValue": "false"
-            },
-            "rowHeight": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uD589 \uB192\uC774 (px, \uC5C6\uC73C\uBA74 dense \uC5EC\uBD80\uC5D0 \uB530\uB77C \uC790\uB3D9)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "row-height"
-            },
-            "virtualBuffer": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uC0C1\uD558 \uBC84\uD37C \uD589 \uC218"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "virtual-buffer",
-                "defaultValue": "5"
-            },
-            "virtualEndThreshold": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uB05D \uB3C4\uB2EC \uAC10\uC9C0 \uC784\uACC4\uAC12 (\uB9C8\uC9C0\uB9C9 N\uD589 \uC774\uB0B4\uC5D0 \uB4E4\uC5B4\uC624\uBA74 \uC774\uBCA4\uD2B8 \uBC1C\uC0DD)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "virtual-end-threshold",
-                "defaultValue": "10"
-            },
-            "rowsPerPageOption": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectOption[]",
-                    "resolved": "SelectOption[]",
-                    "references": {
-                        "SelectOption": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::SelectOption",
-                            "referenceLocation": "SelectOption"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD398\uC774\uC9C0\uB2F9 \uD589 \uC218 \uC120\uD0DD \uC635\uC158 \uBAA9\uB85D"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[\n    { label: '10\uAC1C\uC529 \uBCF4\uAE30', value: 10 },\n    { label: '25\uAC1C\uC529 \uBCF4\uAE30', value: 25 },\n    { label: '50\uAC1C\uC529 \uBCF4\uAE30', value: 50 },\n    { label: '100\uAC1C\uC529 \uBCF4\uAE30', value: 100 },\n  ]"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "resolvedNoDataLabel": {},
-            "currentPage": {},
-            "innerRowsPerPage": {},
-            "innerSelected": {},
-            "columnWidths": {},
-            "scrolledLeft": {},
-            "scrolledRight": {},
-            "rowCount": {},
-            "loadingScrollTop": {},
-            "noDataBodyHeight": {},
-            "autoThead": {},
-            "autoTbody": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "sdSelectChange",
-                "name": "sdSelectChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD589 \uC120\uD0DD \uC0C1\uD0DC\uAC00 \uBCC0\uACBD\uB420 \uB54C \uC120\uD0DD\uB41C \uD589 \uBAA9\uB85D\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
-                },
-                "complexType": {
-                    "original": "Row[]",
-                    "resolved": "Row[]",
-                    "references": {
-                        "Row": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::Row",
-                            "referenceLocation": "Row"
-                        }
-                    }
-                }
-            }, {
-                "method": "sdPageChange",
-                "name": "sdPageChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD398\uC774\uC9C0\uAC00 \uBCC0\uACBD\uB420 \uB54C \uC0C8 \uD398\uC774\uC9C0 \uBC88\uD638\uB97C \uC804\uB2EC\uD569\uB2C8\uB2E4."
-                },
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                }
-            }, {
-                "method": "sdRowsPerPageChange",
-                "name": "sdRowsPerPageChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD398\uC774\uC9C0\uB2F9 \uD589 \uC218\uAC00 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
-                },
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                }
-            }, {
-                "method": "sdVirtualUpdate",
-                "name": "sdVirtualUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uAC00\uC2DC \uBC94\uC704\uAC00 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
-                },
-                "complexType": {
-                    "original": "{\n    from: number;\n    to: number;\n  }",
-                    "resolved": "{ from: number; to: number; }",
-                    "references": {}
-                }
-            }, {
-                "method": "sdVirtualReachEnd",
-                "name": "sdVirtualReachEnd",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864\uC774 \uB05D \uC784\uACC4\uAC12\uC5D0 \uB3C4\uB2EC\uD560 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
-                },
-                "complexType": {
-                    "original": "{\n    from: number;\n    to: number;\n    rowCount: number;\n    threshold: number;\n  }",
-                    "resolved": "{ from: number; to: number; rowCount: number; threshold: number; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "isRowSelected": {
-                "complexType": {
-                    "signature": "(row: Row) => Promise<boolean>",
-                    "parameters": [{
-                            "name": "row",
-                            "type": "Row",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "Row": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::Row",
-                            "referenceLocation": "Row"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "\uD589\uC774 \uC120\uD0DD\uB418\uC5B4 \uC788\uB294\uC9C0 \uD655\uC778\uD569\uB2C8\uB2E4.",
-                    "tags": []
-                }
-            },
-            "updateRowSelect": {
-                "complexType": {
-                    "signature": "(row: Row) => Promise<void>",
-                    "parameters": [{
-                            "name": "row",
-                            "type": "Row",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "Row": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::Row",
-                            "referenceLocation": "Row"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "\uD589 \uC120\uD0DD \uC0C1\uD0DC\uB97C \uD1A0\uAE00\uD569\uB2C8\uB2E4.",
-                    "tags": []
-                }
-            },
-            "toggleSelectAll": {
-                "complexType": {
-                    "signature": "(checked: boolean, rows: Row[]) => Promise<void>",
-                    "parameters": [{
-                            "name": "checked",
-                            "type": "boolean",
-                            "docs": ""
-                        }, {
-                            "name": "rows",
-                            "type": "Row[]",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "Row": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::Row",
-                            "referenceLocation": "Row"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "\uC804\uCCB4 \uD589 \uC120\uD0DD/\uD574\uC81C\uB97C \uCC98\uB9AC\uD569\uB2C8\uB2E4.",
-                    "tags": []
-                }
-            },
-            "getIsAllChecked": {
-                "complexType": {
-                    "signature": "(rows: Row[]) => Promise<boolean | null>",
-                    "parameters": [{
-                            "name": "rows",
-                            "type": "Row[]",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "Row": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "src/components/sd-table/constants.ts::Row",
-                            "referenceLocation": "Row"
-                        }
-                    },
-                    "return": "Promise<boolean | null>"
-                },
-                "docs": {
-                    "text": "\uC804\uCCB4 \uC120\uD0DD \uCCB4\uD06C \uC0C1\uD0DC\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4 (true/false/null=indeterminate).",
-                    "tags": []
-                }
-            },
-            "getStickyStyle": {
-                "complexType": {
-                    "signature": "(colIdx: number) => Promise<Record<string, string>>",
-                    "parameters": [{
-                            "name": "colIdx",
-                            "type": "number",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "Record": {
-                            "location": "global",
-                            "id": "global::Record"
-                        }
-                    },
-                    "return": "Promise<Record<string, string>>"
-                },
-                "docs": {
-                    "text": "\uC9C0\uC815\uD55C \uCEEC\uB7FC \uC778\uB371\uC2A4\uC758 sticky \uC2A4\uD0C0\uC77C \uAC1D\uCCB4\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
-                    "tags": []
-                }
-            },
-            "setRowCount": {
-                "complexType": {
-                    "signature": "(count: number) => Promise<void>",
-                    "parameters": [{
-                            "name": "count",
-                            "type": "number",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uCD1D \uD589 \uC218\uB97C \uC124\uC815\uD569\uB2C8\uB2E4.",
-                    "tags": []
-                }
-            },
-            "getPaginationInfo": {
-                "complexType": {
-                    "signature": "() => Promise<{ startIndex: number; endIndex: number; currentPage: number; rowsPerPage: number; } | null>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<{ startIndex: number; endIndex: number; currentPage: number; rowsPerPage: number; } | null>"
-                },
-                "docs": {
-                    "text": "\uD604\uC7AC \uD398\uC774\uC9C0\uB124\uC774\uC158 \uC0C1\uD0DC(startIndex, endIndex, currentPage, rowsPerPage)\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "isLoading",
-                "methodName": "handleIsLoadingChange"
-            }, {
-                "propName": "useVirtualScroll",
-                "methodName": "handleUseVirtualScrollChange"
-            }, {
-                "propName": "columns",
-                "methodName": "handleColumnsChange"
-            }, {
-                "propName": "rows",
-                "methodName": "handleRowsChange"
-            }, {
-                "propName": "rowKey",
-                "methodName": "handleRowKeyChange"
-            }, {
-                "propName": "tableId",
-                "methodName": "handleTableIdChange"
-            }, {
-                "propName": "noDataLabel",
-                "methodName": "handleNoDataLabelChange"
-            }, {
-                "propName": "selectable",
-                "methodName": "handleConfigChange"
-            }, {
-                "propName": "resizable",
-                "methodName": "handleConfigChange"
-            }, {
-                "propName": "stickyColumn",
-                "methodName": "handleConfigChange"
-            }, {
-                "propName": "stickyHeader",
-                "methodName": "handleConfigChange"
-            }, {
-                "propName": "dense",
-                "methodName": "handleConfigChange"
-            }, {
-                "propName": "selected",
-                "methodName": "handleSelectedChange"
-            }, {
-                "propName": "pagination",
-                "methodName": "handlePaginationChange"
-            }];
-    }
-}