@sellmate/design-system 1.20.1 → 1.22.0

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

@@ -5,28 +5,48 @@ import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY, TABLE_BODY_LAYOUT, T
 export class SdTable {
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
+    /** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
     tableId = nanoid(8);
     fallbackTableId = nanoid(8);
+    /** 컬럼 정의 목록 */
     columns = [];
+    /** 행 데이터 배열 */
     rows;
+    /** 현재 선택된 행 목록 */
     selected = [];
+    /** 행 고유 식별 필드명 */
     rowKey = 'id';
+    /** 행 선택(체크박스) 기능 활성화 여부 */
     selectable = false;
+    /** 컬럼 너비 조절 기능 활성화 여부 */
     resizable = false;
+    /** 테이블 너비 */
     width;
+    /** 테이블 높이 */
     height;
+    /** 헤더 고정(sticky) 여부 */
     stickyHeader = false;
+    /** 고정할 좌우 컬럼 수 */
     stickyColumn = { left: 0, right: 0 };
+    /** border-radius 제어 */
     radius = 'default';
+    /** 데이터 없을 때 표시할 메시지 */
     noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
+    /** 로딩 스피너 표시 여부 */
     isLoading = false;
+    /** 페이지네이션 옵션 */
     pagination;
+    /** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
     useInternalPagination = false;
+    /** 페이지당 행 수 선택 셀렉트 표시 여부 */
     useRowsPerPageSelect = false;
+    /** 행 높이를 줄인 조밀 모드 여부 */
     dense = false;
     // ─── Virtual Scroll ───────────────────────────────────────────────
+    /** 가상 스크롤 사용 여부 */
     useVirtualScroll = false;
+    /** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
     rowHeight;
     get effectiveRowHeight() {
         if (this.rowHeight != null)
@@ -35,19 +55,27 @@ export class SdTable {
             ? Number(TABLE_BODY_LAYOUT.dense.height)
             : Number(TABLE_BODY_LAYOUT.default.height);
     }
+    /** 가상 스크롤 상하 버퍼 행 수 */
     virtualBuffer = 5;
+    /** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
     virtualEndThreshold = 10;
     // ─────────────────────────────────────────────────────────────────
+    /** 페이지당 행 수 선택 옵션 목록 */
     rowsPerPageOption = [
         { label: '10개씩 보기', value: 10 },
         { label: '25개씩 보기', value: 25 },
         { label: '50개씩 보기', value: 50 },
         { label: '100개씩 보기', value: 100 },
     ];
+    /** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
     sdSelectChange;
+    /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
     sdPageChange;
+    /** 페이지당 행 수가 변경될 때 발생합니다. */
     sdRowsPerPageChange;
+    /** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
     sdVirtualUpdate;
+    /** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
     sdVirtualReachEnd;
     currentPage = 1;
     innerRowsPerPage = 10;
@@ -452,6 +480,7 @@ export class SdTable {
     isRowSelectedSync(row) {
         return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
     }
+    /** 행이 선택되어 있는지 확인합니다. */
     async isRowSelected(row) {
         return this.isRowSelectedSync(row);
     }
@@ -468,6 +497,7 @@ export class SdTable {
         this.sdSelectChange.emit(Array.from(this.innerSelected));
         this.refreshChildrenSelection();
     }
+    /** 행 선택 상태를 토글합니다. */
     async updateRowSelect(row) {
         this.updateRowSelectSync(row);
     }
@@ -484,6 +514,7 @@ export class SdTable {
         this.sdSelectChange.emit(Array.from(this.innerSelected));
         this.refreshChildrenSelection();
     }
+    /** 전체 행 선택/해제를 처리합니다. */
     async toggleSelectAll(checked, rows) {
         this.toggleSelectAllSync(checked, rows);
     }
@@ -496,6 +527,7 @@ export class SdTable {
             return true;
         return null; // indeterminate
     }
+    /** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
     async getIsAllChecked(rows) {
         return this.getIsAllCheckedSync(rows);
     }
@@ -586,6 +618,7 @@ export class SdTable {
         }
         return base;
     }
+    /** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
     async getStickyStyle(colIdx) {
         return this.getStickyStyleSync(colIdx);
     }
@@ -728,6 +761,7 @@ export class SdTable {
             this.propagateVirtualUpdate(true);
         }
     }
+    /** 가상 스크롤 총 행 수를 설정합니다. */
     async setRowCount(count) {
         this.setRowCountSync(count);
     }
@@ -755,6 +789,7 @@ export class SdTable {
             rowsPerPage: this.innerRowsPerPage,
         };
     }
