@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -1,7 +1,7 @@
 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";
+import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY, TABLE_BODY_LAYOUT } from "./sd-table.config";
 export class SdTable {
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
@@ -17,15 +17,22 @@ export class SdTable {
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
+    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;
-    rowHeight = 40;
+    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;
     virtualEndThreshold = 10;
     // ─────────────────────────────────────────────────────────────────
@@ -48,6 +55,7 @@ export class SdTable {
     scrolledRight = false;
     rowCount = 0;
     loadingScrollTop = 0;
+    noDataBodyHeight = 60;
     // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
     // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
     autoThead = false;
@@ -56,12 +64,19 @@ export class SdTable {
     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();
+    // separator 직전 행의 시각적 인덱스 집합
+    separatorPrevIndices = new Set();
     // rowKey 문자열 → rows 배열에서의 visual index.
     // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
     // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
@@ -120,6 +135,7 @@ export class SdTable {
         if (newVal) {
             this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
         }
+        this.syncNoDataContentObserver();
     }
     handleUseVirtualScrollChange(newVal) {
         if (newVal) {
@@ -128,7 +144,7 @@ export class SdTable {
         }
     }
     handleColumnsChange(newCols) {
-        this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+        this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         this.refreshChildrenConfig();
     }
     handleRowsChange(newRows) {
@@ -139,6 +155,7 @@ export class SdTable {
         if (this.useVirtualScroll)
             this.propagateVirtualUpdate(true);
         this.pushRowsToChildren(newRows);
+        this.syncNoDataContentObserver();
     }
     handleRowKeyChange() {
         this.rebuildRowIndexMap();
@@ -164,10 +181,10 @@ export class SdTable {
         this.innerSelected = new Set(newSelected);
     }
     handlePaginationChange(newVal) {
-        if (newVal?.page && newVal.page !== this.currentPage) {
+        if (newVal?.page != null && newVal.page !== this.currentPage) {
             this.currentPage = newVal.page;
         }
-        if (newVal?.rowsPerPage && newVal.rowsPerPage !== this.innerRowsPerPage) {
+        if (newVal?.rowsPerPage != null && newVal.rowsPerPage !== this.innerRowsPerPage) {
             this.innerRowsPerPage = newVal.rowsPerPage;
         }
     }
@@ -182,12 +199,12 @@ export class SdTable {
         this.handleNoDataLabelChange(this.noDataLabel);
         this.detectChildren();
         this.innerSelected = new Set(this.selected || []);
-        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.rebuildRowIndexMap();
-        if (this.pagination?.page) {
+        if (this.pagination?.page != null) {
             this.currentPage = this.pagination.page;
         }
-        if (this.pagination?.rowsPerPage) {
+        if (this.pagination?.rowsPerPage != null) {
             this.innerRowsPerPage = this.pagination.rowsPerPage;
         }
         const el = this.el;
@@ -208,10 +225,17 @@ export class SdTable {
         el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
         el.getSpanSync = this.getSpanSync.bind(this);
         el.isCoveredSync = this.isCoveredSync.bind(this);
+        el.isVisualLastRowSync = this.isVisualLastRowSync.bind(this);
+        el.registerSeparatorSync = this.registerSeparatorSync.bind(this);
+        el.unregisterSeparatorSync = this.unregisterSeparatorSync.bind(this);
+        el.isVisualLastRowBeforeSeparatorSync = this.isVisualLastRowBeforeSeparatorSync.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);
         if (Array.isArray(this.rows)) {
             this.rowCount = this.rows.length;
             this.pushRowsToChildren(this.rows);
@@ -222,7 +246,7 @@ export class SdTable {
             this.pushRowsToChildren(this.rows);
         }
         readTask(() => {
-            const wrapper = this.el.shadowRoot?.querySelector('.sd-table__wrapper');
+            const wrapper = this.el.shadowRoot?.querySelector('.sd-table__scroll-container');
             if (!wrapper)
                 return;
             let rafPending = false;
@@ -254,11 +278,43 @@ export class SdTable {
                 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);
+        const measured = Math.ceil(target.scrollHeight);
+        this.noDataBodyHeight = Math.max(60, measured);
     }
     // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
     queryChildEl(selector) {
@@ -323,8 +379,8 @@ export class SdTable {
             return;
         this.vsStart = start;
         this.vsEnd = end;
-        const topHeight = start * this.rowHeight;
-        const bottomHeight = Math.max(0, (this.rowCount - end) * this.rowHeight);
+        const topHeight = start * this.effectiveRowHeight;
+        const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
         const tbody = this.queryChildEl('sd-tbody');
         tbody?.setSpacersSync?.(topHeight, bottomHeight);
         if (rangeChanged) {
@@ -338,7 +394,7 @@ export class SdTable {
     getVirtualScrollConfigSync() {
         return {
             useVirtualScroll: this.useVirtualScroll,
-            rowHeight: this.rowHeight,
+            rowHeight: this.effectiveRowHeight,
             virtualBuffer: this.virtualBuffer,
             vsStart: this.vsStart,
             vsEnd: this.vsEnd,
@@ -355,10 +411,35 @@ export class SdTable {
             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;
+    }
     isRowSelectedSync(row) {
-        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+        return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
     }
     async isRowSelected(row) {
         return this.isRowSelectedSync(row);
@@ -367,7 +448,7 @@ export class SdTable {
         const selectedArray = Array.from(this.innerSelected);
         const exists = this.isRowSelectedSync(row);
         const newSelected = exists
-            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
+            ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
             : [...selectedArray, row];
         if (newSelected.length === selectedArray.length)
             return;
@@ -385,8 +466,8 @@ export class SdTable {
             this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
         }
         else {
-            const currentPageKeys = rows.map(r => r[this.rowKey]);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
+            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));
@@ -397,7 +478,7 @@ export class SdTable {
     }
     getIsAllCheckedSync(rows) {
         const total = rows.length;
-        const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).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)
@@ -420,7 +501,7 @@ export class SdTable {
         this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
     }
     changeRowsPerPage(perPage) {
-        const changedRowsPerPage = perPage ? Number(perPage) : 0;
+        const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
         if (!this.useInternalPagination) {
             this.sdRowsPerPageChange.emit(changedRowsPerPage);
             return;
@@ -447,7 +528,7 @@ export class SdTable {
         const startWidth = this.columnWidths[index];
         const handleMouseMove = (moveEvent) => {
             const col = this.columns[index];
-            if (!col)
+            if (col == null)
                 return;
             const minWidth = col.minWidth || 50;
             const maxWidth = col.maxWidth || 9999;
@@ -482,13 +563,17 @@ export class SdTable {
             this.columns.filter(c => c.visible !== false).length -
                 (this.stickyColumn?.right || 0) && i > colIdx)
             .reduce((a, b) => a + b, 0);
-        return {
+        const visibleCol = this.columns.filter(c => c.visible !== false)[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 (!visibleCol?.autoWidth) {
+            base['width'] = `${this.columnWidths[colIdx]}px`;
+            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
+            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
+        }
+        return base;
     }
     async getStickyStyle(colIdx) {
         return this.getStickyStyleSync(colIdx);
@@ -517,7 +602,7 @@ export class SdTable {
         });
     }
     registerSpanSync(rowKey, field, rowspan, colspan) {
-        if (rowKey == null || !field)
+        if (rowKey == null || field === '')
             return;
         const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
         const safeColspan = Math.max(1, Math.floor(colspan || 1));
@@ -536,7 +621,7 @@ export class SdTable {
         this.requestAllTrUpdate();
     }
     unregisterSpanSync(rowKey, field) {
-        if (rowKey == null || !field)
+        if (rowKey == null || field === '')
             return;
         const key = this.spanKey(rowKey, field);
         if (!this.spanRegistry.has(key))
@@ -551,18 +636,18 @@ export class SdTable {
     // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
     // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
     registerCellClassSync(rowKey, field, cls) {
-        if (rowKey == null || !field)
+        if (rowKey == null || field === '')
             return;
         const key = this.spanKey(rowKey, field);
         const safe = (cls ?? '').trim();
-        if (!safe) {
+        if (safe === '') {
             this.cellClassRegistry.delete(key);
             return;
         }
         this.cellClassRegistry.set(key, safe);
     }
     unregisterCellClassSync(rowKey, field) {
-        if (rowKey == null || !field)
+        if (rowKey == null || field === '')
             return;
         this.cellClassRegistry.delete(this.spanKey(rowKey, field));
     }
@@ -585,7 +670,7 @@ export class SdTable {
         // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
         for (let i = 0; i < colIdx; i++) {
             const c = visibleCols[i];
-            if (!c)
+            if (c == null)
                 continue;
             const field = typeof c.field === 'string' ? c.field : c.name;
             const span = this.spanRegistry.get(this.spanKey(rowKey, field));
@@ -623,6 +708,50 @@ export class SdTable {
         }
         return false;
     }
+    // rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
+    // isVisualLastRowSync·isVisualLastRowBeforeSeparatorSync 공통 헬퍼.
+    resolveVisualBottom(rowKey, field) {
+        const myRowIdx = this.resolveRowIndex(rowKey);
+        if (myRowIdx == null)
+            return null;
+        const span = this.spanRegistry.get(this.spanKey(rowKey, field));
+        const rs = Math.max(1, span?.rowspan ?? 1);
+        return myRowIdx + rs - 1;
+    }
+    // 셀의 시각적 하단이 테이블(또는 현재 페이지)의 마지막 행인지 판정.
+    // 마지막 행에 border-bottom: none을 적용하기 위함.
+    isVisualLastRowSync(rowKey, field) {
+        if (this.rowCount <= 0)
+            return false;
+        const visualBottom = this.resolveVisualBottom(rowKey, field);
+        if (visualBottom == null)
+            return false;
+        const pageInfo = this.getPaginationInfoSync();
+        const lastVisibleIdx = pageInfo
+            ? Math.min(pageInfo.endIndex - 1, this.rowCount - 1)
+            : this.rowCount - 1;
+        return visualBottom === lastVisibleIdx;
+    }
+    registerSeparatorSync(prevRowKey) {
+        const idx = this.resolveRowIndex(prevRowKey);
+        if (idx != null)
+            this.separatorPrevIndices.add(idx);
+    }
+    unregisterSeparatorSync(prevRowKey) {
+        const idx = this.resolveRowIndex(prevRowKey);
+        if (idx != null)
+            this.separatorPrevIndices.delete(idx);
+    }
+    // 셀의 시각적 하단이 separator 바로 앞 행인지 판정.
+    // 해당 셀에 border-bottom: none을 적용하기 위함.
+    isVisualLastRowBeforeSeparatorSync(rowKey, field) {
+        if (this.separatorPrevIndices.size === 0)
+            return false;
+        const visualBottom = this.resolveVisualBottom(rowKey, field);
+        if (visualBottom == null)
+            return false;
+        return this.separatorPrevIndices.has(visualBottom);
+    }
     setRowCountSync(count) {
         const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
         if (safeCount !== this.rowCount) {
@@ -637,7 +766,7 @@ export class SdTable {
         this.setRowCountSync(count);
     }
     calculateVisibleRange(scrollTop, containerHeight) {
-        const safeRowHeight = Math.max(1, this.toFiniteNumber(this.rowHeight, 40));
+        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));
@@ -703,6 +832,12 @@ export class SdTable {
     }
     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 effectiveTableHeight = isNoData
+            ? `max(${this.height || '96px'}, ${noDataTotalHeight}px)`
+            : this.height || '100%';
         const hostStyle = {
             '--table-radius': `${TABLE_RADIUS}px`,
             '--table-border-color': TABLE_BORDER.color,
@@ -713,24 +848,25 @@ export class SdTable {
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (h(Host, { key: 'c20a7cc6d5917c9d09c699f2c40ac2b6d07747e1', style: hostStyle }, h("div", { key: '94f76e75da5c6ff9d0ef93b6c2aa3def4ec1766e', class: "sd-table__container", style: {
+        return (h(Host, { key: 'f7d92943fcb354f69d99c1e4fd37749cc06185c7', style: hostStyle }, h("div", { key: '53d6ac0eedc2c2a56c05bf5a751be43bc18f9fe7', 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: '3b98c828c7dc42de3d4f9bb645279b20d9079ac4', class: {
-                'sd-table__clip': true,
-                'sd-table__clip--has-pagination': !!(this.pagination &&
-                    this.pagination.rowsPerPage > 0 &&
-                    this.rowCount > 0 &&
-                    !this.useVirtualScroll),
-            } }, h("div", { key: 'b6d04ec953d7b75fb8ad8bc32e2662550d38c5c7', class: {
+                '--table-height': effectiveTableHeight,
+                '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
+            } }, h("div", { key: 'b85980b8307b2a50ee1554262d025b58bad42e87', 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: '3050275c7ecde0aeda3ec881257be4334ebd06fc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '7a26c4365e4e28a5ebce1c35bb52a302440542f7', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '31442f92321eb4aaf5c36c5995a1c25d8069b6ea', class: "sd-table__no-data" }, h("slot", { key: '42f3208fb1c86d118f50e8b1974bff3ede253032', name: "no-data" }, h("span", { key: 'ce7368c64b3502eee2fae7a28e0508d4d1622c25' }, this.resolvedNoDataLabel)))), h("table", { key: '170203f34b4bb11fce0a064622265d093ccbab2a', 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 &&
+                'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
+            } }, h("div", { key: 'acf9816ceaaea06b807056606d684befebe9dcd0', 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: '8a1a18cbf500a8e9ad519438a59e084186d9f339', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '443ffcfb06edbae8ac94be7e8e5a94c1e2b68588', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '3aefe27935a816df9658ec89adf261d11c0e8e77', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'db89a7d1cbbf041bdd30be9e0a205147073891e2', class: "sd-table__no-data" }, h("div", { key: 'a9bf47e80db21c30ffa651b03b203e5e205134c9', class: "sd-table__no-data-content", ref: el => {
+                this.noDataContentEl = el;
+                if (el)
+                    this.syncNoDataContentObserver();
+            } }, h("slot", { key: '20f0c0b43534ef344864bf2450abb4c2a8fb704b', name: "no-data" }, h("span", { key: 'a19688e4da7961e7c828694124819c4e60a6700f' }, this.resolvedNoDataLabel)))))), h("table", { key: '2b03aa5c5d59e0ac85051f90a022b59b8dbb871a', 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: 'cfbd5ee8e706c9ef7a2b6a4be8901b7aae47249e', class: "sd-table__pagination" }, h("sd-pagination", { key: '57dad16199d9145fcec0c5ed46beeeac1f08af02', 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: '1314e296ba913600436045b4af54eb0bc1d95d0d', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: 'dc4a0132898490ef7e87e26a75fca8e3b2056a49', class: "sd-table__pagination" }, h("sd-pagination", { key: '9030b0965e8d2c1a54fce07cfc4067f49edb2375', 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: '0d95ba3138da081d6c15202748ff3db1e23def01', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -989,6 +1125,26 @@ export class SdTable {
                 "setter": false,
                 "defaultValue": "{ left: 0, right: 0 }"
             },
+            "radius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'useTop'",
+                    "resolved": "\"default\" | \"useTop\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radius",
+                "defaultValue": "'default'"
+            },
             "noDataLabel": {
                 "type": "string",
                 "mutable": false,
@@ -1093,6 +1249,26 @@ export class SdTable {
                 "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dense",
+                "defaultValue": "false"
+            },
             "useVirtualScroll": {
                 "type": "boolean",
                 "mutable": false,
@@ -1118,11 +1294,11 @@ export class SdTable {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -1130,8 +1306,7 @@ export class SdTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "row-height",
-                "defaultValue": "40"
+                "attribute": "row-height"
             },
             "virtualBuffer": {
                 "type": "number",
@@ -1211,6 +1386,7 @@ export class SdTable {
             "scrolledRight": {},
             "rowCount": {},
             "loadingScrollTop": {},
+            "noDataBodyHeight": {},
             "autoThead": {},
             "autoTbody": {}
         };
@@ -1416,7 +1592,7 @@ export class SdTable {
             },
             "getStickyStyle": {
                 "complexType": {
-                    "signature": "(colIdx: number) => Promise<{ '--sticky-left-offset': string; '--sticky-right-offset': string; width: string; minWidth: string; maxWidth: string; }>",
+                    "signature": "(colIdx: number) => Promise<Record<string, string>>",
                     "parameters": [{
                             "name": "colIdx",
                             "type": "number",
@@ -1426,9 +1602,13 @@ export class SdTable {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
                         }
                     },
-                    "return": "Promise<{ '--sticky-left-offset': string; '--sticky-right-offset': string; width: string; minWidth: string; maxWidth: string; }>"
+                    "return": "Promise<Record<string, string>>"
                 },
                 "docs": {
                     "text": "",
@@ -1510,6 +1690,9 @@ export class SdTable {
             }, {
                 "propName": "stickyHeader",
                 "methodName": "handleConfigChange"
+            }, {
+                "propName": "dense",
+                "methodName": "handleConfigChange"
             }, {
                 "propName": "selected",
                 "methodName": "handleSelectedChange"

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: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, h("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', 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: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
+            h("slot", { key: 'da3827a9c2fe7a74ec3cb3eb8dee3ab039ea0535' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }