@ninebone/datagrid 0.0.24 → 0.1.2

package/README.md

@@ -25,9 +25,113 @@ Tired of heavy, overly complex JavaScript data grids? **Ninelab HTML Table** pre
 
 - [Live Demo](https://ninebone.github.io/datagrid/)
 
-### Framework Examples & Input Demos
-- [Vanilla JS Examples](#)
-- [React Examples](#)
+---
+
+## Quick Start
+
+### 1. Installation
+
+```bash
+npm install @ninebone/datagrid
+
+
+### 2. HTML example
+
+```html
+<html>
+<head>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@ninebone/util@latest/dist/nine-util.umd.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@ninebone/datagrid@latest/dist/nine-table.umd.js"></script>
+</head>
+<body>
+
+    <div style="height: 600px;">
+      <ninelab-table show-footer="true">
+          <table row-indicator="true">
+              <colgroup>
+                  <col width="50" fixed="left"/>
+                  <col width="130"/>
+                  <col width="100"/>
+                  <col width="110"/>
+              </colgroup>
+              <thead>
+                  <tr>
+                      <th cell-type="checkbox"></th>
+                      <th>Avatar & Name</th>
+                      <th>Status Badge</th>
+                      <th>Input Editor</th>
+                  </tr>
+              </thead>
+              <tbody>
+                  <tr>
+                      <!-- Checkbox Cell -->
+                      <td data-bind="sel" cell-type="checkbox"></td>
+                      
+                      <!-- Custom Image Renderer -->
+                      <td data-bind="NAME" data-expr="host.renderImage(data.PIC)" html="true"></td>
+                      
+                      <!-- Custom Badge / Chart Renderer -->
+                      <td data-expr="host.renderBadge(data.REC1, data.REC2)" html="true"></td>
+                      
+                      <!-- Inline Input Binding -->
+                      <td data-bind="NAME" cell-type="input" enable="data.REC1 > 30"></td>
+                  </tr>
+              </tbody>
+          </table>
+      </ninelab-table>
+    </div>
+
+    <script>
+        const grd = document.querySelector("nine-table");
+
+        // 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([
+              {
+                A: "a",
+                ...
+              },
+              ...
+            ]);
+        });
+    </script>
+</body>
+</html>
+
+```
+# Ninelab HTML Table (`@ninebone/datagrid`)
+
+> **Blazing-fast performance powered by native HTML tags** — A next-generation table extension supporting 1,000,000+ rows virtual rendering and seamless inline editing out of the box.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://img.shields.io/badge/npm-v1.0.0-blue.svg)](https://www.npmjs.com/)
+
+Tired of heavy, overly complex JavaScript data grids? **Ninelab HTML Table** preserves the familiar structure of native HTML tags while leveraging advanced DOM virtualization to handle massive datasets effortlessly and provide a frictionless inline editing experience.
+
+---
+
+## Key Features
+
+- **1M+ DOM Virtualized Rendering:** Scroll and render over a million rows in a fraction of a second without dropping frames.
+- **Seamless Inline Editing & Form Binding:** Native support for Text, Number, Date, Color, Checkbox, Radio, and Combo (Autocomplete) input types.
+- **HTML Tag-Based (Zero Learning Curve):** No complicated JS configuration objects required—build tables using familiar tag structures.
+- **Shadow DOM & CSS Variables:** Perfect style encapsulation with zero CSS pollution, easily customizable via CSS variables.
+- **Framework Agnostic:** Drops seamlessly into React, Vue, Svelte, or Vanilla JS.
+
+---
+
+## Live Demo & Previews
+
+![Ninelab HTML Table Demo](https://raw.githubusercontent.com/ninebone/datagrid/main/assets/demo.gif)
+
+- [Live Demo](https://ninebone.github.io/datagrid/)
 
 ---
 
@@ -38,9 +142,10 @@ Tired of heavy, overly complex JavaScript data grids? **Ninelab HTML Table** pre
 ```bash
 npm install @ninebone/datagrid
 
-<!-- HTML example -->
 
-````html
+### 2. HTML example
+
+```html
 <html>
 <head>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@ninebone/util@latest/dist/nine-util.umd.js"></script>
@@ -110,5 +215,6 @@ npm install @ninebone/datagrid
 
 ```
 
+
 ## LICENSE
 MIT © 2026 ninebone

package/dist/css/nine-table.css