+    /** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
     async getPaginationInfo() {
         return this.getPaginationInfoSync();
     }
@@ -818,25 +853,25 @@ export class SdTable {
             '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (h(Host, { key: 'f5a5a2d4012f069619d110dcd9c2d5e6bd446407', style: hostStyle }, h("div", { key: '96ca8b8e4291ac077a6e1b6d3eed897777817b25', class: "sd-table__container", style: {
+        return (h(Host, { key: '2606b0d7fc3657a8021a6dfc64672996b756f762', style: hostStyle }, h("div", { key: '4def416edfe630ead35b80cb2f04081a89740f62', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, h("div", { key: 'd8225691e78e5fe5341f03def8ad1d6dfb057056', class: {
+            } }, h("div", { key: '316a359f2be84895719f452e056dcd2f54cd5b56', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
                 'sd-table__wrapper--radius-full': this.radius === 'full',
-            } }, h("div", { key: 'fb8403bd7587a4d1fcbb77b1fe226ae0aa27be7a', class: {
+            } }, h("div", { key: 'e798b58104f56b3250a7d74261a8c320a8049f28', 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: '4202fa1f03feff066f9779c5eb21c3b0c96f5cf3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '394c52823f5c24f288d51b34daec6f228de119d7', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'bb1d3d8b592194006bea7cd5ab2efc587f9abc44', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'c34df2b4f35c7ea8b5bbe6cf49dc354e11dac344', class: "sd-table__no-data" }, h("div", { key: '05006aacc2c242606ba8585ee0bdea50eea1b688', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (h("div", { key: 'af91877075c8d4ed8b608bdfdc7f04bd844f5574', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '2422c7020046fa468dbaaf34220230737cb6b02e', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'bd5c2237d8c3a34cc4bf12a187f471e22ce02efd', class: "sd-table__no-data-header-overlay" }), h("div", { key: '1e0da67564879a175e89a3482195742b1b4451dc', class: "sd-table__no-data" }, h("div", { key: '391bc76e748d64b84c39de669396b2f5f288e5a1', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, h("slot", { key: 'ad707be9bc8062da5a6236c9833176adb7b95851', name: "no-data" }, h("span", { key: '3aa57b547e05bd455829cff770c435af2ac78383' }, this.resolvedNoDataLabel)))))), h("table", { key: '6b2958f14d9708a49e3cbaff7cdb3653f7267e1c', 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 &&
+            } }, h("slot", { key: '3e2e26f4951d9b834ae811906c137a78067fecab', name: "no-data" }, h("span", { key: '54ed0371d60f5312376d8ffab50efd9ec0947729' }, this.resolvedNoDataLabel)))))), h("table", { key: '46cab11834ca3f5aa9010bd6f603d301b2a54c9c', 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: '950e80fdb6c06af2b4423e3b0c75ded7cfe4a298', class: "sd-table__pagination" }, h("sd-pagination", { key: '3257c7b631c262c9ddadbd23c83f2eb43f9bf7f5', 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: '7bb00889139aa7dbee4723efac511753afcb15e9', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: 'b9c738172d4e2993f15f6a7e051406d3b7e8d568', class: "sd-table__pagination" }, h("sd-pagination", { key: '62c199e61dd2010f2c19aabb3599d75a561ef83d', 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: '5f305858818e720bf5a53499777d2f5aac843487', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -870,7 +905,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD14C\uC774\uBE14 \uACE0\uC720 ID (\uC790\uC2DD \uC2AC\uB86F \uB9E4\uD551\uC5D0 \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -897,7 +932,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCEEC\uB7FC \uC815\uC758 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -922,7 +957,7 @@ export class SdTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uB370\uC774\uD130 \uBC30\uC5F4"
                 },
                 "getter": false,
                 "setter": false
@@ -946,7 +981,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD604\uC7AC \uC120\uD0DD\uB41C \uD589 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -964,7 +999,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uACE0\uC720 \uC2DD\uBCC4 \uD544\uB4DC\uBA85"
                 },
                 "getter": false,
                 "setter": false,
@@ -984,7 +1019,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uC120\uD0DD(\uCCB4\uD06C\uBC15\uC2A4) \uAE30\uB2A5 \uD65C\uC131\uD654 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -1004,7 +1039,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCEEC\uB7FC \uB108\uBE44 \uC870\uC808 \uAE30\uB2A5 \uD65C\uC131\uD654 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -1024,7 +1059,7 @@ export class SdTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD14C\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -1043,7 +1078,7 @@ export class SdTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD14C\uC774\uBE14 \uB192\uC774"
                 },
                 "getter": false,
                 "setter": false,
@@ -1062,7 +1097,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD5E4\uB354 \uACE0\uC815(sticky) \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -1089,7 +1124,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uACE0\uC815\uD560 \uC88C\uC6B0 \uCEEC\uB7FC \uC218"
                 },
                 "getter": false,
                 "setter": false,
@@ -1107,7 +1142,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "border-radius \uC81C\uC5B4"
                 },
                 "getter": false,
                 "setter": false,
@@ -1127,7 +1162,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB370\uC774\uD130 \uC5C6\uC744 \uB54C \uD45C\uC2DC\uD560 \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -1147,7 +1182,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB85C\uB529 \uC2A4\uD53C\uB108 \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -1174,7 +1209,7 @@ export class SdTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD398\uC774\uC9C0\uB124\uC774\uC158 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false
@@ -1191,7 +1226,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD14C\uC774\uBE14 \uB0B4\uBD80\uC5D0\uC11C \uD398\uC774\uC9C0\uB124\uC774\uC158\uC744 \uC9C1\uC811 \uAD00\uB9AC\uD560\uC9C0 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -1211,7 +1246,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD398\uC774\uC9C0\uB2F9 \uD589 \uC218 \uC120\uD0DD \uC140\uB809\uD2B8 \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -1231,7 +1266,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uB192\uC774\uB97C \uC904\uC778 \uC870\uBC00 \uBAA8\uB4DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -1251,7 +1286,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uC0AC\uC6A9 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -1271,7 +1306,7 @@ export class SdTable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uD589 \uB192\uC774 (px, \uC5C6\uC73C\uBA74 dense \uC5EC\uBD80\uC5D0 \uB530\uB77C \uC790\uB3D9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -1290,7 +1325,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uC0C1\uD558 \uBC84\uD37C \uD589 \uC218"
                 },
                 "getter": false,
                 "setter": false,
@@ -1310,7 +1345,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uB05D \uB3C4\uB2EC \uAC10\uC9C0 \uC784\uACC4\uAC12 (\uB9C8\uC9C0\uB9C9 N\uD589 \uC774\uB0B4\uC5D0 \uB4E4\uC5B4\uC624\uBA74 \uC774\uBCA4\uD2B8 \uBC1C\uC0DD)"
                 },
                 "getter": false,
                 "setter": false,
@@ -1337,7 +1372,7 @@ export class SdTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD398\uC774\uC9C0\uB2F9 \uD589 \uC218 \uC120\uD0DD \uC635\uC158 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -1370,7 +1405,7 @@ export class SdTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uC120\uD0DD \uC0C1\uD0DC\uAC00 \uBCC0\uACBD\uB420 \uB54C \uC120\uD0DD\uB41C \uD589 \uBAA9\uB85D\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "Row[]",
@@ -1392,7 +1427,7 @@ export class SdTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD398\uC774\uC9C0\uAC00 \uBCC0\uACBD\uB420 \uB54C \uC0C8 \uD398\uC774\uC9C0 \uBC88\uD638\uB97C \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "number",
@@ -1407,7 +1442,7 @@ export class SdTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD398\uC774\uC9C0\uB2F9 \uD589 \uC218\uAC00 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "number",
@@ -1422,7 +1457,7 @@ export class SdTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uAC00\uC2DC \uBC94\uC704\uAC00 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{\n    from: number;\n    to: number;\n  }",
@@ -1437,7 +1472,7 @@ export class SdTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864\uC774 \uB05D \uC784\uACC4\uAC12\uC5D0 \uB3C4\uB2EC\uD560 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{\n    from: number;\n    to: number;\n    rowCount: number;\n    threshold: number;\n  }",
@@ -1471,7 +1506,7 @@ export class SdTable {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD589\uC774 \uC120\uD0DD\uB418\uC5B4 \uC788\uB294\uC9C0 \uD655\uC778\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1498,7 +1533,7 @@ export class SdTable {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD589 \uC120\uD0DD \uC0C1\uD0DC\uB97C \uD1A0\uAE00\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1529,7 +1564,7 @@ export class SdTable {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC804\uCCB4 \uD589 \uC120\uD0DD/\uD574\uC81C\uB97C \uCC98\uB9AC\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1556,7 +1591,7 @@ export class SdTable {
                     "return": "Promise<boolean | null>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC804\uCCB4 \uC120\uD0DD \uCCB4\uD06C \uC0C1\uD0DC\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4 (true/false/null=indeterminate).",
                     "tags": []
                 }
             },
@@ -1581,7 +1616,7 @@ export class SdTable {
                     "return": "Promise<Record<string, string>>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC9C0\uC815\uD55C \uCEEC\uB7FC \uC778\uB371\uC2A4\uC758 sticky \uC2A4\uD0C0\uC77C \uAC1D\uCCB4\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1602,7 +1637,7 @@ export class SdTable {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uAC00\uC0C1 \uC2A4\uD06C\uB864 \uCD1D \uD589 \uC218\uB97C \uC124\uC815\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1619,7 +1654,7 @@ export class SdTable {
                     "return": "Promise<{ startIndex: number; endIndex: number; currentPage: number; rowsPerPage: number; } | null>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD604\uC7AC \uD398\uC774\uC9C0\uB124\uC774\uC158 \uC0C1\uD0DC(startIndex, endIndex, currentPage, rowsPerPage)\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

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

@@ -143,3 +143,100 @@ StoryVirtualTable = __decorate([
     customElement('story-virtual-table')
 ], StoryVirtualTable);
 export { StoryVirtualTable };
+const DROPDOWN_STATUS_META = {
+    active: { bg: '#DCFCE7', color: '#166534', label: 'Active' },
+    reviewing: { bg: '#FEF3C7', color: '#92400E', label: 'Reviewing' },
+    archived: { bg: '#E2E8F0', color: '#475569', label: 'Archived' },
+};
+const DROPDOWN_SEED = [
+    { id: 1, name: 'Avery Kim', role: 'Owner', region: 'Seoul', status: 'active' },
+    { id: 2, name: 'Mina Park', role: 'Manager', region: 'Busan', status: 'reviewing' },
+    { id: 3, name: 'Ethan Lee', role: 'Analyst', region: 'Incheon', status: 'archived' },
+    { id: 4, name: 'Sora Choi', role: 'Owner', region: 'Daegu', status: 'active' },
+    { id: 5, name: 'Jisoo Han', role: 'Manager', region: 'Daejeon', status: 'reviewing' },
+    { id: 6, name: 'Noah Yoon', role: 'Analyst', region: 'Gwangju', status: 'active' },
+    { id: 7, name: 'Iris Jung', role: 'Manager', region: 'Suwon', status: 'active' },
+    { id: 8, name: 'Liam Seo', role: 'Owner', region: 'Ulsan', status: 'reviewing' },
+];
+const DROPDOWN_COLUMNS = [
+    { name: 'name', label: 'Customer', field: 'name', autoWidth: true },
+    { name: 'role', label: 'Role', field: 'role', align: 'center', width: '100px', hasDropdown: true },
+    { name: 'region', label: 'Region', field: 'region', width: '100px' },
+    { name: 'status', label: 'Status', field: 'status', align: 'center', width: '110px', hasDropdown: true },
+];
+const LISTBOX_STYLE = 'margin:0;padding:4px;list-style:none;min-width:140px;background:white;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.10);';
+const ITEM_BASE_STYLE = 'padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;';
+let StoryDropdownTable = class StoryDropdownTable extends LitElement {
+    // Disable shadow DOM so Stencil's slot emulation can see and move
+    // the slotted <ul> nodes without Lit's ChildPart losing track of them.
+    createRenderRoot() { return this; }
+    constructor() {
+        super();
+        this.roleFilter = 'All';
+        this.statusFilter = 'All';
+    }
+    get displayRows() {
+        return DROPDOWN_SEED.filter(row => (this.roleFilter === 'All' || row.role === this.roleFilter) &&
+            (this.statusFilter === 'All' || row.status === this.statusFilter));
+    }
+    itemStyle(active) {
+        return `${ITEM_BASE_STYLE}background:${active ? '#f0f9ff' : 'transparent'};color:${active ? '#0369a1' : '#374151'};font-weight:${active ? '600' : '400'};`;
+    }
+    render() {
+        const rows = this.displayRows;
+        const roleOptions = ['All', 'Owner', 'Manager', 'Analyst'];
+        const statusOptions = ['All', 'active', 'reviewing', 'archived'];
+        return html `
+      <div style="display:flex;flex-direction:column;gap:12px;">
+        <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;">
+          <span style="color:#64748b;">Active filters:</span>
+          ${this.roleFilter !== 'All' ? html `<span style="border-radius:9999px;background:#ecfeff;padding:2px 12px;font-size:12px;font-weight:500;color:#0e7490;">Role: ${this.roleFilter}</span>` : nothing}
+          ${this.statusFilter !== 'All' ? html `<span style="border-radius:9999px;background:#ecfeff;padding:2px 12px;font-size:12px;font-weight:500;color:#0e7490;">Status: ${DROPDOWN_STATUS_META[this.statusFilter]?.label}</span>` : nothing}
+          ${this.roleFilter === 'All' && this.statusFilter === 'All' ? html `<span style="color:#94a3b8;">없음</span>` : nothing}
+          ${this.roleFilter !== 'All' || this.statusFilter !== 'All' ? html `<button style="font-size:12px;color:#64748b;text-decoration:underline;background:none;border:none;cursor:pointer;" @click=${() => { this.roleFilter = 'All'; this.statusFilter = 'All'; }}>초기화</button>` : nothing}
+        </div>
+
+        <sd-table .columns=${DROPDOWN_COLUMNS} .rows=${rows} row-key="id" width="100%">
+          <sd-thead>
+            <ul slot="dropdown-role" style=${LISTBOX_STYLE}>
+              ${roleOptions.map(opt => html `
+                <li style=${this.itemStyle(this.roleFilter === opt)} @click=${() => { this.roleFilter = opt; }}>${opt}</li>
+              `)}
+            </ul>
+            <ul slot="dropdown-status" style=${LISTBOX_STYLE}>
+              ${statusOptions.map(opt => html `
+                <li style=${this.itemStyle(this.statusFilter === opt)} @click=${() => { this.statusFilter = opt; }}>
+                  ${opt === 'All' ? 'All' : DROPDOWN_STATUS_META[opt].label}
+                </li>
+              `)}
+            </ul>
+          </sd-thead>
+          <sd-tbody>
+            ${repeat(rows, row => row.id, row => {
+            const meta = DROPDOWN_STATUS_META[row.status];
+            return html `
+                  <sd-tr row-key=${String(row.id)} .row=${row}>
+                    <sd-td field="status" row-key=${String(row.id)}>
+                      <span style="display:inline-flex;min-width:88px;align-items:center;justify-content:center;border-radius:9999px;padding:4px 10px;font-size:12px;font-weight:600;background:${meta.bg};color:${meta.color};">
+                        ${meta.label}
+                      </span>
+                    </sd-td>
+                  </sd-tr>
+                `;
+        })}
+          </sd-tbody>
+        </sd-table>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state()
+], StoryDropdownTable.prototype, "roleFilter", void 0);
+__decorate([
+    state()
+], StoryDropdownTable.prototype, "statusFilter", void 0);
+StoryDropdownTable = __decorate([
+    customElement('story-dropdown-table')
+], StoryDropdownTable);
+export { StoryDropdownTable };

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

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { TABLE_ID_ATTR } from "../constants";
 export class SdTbody {
     el;
+    /** 렌더링할 행 데이터 목록 */
     rows = [];
     tableId = '';
     topSpacerHeight = 0;
@@ -45,9 +46,9 @@ export class SdTbody {
         }
     }
     render() {
-        return (h(Host, { key: 'ae49b4a7e18afd3d44d07e7da6c3663a6a043796', slot: `${this.tableId}-body` }, h("tbody", { key: '7275cf9214f6917c5437b8a72a06cde3ca48dc8c', class: { tbody: true } }, [
+        return (h(Host, { key: '0f85168b22221551714f3c75bd12c366538cc5ec', slot: `${this.tableId}-body` }, h("tbody", { key: 'f9a8528d40c51988cfbca2c349905dafdafce8d3', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: '6455be878c24df5371e094fbfe9687ddb992e0e6' }),
+            h("slot", { key: '7ecfe2f730b4c909d394fdee2d9aa015c5410cb4' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -84,7 +85,7 @@ export class SdTbody {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB80C\uB354\uB9C1\uD560 \uD589 \uB370\uC774\uD130 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,