@sellmate/design-system 1.1.0 → 1.2.0

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

@@ -45,7 +45,7 @@ let StoryVirtualTable = class StoryVirtualTable extends LitElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.detachListener?.();
-        if (this.syncRafId)
+        if (this.syncRafId !== undefined)
             cancelAnimationFrame(this.syncRafId);
     }
     firstUpdated() {
@@ -59,8 +59,7 @@ let StoryVirtualTable = class StoryVirtualTable extends LitElement {
         el.addEventListener('sdVirtualUpdate', onUpdate);
         this.detachListener = () => el.removeEventListener('sdVirtualUpdate', onUpdate);
         const trySync = () => {
-            const r = el
-                .getVirtualScrollRangeSync?.();
+            const r = el.getVirtualScrollRangeSync?.();
             if (r && typeof r.from === 'number' && typeof r.to === 'number') {
                 this.range = { from: r.from, to: r.to };
             }

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

@@ -37,17 +37,17 @@ export class SdTbody {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
+        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
             this.tableId = resolvedTableId;
         }
     }
     render() {
-        return (h(Host, { key: 'f0dacb28bae712e8f4d65bad00846da9db593307', slot: `${this.tableId}-body` }, h("tbody", { key: 'aec7d2277e617f1c186163d214e94559793b764c', class: { tbody: true } }, [
+        return (h(Host, { key: '5b55bfd73916ff1402329375de1e1fc2a7629cbd', slot: `${this.tableId}-body` }, h("tbody", { key: 'a09a532d1510166a36d592c2e59ec1765803bbbe', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: '2c428e3624ac949ee201edfd02b5e8f0bcea2e48' }),
+            h("slot", { key: 'da3827a9c2fe7a74ec3cb3eb8dee3ab039ea0535' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }

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

@@ -11,6 +11,10 @@ export class SdTd {
     // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
     // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
     sdClass;
+    dividerLeft = false;
+    dividerRight = false;
+    // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
+    useFrame = false;
     handleFieldChange(_newField, oldField) {
         this.syncSlotName();
         this.syncSpanRegistration();
@@ -27,10 +31,18 @@ export class SdTd {
     handleSdClassChange() {
         this.syncCellClassRegistration();
     }
+    handleDividerChange() {
+        this.syncCellClassRegistration();
+    }
+    handleUseFieldChange() {
+        this.syncUseFieldRegistration();
+        this.requestParentTrUpdate();
+    }
     componentWillLoad() {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
@@ -41,6 +53,7 @@ export class SdTd {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
     }
     // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
     // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
@@ -48,12 +61,14 @@ export class SdTd {
     connectedCallback() {
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
     }
     disconnectedCallback() {
         const table = this.findTable();
-        if (table && this.field && this.rowKey != null) {
+        if (table != null && this.field !== '' && this.rowKey != null) {
             table.unregisterSpanSync?.(String(this.rowKey), this.field);
             table.unregisterCellClassSync?.(String(this.rowKey), this.field);
+            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
             this.requestParentTrUpdate();
         }
     }
@@ -74,7 +89,7 @@ export class SdTd {
     }
     syncSpanRegistration() {
         const table = this.findTable();
-        if (!table?.registerSpanSync || !this.field || this.rowKey == null)
+        if (table?.registerSpanSync == null || 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));
@@ -88,27 +103,45 @@ export class SdTd {
             return;
         const oldField = prevField ?? this.field;
         const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
-        if (oldField && oldRowKey != null) {
+        if (oldField !== '' && oldRowKey != null) {
             table.unregisterCellClassSync?.(oldRowKey, oldField);
         }
-        if (!table.registerCellClassSync || !this.field || this.rowKey == null)
+        if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
             return;
-        table.registerCellClassSync(String(this.rowKey), this.field, this.sdClass);
+        const combinedClass = [
+            this.sdClass,
+            this.dividerLeft && 'td--divider-left',
+            this.dividerRight && 'td--divider-right',
+        ]
+            .filter(Boolean)
+            .join(' ') || undefined;
+        table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
         this.requestParentTrUpdate();
     }
+    syncUseFieldRegistration() {
+        const table = this.findTable();
+        if (!table || this.field === '' || this.rowKey == null)
+            return;
+        if (this.useFrame) {
+            table.registerUseFrameSync?.(String(this.rowKey), this.field);
+        }
+        else {
+            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
+        }
+    }
     syncSlotName() {
         const table = this.el.closest('sd-table');
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const tableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (this.field && this.rowKey !== undefined && tableId) {
+        if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
             this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
         }
     }
     render() {
-        return (h(Host, { key: 'a8b4cb79a6b40119087fcba358a5c8daadb70fe8', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '959b53537662f22e6bb5fe8d775530c11cbdff3b' })));
+        return (h(Host, { key: 'ececfaf265a550ee38c5c2cc2ddd2875352deb10', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'c4a43f9affc1938d882e63e91ac90d570efffa37' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {
@@ -236,6 +269,66 @@ export class SdTd {
                 "setter": false,
                 "reflect": false,
                 "attribute": "sd-class"
+            },
+            "dividerLeft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider-left",
+                "defaultValue": "false"
+            },
+            "dividerRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider-right",
+                "defaultValue": "false"
+            },
+            "useFrame": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-frame",
+                "defaultValue": "false"
             }
         };
     }
@@ -256,6 +349,15 @@ export class SdTd {
             }, {
                 "propName": "sdClass",
                 "methodName": "handleSdClassChange"
+            }, {
+                "propName": "dividerLeft",
+                "methodName": "handleDividerChange"
+            }, {
+                "propName": "dividerRight",
+                "methodName": "handleDividerChange"
+            }, {
+                "propName": "useFrame",
+                "methodName": "handleUseFieldChange"
             }];
     }
 }

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { TABLE_ID_ATTR, } from "../constants";
 import { resolveTableIconColor, resolveSortIconName, TABLE_HEADER_LAYOUT, TABLE_HEADER_TYPOGRAPHY, TABLE_HEADER_COLORS, TABLE_HEADER_RESIZING_BAR, TABLE_BORDER, } from "../sd-table.config";
 export class SdThead {
@@ -24,7 +24,7 @@ export class SdThead {
     tableEl = null;
     handleColumnsChange(newCols) {
         if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+            this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         }
     }
     componentWillLoad() {
@@ -32,7 +32,7 @@ export class SdThead {
         this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
         this.resolveConfig();
         if ((this.columnWidths ?? []).length === 0) {
-            this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
+            this.columnWidths = this._columns.map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
         }
     }
     componentDidLoad() {
@@ -49,10 +49,10 @@ export class SdThead {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
+        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
             this.tableId = resolvedTableId;
         }
     }
@@ -100,13 +100,17 @@ export class SdThead {
         const rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        const col = this.visibleColumns[colIdx];
+        const base = {
             '--sticky-left-offset': `${leftOffset}px`,
             '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
         };
+        if (!col?.autoWidth) {
+            base['width'] = `${this.columnWidths[colIdx]}px`;
+            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
+            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
+        }
+        return base;
     }
     handleResize(index, event, reversed = false) {
         if (this.tableEl?.handleResize) {
@@ -137,6 +141,7 @@ export class SdThead {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
+        const lastColIdx = this.visibleColumns.length - 1;
         const headStyle = {
             '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
             '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
@@ -152,27 +157,33 @@ export class SdThead {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: '99d8d19dcc65b811d323e21041421b2d57da9f91', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '7614b6726ec13e857b6b8654925b0ba3c89fba64', class: {
+        return (h(Host, { key: '424fa72b833a94bce945ae50e8445cbed0527025', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '1a5704d78992b553c5db5ba92bb3814de7c19898', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '68a615e7779947c1ee8cc26027c5bcded545e4d3', class: "tr" }, this._selectable && (h("th", { key: 'd3bc4512a24652ee156104a0fd9891504ce314dd', class: {
+            } }, h("tr", { key: '1369ff7c99a5691bcd5fa54af4f7c02ff41dceb3', class: "tr" }, this._selectable && (h("th", { key: '72159c6f8ef28b0b93790e180cb9b12345727525', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'de8f9b201aca60acbbb28a3233e964100109a92b', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '1c5c035346fc6d13d956475480374a8bd93d3d6d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && idx !== lastColIdx && (
+        // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             return (h("th", { key: col.name, class: {
                     th: true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && actualColIdx !== lastColIdx && (
+            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
             return (h("th", { key: col.name, class: {
@@ -181,7 +192,10 @@ export class SdThead {
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (
+            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
         })))));
     }
     static get is() { return "sd-thead"; }

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

@@ -18,7 +18,7 @@ sd-tr * {
 .td {
   display: table-cell;
   height: var(--table-body-height, 44px);
-  padding: 0 var(--table-body-padding-x, 16px);
+  padding: var(--table-body-padding-y, 0) var(--table-body-padding-x, 16px);
   border-bottom: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
   background: white;
   vertical-align: middle;
@@ -120,4 +120,23 @@ sd-tr * {
 
 .td.td--last-row {
   border-bottom: none;
+}
+
+.tr--separator .td--separator {
+  height: var(--table-separator-width, 6px);
+  padding: 0;
+  background-color: var(--table-separator-color, #eeeeee);
+  border-bottom: none;
+}
+
+.td.td--before-separator {
+  border-bottom: none;
+}
+
+.td--divider-left {
+  border-left: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
+}
+
+.td--divider-right {
+  border-right: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
 }

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { TABLE_ID_ATTR, } from "../constants";
-import { TABLE_BODY_LAYOUT, TABLE_BODY_TYPOGRAPHY, TABLE_BORDER, } from "../sd-table.config";
+import { TABLE_BODY_LAYOUT, TABLE_BODY_TYPOGRAPHY, TABLE_BORDER, TABLE_SEPARATOR, } from "../sd-table.config";
 export class SdTr {
     el;
     columns;
@@ -8,6 +8,7 @@ export class SdTr {
     stickyColumn;
     rowKey = '';
     row = {};
+    separator;
     tableId = '';
     columnWidths = [];
     isVisible = true;
@@ -17,16 +18,32 @@ export class SdTr {
     _stickyColumn = { left: 0, right: 0 };
     _scrolledLeft = false;
     _scrolledRight = false;
+    _dense = false;
     tableEl = null;
+    _prevRowKey = null;
     componentWillLoad() {
         this.syncTableContext();
         this.columnWidths = this.columnWidths ?? [];
         this.resolveConfig();
-        this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
+        this.columnWidths = this._columns.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         this.updateVisibilitySync();
     }
     componentDidLoad() {
         this.syncTableContext();
+        if (this.separator) {
+            const prev = this.el.previousElementSibling;
+            if (prev?.tagName?.toLowerCase() === 'sd-tr') {
+                const prevRowKey = prev.rowKey;
+                this._prevRowKey = prevRowKey;
+                this.tableEl?.registerSeparatorSync?.(prevRowKey);
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this._prevRowKey !== null) {
+            this.tableEl?.unregisterSeparatorSync?.(this._prevRowKey);
+            this._prevRowKey = null;
+        }
     }
     syncTableContext() {
         // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
@@ -38,10 +55,10 @@ export class SdTr {
         this.tableEl = table;
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
+        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
             this.tableId = resolvedTableId;
         }
     }
@@ -52,6 +69,7 @@ export class SdTr {
         this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
         this._scrolledLeft = config?.scrolledLeft ?? false;
         this._scrolledRight = config?.scrolledRight ?? false;
+        this._dense = config?.dense ?? false;
         if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
             this.columnWidths = [...config.columnWidths];
         }
@@ -97,7 +115,11 @@ export class SdTr {
     }
     getCellValue(column) {
         const { field, format, name } = column;
-        const value = typeof field === 'function' ? field(this.row) : field ? this.row[field] : this.row[name];
+        const value = typeof field === 'function'
+            ? field(this.row)
+            : field !== ''
+                ? this.row[field]
+                : this.row[name];
         return format ? format(value, this.row) : this.formatValue(value);
     }
     getStickyStyle(colIdx) {
@@ -108,13 +130,17 @@ export class SdTr {
         const rightOffset = this.columnWidths
             .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        const col = this.visibleColumns[colIdx];
+        const base = {
             '--sticky-left-offset': `${leftOffset}px`,
             '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
         };
+        if (!col?.autoWidth) {
+            base['width'] = `${this.columnWidths[colIdx]}px`;
+            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
+            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
+        }
+        return base;
     }
     isSelected() {
         if (this.tableEl?.isRowSelectedSync) {
@@ -144,6 +170,14 @@ export class SdTr {
         const fieldName = typeof col.field === 'string' ? col.field : col.name;
         return this.tableEl.getCellClassSync(this.rowKey, fieldName);
     }
+    expandCellClass(classStr) {
+        if (classStr == null || classStr === '')
+            return {};
+        return Object.fromEntries(classStr
+            .split(/\s+/)
+            .filter(Boolean)
+            .map(c => [c, true]));
+    }
     isVisualLastRow(col) {
         if (!this.tableEl?.isVisualLastRowSync)
             return false;
@@ -158,6 +192,17 @@ export class SdTr {
             return false;
         return this.tableEl.isVisualLastRowSync(this.rowKey, '');
     }
+    isVisualLastRowBeforeSeparator(col) {
+        if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
+            return false;
+        const fieldName = typeof col.field === 'string' ? col.field : col.name;
+        return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, fieldName);
+    }
+    isVisualLastRowBeforeSeparatorForSelfRow() {
+        if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
+            return false;
+        return this.tableEl.isVisualLastRowBeforeSeparatorSync(this.rowKey, '');
+    }
     render() {
         const stickyLeftCount = this._stickyColumn.left || 0;
         const stickyRightCount = this._stickyColumn.right || 0;
@@ -165,9 +210,13 @@ export class SdTr {
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
         const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
+        const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
+        const effectiveDense = this._dense && !isUseFrameRow;
+        const bodyLayout = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
         const rowStyle = {
-            display: this.isVisible ? '' : 'none',
-            '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
+            'display': this.isVisible ? '' : 'none',
+            '--table-body-height': `${bodyLayout.height}px`,
+            '--table-body-padding-y': `${bodyLayout.paddingY}px`,
             '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
             '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
             '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
@@ -176,15 +225,22 @@ export class SdTr {
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
+            '--table-separator-color': TABLE_SEPARATOR.color,
+            '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
         };
-        return (h(Host, { key: '30e4127b281770d12fab9e9cfd2cdf667eff8790', style: rowStyle }, h("tr", { key: '1072ce3f1b296e2278b7fc92a44d32da223ef119', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { key: '4e3a37a320df97378a1ed311c0a7b8f744bd26bc', class: {
+        if (this.separator) {
+            const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
+            return (h(Host, { style: rowStyle }, h("tr", { class: "tr tr--separator" }, h("td", { colSpan: totalCols, class: "td td--separator" }))));
+        }
+        return (h(Host, { style: rowStyle }, h("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { class: {
                 'td': true,
                 'td--selected': true,
                 'td--last-row': this.isVisualLastRowForSelfRow(),
+                'td--before-separator': this.isVisualLastRowBeforeSeparatorForSelfRow(),
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'b1a775462c4869f75480908bccd428714c63c257', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
             if (this.isCovered(idx))
                 return null;
             const span = this.getSpanFor(col);
@@ -193,11 +249,12 @@ export class SdTr {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
                     'td--last-row': this.isVisualLastRow(col),
+                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     'sticky-left': true,
                     'sticky-left-edge': idx === stickyLeftCount - 1,
                     'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
                     [`${col.tdClass}`]: Boolean(col.tdClass),
-                    [`${sdCellClass}`]: Boolean(sdCellClass),
+                    ...this.expandCellClass(sdCellClass),
                 }, style: this.getStickyStyle(idx) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
@@ -210,8 +267,9 @@ export class SdTr {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
                     'td--last-row': this.isVisualLastRow(col),
+                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     [`${col.tdClass}`]: Boolean(col.tdClass),
-                    [`${sdCellClass}`]: Boolean(sdCellClass),
+                    ...this.expandCellClass(sdCellClass),
                 }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
@@ -224,11 +282,12 @@ export class SdTr {
                     'td': true,
                     [`td--${col.align || 'left'}`]: true,
                     'td--last-row': this.isVisualLastRow(col),
+                    'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
                     [`${col.tdClass}`]: Boolean(col.tdClass),
-                    [`${sdCellClass}`]: Boolean(sdCellClass),
+                    ...this.expandCellClass(sdCellClass),
                 }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
         }))));
     }
@@ -356,6 +415,25 @@ export class SdTr {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "{}"
+            },
+            "separator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator"
             }
         };
     }
@@ -369,7 +447,8 @@ export class SdTr {
             "_selectable": {},
             "_stickyColumn": {},
             "_scrolledLeft": {},
-            "_scrolledRight": {}
+            "_scrolledRight": {},
+            "_dense": {}
         };
     }
     static get methods() {