@@ -146,19 +146,22 @@ cell-combo-panel {
     margin: 0;
     resize: both;
 
-    .head {
+    input {
         display: none;
-        padding: 6px;
-        background: #f8f9fa;
+        width: 100%;
+        height: 32px;
+        box-sizing: border-box;
+        padding: 0px 8px;
+        border: none;
         border-bottom: 1px solid #e5e7eb;
-
-        input[type="text"] {
-            width: 100%;
-            height: 26px;
-            padding: 0 6px;
-            border: 1px solid #d1d5db;
-            border-radius: 3px;
-        }
+        border-radius: 0px;
+        outline: none;
+        font-size: 12px;
+        background: #fafafa;
+        color: #333;
+    }
+    input:focus {
+        background: #ffffff;
     }
 
     .footer {
@@ -170,7 +173,9 @@ cell-combo-panel {
         padding: 0 8px;
 
         label {
-            user-select: none;
+            display: flex;
+            align-items: center;
+            gap: 4px;
         }
 
         button {
@@ -201,11 +206,12 @@ cell-combo-panel.active {
 }
 
 cell-combo-panel.expand {
-    .head {
-        display: flex;
+    input {
+        display: block;
     }
 }
 
+
 cell-combo-panel.multi {
     .footer {
         display: flex;
@@ -214,7 +220,6 @@ cell-combo-panel.multi {
 }
 
 
-
 cell-combo-panel.loading {
     nine-table-simple {
         visibility: hidden;
@@ -287,6 +292,7 @@ cell-input-color {
         -moz-appearance: none;
         appearance: none;
         background-color: transparent;
+        border-radius: 0;
     }
 
     input[type=color]::-webkit-color-swatch {
@@ -559,7 +565,6 @@ tbody {
     .selected-left   { border-left: 2px solid var(--cell-selection-border-color); }
     .selected-right  { border-right: 2px solid var(--cell-selection-border-color); }
 }
-
 nine-table-col-expand {
     position: absolute;
     right: 2px;
@@ -905,7 +910,6 @@ nine-table-filter-panel.loading::before {
 
 
 :host([theme="simple"]) {
-    /* 1. 불필요한 패널 및 컴포넌트 숨기기 */
     .ng-part-header, .ng-part-footer,
     nine-table-toolbar,
     nine-table-sheets-footer,
@@ -920,7 +924,7 @@ nine-table-filter-panel.loading::before {
     }
 
     tr {
-        height: 32px;
+        height: 28px;
     }
 
     nine-table-sheet {
@@ -935,15 +939,19 @@ nine-table-filter-panel.loading::before {
         border: none;
         padding: 0 8px;
     }
+
+    th[data-col="0"] {
+        * {
+            display: none;
+        }
+    }
 }
 
-/* 🎯 Toolbar 숨김 제어 */
 :host([theme="simple"]) nine-table-toolbar,
 :host([show-header="false"]) nine-table-toolbar {
     display: none;
 }
 
-/* 🎯 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 {
@@ -952,13 +960,94 @@ nine-table-filter-panel.loading::before {
 
 :host([theme="simple"]) {
     col[data-col="0"], th[data-col="0"], td[data-col="0"] {
+
+    }
+    .ng-container-right {
+
+    }
+    tr {
+        height: 28px;
+        min-height: 28px;
+        max-height: 28px;
+    }
+}
+
+:host(.combo-list) {
+    :focus {
+        --border-right: 2px solid #ccc;
+    }
+
+    tr.selected {
+        transform: unset !important;
+
+        .CELL-ROW-INDICATOR {
+            display: table-cell;
+            background: darkgoldenrod;
+
+            cell-row-indicator {
+                display: none;
+            }
+        }
+    }
+
+    .ng-container-left {
+        width: 2px;
+        min-width: 2px;
+        --flex: unset;
+    }
+    col[data-col="0"], th[data-col="0"], td[data-col="0"] {
+        width: 2px;
+        min-width: 2px;
+        max-width: 2px;
+    }
+    col[data-col="1"], th[data-col="1"], td[data-col="1"] {
         display: none;
     }
+
     .ng-container-right {
         display: none;
     }
-    tr {
-        height: 26px;
+}
+
+:host(.multi) {
+
+    .ng-container-left {
+        width: 26px;
+        max-width: 26px;
+        /**
+        table {
+            width: 26px !important;
+            max-width: 26px !important;;
+        } */
+    }
+
+    col[data-col="0"], th[data-col="0"] {
+        width: 2px !important;
+        max-width: 2px !important;
+    }
+
+    col[data-col="0"], col[data-col="1"] {
+        display: table-column;
+    }
+    th[data-col="0"], td[data-col="1"] {
+        display: table-cell;
+        overflow: hidden;
+    }
+    col[data-col="1"], td[data-col="1"] {
+        width: 24px;
+        max-width: 24px;
+    }
+
+
+
+    td[data-col="1"] {
+        padding: 0;
+        border-right: none;
+        cell-checkbox {
+            padding: 0;
+            width: 24px;
+            border-right: none;
+        }
     }
 }
 
@@ -1018,20 +1107,19 @@ nine-table-filter-panel.loading::before {
     left: 0;
     right: 0;
     height: 2px;
-    background: rgba(255, 255, 255, 0.08); /* 은은한 화이트 트랙 배경 */
+    background: rgba(255, 255, 255, 0.08);
     z-index: 10000;
     display: none;
     overflow: hidden;
 }
 
-/* 🎯 아주 좁고 쨍한 빛 조각 형태로 압축 */
 .ng-loading-bar::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
-    width: 12%; /* 바의 전체 길이를 12%로 대폭 축소 */
+    width: 12%;
     background: linear-gradient(
             90deg,
             transparent 0%,
@@ -1049,7 +1137,7 @@ nine-table-filter-panel.loading::before {
         transform: translateX(-150%);
     }
     100% {
-        transform: translateX(850%); /* 폭이 좁아진 만큼 이동 거리 확장 */
+        transform: translateX(850%);
     }
 }
 
@@ -1134,6 +1222,11 @@ cell-input, cell-input-number, cell-button, cell-input-color, cell-input-date, c
     }
 }
 
+.ng-container-left,.ng-container-right {
+    table {
+        width: 100%;
+    }
+}
 
 .empty-value {
     color: #999;