@sellmate/design-system 1.0.75 → 1.0.77

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

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: 'ac6a35d06ddd04bc94369014ff586766dd745bbb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '9ebc810e93c9dfa3bf7407f279dadbada579196e', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '7add76be99645d6434e95305f6318fac7da0de57', class: "sd-switch__track" }, h("div", { key: 'ed90778aa4dcd6f0853029579c36cfdb8640afcf', class: "sd-switch__knob" })), this.label && h("span", { key: '70e3ddf819e77da4c693a4853ddb7f392381964e', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,81 @@
+import tableTokens from "../../tokens/generated/component.table.json";
+import systemTokens from "../../tokens/generated/system.json";
+// ── Header Tokens ──
+export const TABLE_HEADER_LAYOUT = {
+    height: tableTokens.table.header.height,
+    paddingX: tableTokens.table.header.paddingX,
+    gap: tableTokens.table.header.gap,
+};
+export const TABLE_HEADER_TYPOGRAPHY = {
+    fontFamily: tableTokens.table.header.typography.fontFamily,
+    fontWeight: tableTokens.table.header.typography.fontWeight,
+    fontSize: tableTokens.table.header.typography.fontSize,
+    lineHeight: tableTokens.table.header.typography.lineHeight,
+    textDecoration: tableTokens.table.header.typography.textDecoration,
+};
+export const TABLE_HEADER_COLORS = {
+    bg: tableTokens.table.header.bg,
+};
+export const TABLE_HEADER_RESIZING_BAR = {
+    color: tableTokens.table.header.resizingBar.color,
+    height: tableTokens.table.header.resizingBar.height,
+};
+// ── Body Tokens ──
+export const TABLE_BODY_LAYOUT = {
+    default: {
+        height: tableTokens.table.body.default.height,
+        paddingY: tableTokens.table.body.default.paddingY,
+    },
+    dense: {
+        height: tableTokens.table.body.dense.height,
+        paddingY: tableTokens.table.body.dense.paddingY,
+    },
+    paddingX: tableTokens.table.body.paddingX,
+    framePadding: tableTokens.table.body.frame.padding,
+};
+export const TABLE_BODY_TYPOGRAPHY = {
+    fontFamily: tableTokens.table.body.typography.fontFamily,
+    fontWeight: tableTokens.table.body.typography.fontWeight,
+    fontSize: tableTokens.table.body.typography.fontSize,
+    lineHeight: tableTokens.table.body.typography.lineHeight,
+    textDecoration: tableTokens.table.body.typography.textDecoration,
+};
+// ── Frame / Border Tokens ──
+export const TABLE_BORDER = {
+    color: tableTokens.table.border.default,
+    width: tableTokens.table.border.width.width,
+};
+export const TABLE_RADIUS = tableTokens.table.radius;
+// ── Content Tokens ──
+export const TABLE_CONTENT = {
+    gap: tableTokens.table.content.gap,
+};
+// ── Bar Tokens ──
+export const TABLE_BAR_LAYOUT = {
+    height: tableTokens.table.bar.height,
+    sectionGap: tableTokens.table.bar.section.gap,
+    dividerHeight: tableTokens.table.bar.divider.height,
+};
+export const TABLE_BAR_COLORS = {
+    count: {
+        total: tableTokens.table.bar.count.total,
+        null: tableTokens.table.bar.count.null,
+    },
+};
+// ── KeyValue Tokens ──
+export const TABLE_KEY_VALUE = {
+    bodyPadding: tableTokens.table.keyValue.body.padding,
+    // TODO: 오타 수정 요청 후 변경
+    height: tableTokens.table.keyVlaue.height,
+};
+// ── Header Icon Color Defaults ──
+const ICON_DEFAULT_COLOR = {
+    pageEdit: systemTokens.color.darkblue.strong,
+    arrowDown: systemTokens.color.darkblue.strong,
+    arrowUp: systemTokens.color.darkblue.strong,
+    updown: systemTokens.color.grey.strong,
+    pageMove: systemTokens.color.darkblue.strong,
+    star: systemTokens.color.blue.strong,
+};
+export const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
+export const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';

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

