@ninebone/datagrid 0.0.15 → 0.0.21

package/README.md

@@ -40,6 +40,7 @@ npm install @ninebone/datagrid
 
 <!-- HTML example -->
 
+````html
 <html>
 <head>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@ninebone/util@latest/dist/nine-util.umd.js"></script>
@@ -86,15 +87,14 @@ npm install @ninebone/datagrid
     <script>
         const grd = document.querySelector("nine-table");
 
-        grd.addEventListener("load", () => {
-            // Define custom provider helper functions used in data-expr
-  
-            grd.addProvider.({
-                getCommonCode: (group) => exampleData.generateCommonCode(group),
-                renderImage: (v) => `<img src="${v}" style="vertical-align:middle; width:58px; height:58px; border-radius:50%;" />`,
-                renderBadge: (v1, v2) => `<span>Score: ${Number(v1) + Number(v2)}</span>`,
-			});
+        // Define custom provider helper functions used in data-expr
+        grd.provider.add({
+            getCommonCode: (group) => exampleData.generateCommonCode(group),
+            renderImage: (v) => `<img src="${v}" style="vertical-align:middle; width:58px; height:58px; border-radius:50%;" />`,
+            renderBadge: (v1, v2) => `<span>Score: ${Number(v1) + Number(v2)}</span>`,
+        });
 			
+        grd.addEventListener("load", () => {
             // Binding Data
             grd.data.set([
               {

package/dist/css/nine-table.css

@@ -903,6 +903,7 @@ nine-table-filter-panel.loading::before {
     background: #fff;
 }
 
+
 :host([theme="simple"]) {
     /* 1. 불필요한 패널 및 컴포넌트 숨기기 */
     .ng-part-header, .ng-part-footer,
@@ -922,7 +923,6 @@ nine-table-filter-panel.loading::before {
         height: 32px;
     }
 
-    /* 2. 💡 [핵심] 스크롤바용 우측 16px 빈 공간을 제거하고 1열(1fr)로 꽉 채우기 */
     nine-table-sheet {
         border: none;
         overflow: hidden;
@@ -935,38 +935,6 @@ nine-table-filter-panel.loading::before {
         border: none;
         padding: 0 8px;
     }
-
-    /**
-    nine-table-sheet tr td {
-        text-align: left;
-    } */
-
-    /* 4. 브라우저 기본 네이티브 스크롤바를 콘텐츠 위에 자연스럽게 오버레이(Overlay) */
-    nine-table-sheet .ng-sheet-body {
-        overflow-y: auto;
-        overflow-x: hidden;
-        scrollbar-width: thin;
-        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-    }
-
-    nine-table-sheet .ng-sheet-body::-webkit-scrollbar {
-        display: block;
-        width: 6px;
-        height: 6px;
-    }
-
-    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-thumb {
-        background: rgba(0, 0, 0, 0.15);
-        border-radius: 3px;
-    }
-
-    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-thumb:hover {
-        background: rgba(0, 0, 0, 0.3);
-    }
 }
 
 /* 🎯 Toolbar 숨김 제어 */
@@ -977,6 +945,7 @@ nine-table-filter-panel.loading::before {
 
 /* 🎯 Footer(StatusBar) 숨김 제어 (show-statusbar="false") */
 :host([theme="simple"]) nine-table-sheets-footer,
+:host([show-footer="false"]) nine-table-sheets-footer,
 :host([show-statusbar="false"]) nine-table-sheets-footer {
     display: none;
 }
@@ -993,6 +962,49 @@ nine-table-filter-panel.loading::before {
     }
 }
 
+
+:host([theme="simple"]),
+:host([auto-height="true"]),
+:host([scroll-bar="none"]) {
+
+    nine-table-vscrollbar
+    nine-table-hscrollbar,
+    nine-table-sheet .ng-scroll-edge {
+        display: none;
+    }
+    nine-table-sheet {
+        --hscrollbar-height: 0px;
+        --vscrollbar-width: 0px;
+
+        .ng-sheet-body {
+            overflow-y: auto;
+            overflow-x: auto;
+            scrollbar-width: thin;
+            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+        }
+
+        .ng-sheet-body::-webkit-scrollbar {
+            display: block;
+            width: 6px;
+            height: 6px;
+        }
+
+        .ng-sheet-body::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .ng-sheet-body::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.15);
+            border-radius: 3px;
+        }
+
+        .ng-sheet-body::-webkit-scrollbar-thumb:hover {
+            background: rgba(0, 0, 0, 0.3);
+        }
+    }
+}
+
+
 :host(.loading) {
     .ng-loading-bar {
         display: block;