@@ -11,7 +11,7 @@ sd-table *,
 }
 
 .sd-table__container {
-  height: var(--table-height, auto);
+  height: var(--table-height, 100%);
   width: var(--table-width, 100%);
   max-width: 100%;
   min-width: 0;
@@ -24,12 +24,12 @@ sd-table *,
   width: 100%;
   min-width: 0;
   height: var(--table-container-height, 400px);
-  border: 1px solid #E1E1E1;
-  border-radius: 8px;
+  border: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
+  border-radius: var(--table-radius, 8px);
   overflow: hidden;
 }
 .sd-table__clip--has-pagination {
-  border-radius: 8px 8px 0 0;
+  border-radius: var(--table-radius, 8px) var(--table-radius, 8px) 0 0;
 }
 
 .sd-table__wrapper {
@@ -38,7 +38,11 @@ sd-table *,
   display: flex;
   flex-direction: column;
   position: relative;
-  font-size: 12px;
+  font-family: var(--table-body-font-family, inherit);
+  font-weight: var(--table-body-font-weight, 400);
+  font-size: var(--table-body-font-size, 12px);
+  line-height: var(--table-body-line-height, 20px);
+  text-decoration: var(--table-body-text-decoration, none);
   overflow: auto;
   background: #FFFFFF;
 }
@@ -57,12 +61,16 @@ sd-table *,
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: var(--table-body-font-size, 12px);
   color: #888888;
   pointer-events: none;
   z-index: 200;
   background: rgba(255, 255, 255, 0.6);
 }
+.sd-table__no-data ::slotted(*),
+.sd-table__no-data span {
+  pointer-events: auto;
+}
 
 .sd-table__loading {
   position: absolute;
@@ -121,11 +129,11 @@ sd-table *,
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #E1E1E1;
+  border: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
   border-top: none;
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 var(--table-radius, 8px) var(--table-radius, 8px);
 }
-.sd-table__pagination sd-select-v2 {
+.sd-table__pagination sd-select {
   position: absolute;
   right: 10px;
   top: 50%;

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

@@ -1,6 +1,7 @@
-import { h, Host, readTask, } from "@stencil/core";
+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 } from "./sd-table.config";
 export class SdTable {
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
@@ -47,11 +48,17 @@ export class SdTable {
     scrolledRight = false;
     rowCount = 0;
     loadingScrollTop = 0;
+    // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
+    // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
+    autoThead = false;
+    autoTbody = false;
     vsStart = 0;
     vsEnd = 0;
     lastReachEndNotifiedRowCount = -1;
     scrollContainer = null;
     onScroll;
+    // 키: `${rowKey}::${field}` → { rowspan, colspan }
+    spanRegistry = new Map();
     toFiniteNumber(value, fallback) {
         const n = typeof value === 'number' ? value : Number(value);
         return Number.isFinite(n) ? n : fallback;
@@ -130,9 +137,16 @@ export class SdTable {
             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 => parseInt(c.width || '120', 10));
         if (this.pagination?.page) {
@@ -155,6 +169,11 @@ export class SdTable {
         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);
         if (Array.isArray(this.rows)) {
             this.rowCount = this.rows.length;
             this.pushRowsToChildren(this.rows);
@@ -203,11 +222,22 @@ export class SdTable {
             this.scrollContainer.removeEventListener('scroll', this.onScroll);
         }
     }
+    // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
+    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.el.querySelector('sd-tbody');
+        const tbody = this.queryChildEl('sd-tbody');
         if (tbody)
             tbody.rows = rows;
-        const thead = this.el.querySelector('sd-thead');
+        const thead = this.queryChildEl('sd-thead');
         if (thead)
             thead.rows = rows;
     }
@@ -218,16 +248,14 @@ export class SdTable {
         this.refreshChildrenConfig();
     };
     refreshChildrenSelection() {
-        const thead = this.el.querySelector('sd-thead');
-        const rows = this.el.querySelectorAll('sd-tr');
+        const thead = this.queryChildEl('sd-thead');
         thead?.refreshSelection?.();
-        rows.forEach(tr => tr?.refreshSelection?.());
+        this.queryAllTr().forEach(tr => tr?.refreshSelection?.());
     }
     refreshChildrenConfig() {
-        const thead = this.el.querySelector('sd-thead');
-        const rows = this.el.querySelectorAll('sd-tr');
+        const thead = this.queryChildEl('sd-thead');
         thead?.refreshConfig?.();
-        rows.forEach(tr => tr?.refreshConfig?.());
+        this.queryAllTr().forEach(tr => tr?.refreshConfig?.());
     }
     maybeEmitVirtualReachEnd(start, end) {
         const threshold = Math.max(1, this.virtualEndThreshold);
@@ -259,7 +287,7 @@ export class SdTable {
         this.vsEnd = end;
         const topHeight = start * this.rowHeight;
         const bottomHeight = Math.max(0, (this.rowCount - end) * this.rowHeight);
-        const tbody = this.el.querySelector('sd-tbody');
+        const tbody = this.queryChildEl('sd-tbody');
         tbody?.setSpacersSync?.(topHeight, bottomHeight);
         if (rangeChanged) {
             this.sdVirtualUpdate.emit({
@@ -351,8 +379,7 @@ export class SdTable {
         this.updateRowsVisibility();
     }
     updateRowsVisibility() {
-        const rows = this.el.querySelectorAll('sd-tr');
-        rows.forEach(tr => tr?.updateVisibility?.());
+        this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
     }
     changeRowsPerPage(perPage) {
         const changedRowsPerPage = perPage ? Number(perPage) : 0;
@@ -389,10 +416,9 @@ export class SdTable {
             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.el.querySelector('sd-thead');
-            const rows = this.el.querySelectorAll('sd-tr');
+            const thead = this.queryChildEl('sd-thead');
             thead?.setColumnWidths?.(this.columnWidths);
-            rows.forEach(tr => tr?.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;
@@ -429,6 +455,112 @@ export class SdTable {
     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 => {
+            const trAny = tr;
+            if (typeof trAny.bumpSpansVersion === 'function') {
+                trAny.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));
+    }
+    // 레지스트리에 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)
+                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. 위쪽 행 스캔 — 숫자 변환 가능한 rowKey만 rowspan 평가
+        const myRowIdx = Number(rowKey);
+        if (!Number.isFinite(myRowIdx))
+            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 = Number(otherRowKey);
+            if (!Number.isFinite(otherRowIdx))
+                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) {
@@ -476,6 +608,20 @@ export class SdTable {
             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',
@@ -495,24 +641,34 @@ export class SdTable {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (h(Host, { key: '0b90643721a90b7bb59a6c31f6edeb313849b973' }, h("div", { key: 'e55fe4f476dbea4888a168861e7e6d6951d7d489', class: "sd-table__container", style: {
+        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,
+        };
+        return (h(Host, { key: '1a80b7c3589a8a2eefaabf24ed895c927543aac4', style: hostStyle }, h("div", { key: 'd97aa6c04948153671e26066b6df02e206fc35e6', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
                 '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
-            } }, h("div", { key: 'de18a900037a7b2f619dd22981c30ed76f5a8111', class: {
+            } }, h("div", { key: '0e13dbbe062953c93a0acaaf5c00ca40a5b7e245', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, h("div", { key: '028e0982d415033adaf420ee6b953241c8f3dbec', class: {
+            } }, h("div", { key: 'c800ecac543d1540d9b6c9faf06753c9dc10aaf3', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--loading': this.isLoading,
                 'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (h("div", { key: '8c9110c9c2c26cddbbed8e1f2782ecfaafd3679c', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '51b61f91b0ecebf63fe3e65b94012963f0375e5c', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '0a7a45049014869b8164b081a251218d3c814e87', class: "sd-table__no-data" }, h("slot", { key: 'd4b6219e5dcaaa22be3360f7f0f05a8b32533890', name: "no-data" }, h("span", { key: 'c76848aad8a1d3967f3cd239090e97266e46ab3e' }, this.resolvedNoDataLabel)))), h("table", { key: '2b560d112402549c7043b337d944b0de88c3ba0e', class: this.tableClasses }, h("slot", { key: '1c4583148df6a585f389c1bed0426fa4a3cb4899', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), h("slot", { key: 'a5d983106de61c829f9cbeb541d1908fee48468c', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
+            } }, this.isLoading && (h("div", { key: '656bc53538c8513e014f31f1e976fd66ce79c7aa', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '74078add6860fc95e238d89335d57e205e751cd6', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '18a33a7247bde3d08472f8082325c76217734e5d', class: "sd-table__no-data" }, h("slot", { key: '966cb066f721695013a3e5a1a64543544b09fa77', name: "no-data" }, h("span", { key: 'd335a9b1b2e847b267cefb9d12f7265c5f67f394' }, this.resolvedNoDataLabel)))), h("table", { key: '8fd0a2428bfd4dd6a574bbb02139088c31408866', 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: '004355d84e2cfc2fd38a9d4811f14fd66dc5c21b', class: "sd-table__pagination" }, h("sd-pagination", { key: '463586c7e57782a7989962f73cb3d4e8c04f5bce', 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-v2", { key: '1f26de447da63ef0c4a24ffb49666a0687db9991', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '6f483b1a23456bbe42ff769a50c9de5638e7754f', class: "sd-table__pagination" }, h("sd-pagination", { key: '841c545c23de8b4bba4cce3c9f6608d16f7b4e54', 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: 'a67e17bf3067953169ffa119ee41b1d7f46c2058', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -992,7 +1148,9 @@ export class SdTable {
             "scrolledLeft": {},
             "scrolledRight": {},
             "rowCount": {},
-            "loadingScrollTop": {}
+            "loadingScrollTop": {},
+            "autoThead": {},
+            "autoTbody": {}
         };
     }
     static get events() {

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

@@ -7,12 +7,4 @@
 
 .tbody {
   display: table-row-group;
-}
-.tbody--empty .tbody__no-data-row {
-  display: table-row;
-}
-.tbody--empty .tbody__no-data-cell {
-  display: table-cell;
-  padding: 0;
-  border-bottom: none;
 }

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

@@ -28,7 +28,12 @@ export class SdTbody {
         this.syncTableContext();
     }
     syncTableContext() {
-        const table = this.el.closest('sd-table');
+        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
+        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
+        const closest = this.el.closest('sd-table');
+        const root = this.el.getRootNode();
+        const fromShadow = root instanceof ShadowRoot ? root.host : null;
+        const table = closest ?? fromShadow;
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
@@ -40,12 +45,11 @@ export class SdTbody {
         }
     }
     render() {
-        const hasRows = this.rows.length > 0;
-        return (h(Host, { key: 'e4c64dbf97185bbc6eaec4b883c65dc8ebd34ece', slot: `${this.tableId}-body` }, h("tbody", { key: 'b2fb886684a5a6055d3af659bba75dd9bc801b73', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+        return (h(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, h("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", null),
+            h("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
-        ]) : (h("tr", { class: "tbody__no-data-row" }, h("td", { class: "tbody__no-data-cell", colSpan: 100 }, h("slot", { name: "no-data" })))))));
+        ])));
     }
     static get is() { return "sd-tbody"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,14 +5,22 @@ export class SdTd {
     field;
     rowKey;
     align;
+    rowspan;
+    colspan;
     handleFieldChange() {
         this.syncSlotName();
+        this.syncSpanRegistration();
     }
     handleRowKeyChange() {
         this.syncSlotName();
+        this.syncSpanRegistration();
+    }
+    handleSpanChange() {
+        this.syncSpanRegistration();
     }
     componentWillLoad() {
         this.syncSlotName();
+        this.syncSpanRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
@@ -21,6 +29,44 @@ export class SdTd {
     }
     componentDidLoad() {
         this.syncSlotName();
+        this.syncSpanRegistration();
+    }
+    // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
+    // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
+    // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
+    connectedCallback() {
+        this.syncSpanRegistration();
+    }
+    disconnectedCallback() {
+        const table = this.findTable();
+        if (table?.unregisterSpanSync && this.field && this.rowKey != null) {
+            table.unregisterSpanSync(String(this.rowKey), this.field);
+            this.requestParentTrUpdate();
+        }
+    }
+    findTable() {
+        return this.el.closest('sd-table');
+    }
+    requestParentTrUpdate() {
+        const parentTr = this.el.parentElement;
+        if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
+            return;
+        const trAny = parentTr;
+        if (typeof trAny.bumpSpansVersion === 'function') {
+            trAny.bumpSpansVersion();
+        }
+        else {
+            forceUpdate(parentTr);
+        }
+    }
+    syncSpanRegistration() {
+        const table = this.findTable();
+        if (!table?.registerSpanSync || !this.field || this.rowKey == null)
+            return;
+        const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
+        const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
+        table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
+        this.requestParentTrUpdate();
     }
     syncSlotName() {
         const table = this.el.closest('sd-table');
@@ -34,7 +80,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: '672c967273dac405ed4a47fa5939463265075681', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'c15e572fdf4a8c68fff8b69b586dfbf9f01dce1b' })));
+        return (h(Host, { key: '1702396f538453cf26beb81b63926ea73b7baa89', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'bd04afefd83178f48eb93b4e7d189386a817ff72' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {
@@ -105,6 +151,44 @@ export class SdTd {
                 "setter": false,
                 "reflect": false,
                 "attribute": "align"
+            },
+            "rowspan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rowspan"
+            },
+            "colspan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colspan"
             }
         };
     }
@@ -116,6 +200,12 @@ export class SdTd {
             }, {
                 "propName": "rowKey",
                 "methodName": "handleRowKeyChange"
+            }, {
+                "propName": "rowspan",
+                "methodName": "handleSpanChange"
+            }, {
+                "propName": "colspan",
+                "methodName": "handleSpanChange"
             }];
     }
 }