README.md

@@ -1,6 +1,6 @@
-# @apigo.cc/datatable AI 开发指南
+# @web/datatable AI 开发指南
 
-`@apigo.cc/datatable` 是一个高性能、无状态的 Web 数据表格组件，支持万级数据虚拟滚动、多维编辑及固定列。
+`@web/datatable` 是一个高性能、无状态的 Web 数据表格组件，支持万级数据虚拟滚动、多维编辑及固定列。
 
 ---
 
@@ -11,9 +11,9 @@
 <script type="importmap">
 {
   "imports": {
-    "@apigo.cc/state": "path/to/state.mjs",
-    "@apigo.cc/base": "path/to/base.mjs",
-    "@apigo.cc/datatable": "path/to/datatable.mjs"
+    "@web/state": "path/to/state.mjs",
+    "@web/base": "path/to/base.mjs",
+    "@web/datatable": "path/to/datatable.mjs"
   }
 }
 </script>

dist/datatable.js

@@ -356,7 +356,6 @@
   globalThis.Component.register("DataTable", (container) => {
     if (!container.state) container.state = globalThis.NewState({});
     const state = container.state;
-    container.editable = container.hasAttribute("editable");
     Object.assign(state, {
       list: [],
       fields: [],
@@ -377,8 +376,7 @@
       _fieldsDirty: false,
       _masterCellNodes: null,
       isDirty: false,
-      isBulkEdit: null,
-      editable: container.editable
+      isBulkEdit: null
     });
     const perf = createPerfMonitor();
     state.perf = perf.stats;
@@ -406,7 +404,6 @@
       perf.onScroll();
       scroll.refresh();
       container.hideColumnMenu();
-      container.hideEditor(true);
       const prev = container.querySelector(".dt-spacer-prev"), post = container.querySelector(".dt-spacer-post");
       if (prev) {
         prev.style.height = (state.prevHeight || 0) + "px";
@@ -469,11 +466,6 @@
     container.showColumnMenu = (field, event) => {
       var _a;
       const btn = event.currentTarget, menu = container.querySelector(".dt-column-menu");
-      if (menu.style.display === "block" && state.activeFieldId === field.id) {
-        container.hideColumnMenu();
-        container.applySortFilter();
-        return;
-      }
       const type = ((_a = field.settings) == null ? void 0 : _a.formType) || field.type || "text";
       state.activeModes = MODE_MAP[type] || (["boolean", "switch", "checkbox", "radio"].includes(type) ? [] : MODE_MAP.text);
       if (!state.filterConfig[field.id]) state.filterConfig[field.id] = { mode: state.activeModes[0] || "contains", value: "", selectedValues: [] };
@@ -721,7 +713,6 @@
     };
     container.onMainDblClick = (e) => {
       var _a, _b, _c;
-      if (!container.editable) return;
       const cell = e.target.closest(".dt-cell"), row = cell == null ? void 0 : cell.closest(".dt-row");
       if (row && !row.classList.contains("dt-header-row")) {
         const item = (_a = row._ref) == null ? void 0 : _a.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll(".dt-cell")).indexOf(cell);
@@ -939,6 +930,7 @@
                         </template>
 
                         <div class="mt-2" style="max-height: 180px; overflow-y: auto;">
+                                <div class="text-muted fw-bold mb-1" style="font-size: 9px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div>
                                 <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">
                                         <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background='var(--bs-light)'" onmouseout="this.style.background='transparent'">
                                                 <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">
@@ -952,10 +944,10 @@
                                 <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>
                         </div>
 
-                        <div $if="this.state?.editable" class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
-                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
-                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
-                                <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
+                        <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
+                                <button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
+                                <button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
+                                <button class="btn btn-sm btn-outline-danger flex-grow-1" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
                         </div>
                 </template>
         </div>
@@ -970,17 +962,17 @@
 
         <div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">
                 <div class="d-flex align-items-center gap-3 flex-grow-1">
-                        <div $if="this.state?.editable" class="d-flex align-items-center gap-1">
+                        <div class="d-flex align-items-center gap-1">
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>
                         </div>
-                        <div $if="this.state?.editable" class="vr h-50 my-auto text-muted opacity-25"></div>
+                        <div class="vr h-50 my-auto text-muted opacity-25"></div>
                         <div class="d-flex align-items-center gap-2 text-muted" style="font-size: 0.75rem">
                                 <i class="bi bi-check-all fs-6"></i>
                                 <span $text="(this.state?.selectedRowCount || 0) + ' selected / ' + (this.state?.list?.length || 0) + ' total'"></span>
                         </div>
                 </div>
-                <div $if="this.state?.editable" class="d-flex align-items-center gap-2">
+                <div class="d-flex align-items-center gap-2">
                         <button $if="this.state?.isDirty" class="btn btn-sm btn-primary border-0 px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save</button>
                         <button $if="!this.state?.isDirty" class="btn btn-sm btn-light border-0 px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Saved</button>
                 </div>
@@ -994,7 +986,6 @@
         DataTable { display: block; }
         .dt-root { font-size: 0.875rem; }
         .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }
-        .dt-main { position: relative; }
         .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
         .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
         .dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }

package-lock.json

@@ -1,12 +1,12 @@
 {
-	"name": "@apigo.cc/datatable",
-	"version": "1.0.15",
+	"name": "@web/datatable",
+	"version": "1.0.13",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "@apigo.cc/datatable",
-			"version": "1.0.15",
+			"name": "@web/datatable",
+			"version": "1.0.13",
 			"devDependencies": {
 				"@playwright/test": "^1.40.0",
 				"@rollup/plugin-terser": "^1.0.0",

package.json

@@ -1,22 +1,21 @@
 {
-  "name": "@apigo.cc/datatable",
-  "version": "1.0.15",
-  "type": "module",
-  "main": "dist/datatable.js",
-  "module": "dist/datatable.js",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "test": "playwright test",
-    "pub": "node scripts/publish.js"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.40.0",
-    "@rollup/plugin-terser": "^1.0.0",
-    "terser": "^5.47.1",
-    "vite": "^5.0.0"
-  }
+	"name": "@web/datatable",
+	"version": "1.0.13",
+	"type": "module",
+	"main": "dist/datatable.js",
+	"module": "dist/datatable.js",
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"test": "playwright test"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.40.0",
+		"@rollup/plugin-terser": "^1.0.0",
+		"terser": "^5.47.1",
+		"vite": "^5.0.0"
+	}
 }

scripts/publish.js

@@ -1,46 +0,0 @@
-import { execSync } from 'child_process';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-try {
-  // 1. 获取最新 tag
-  let tag;
-  try {
-    tag = execSync('git describe --tags --abbrev=0', { encoding: 'utf8' }).trim();
-  } catch (err) {
-    throw new Error('Failed to find git tags. Please make sure the repository has tags (e.g., v1.0.0) before publishing.');
-  }
-  // 去掉 v 前缀
-  const version = tag.startsWith('v') ? tag.slice(1) : tag;
-
-  console.log(`Latest git tag: ${tag}, Version to publish: ${version}`);
-
-  // 2. 读取并更新 package.json
-  const pkgPath = path.join(__dirname, '../package.json');
-  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-  
-  // npm 要求包名全小写，scope + name 强制 toLowerCase
-  const baseName = (pkg.name.includes('/') ? pkg.name.split('/')[1] : pkg.name).toLowerCase();
-  pkg.name = `@apigo.cc/${baseName}`;
-  pkg.version = version;
-
-  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
-  console.log(`Updated package.json: name=${pkg.name}, version=${pkg.version}`);
-
-  // 3. 构建
-  console.log('Running build...');
-  execSync('npm run build', { stdio: 'inherit', cwd: path.join(__dirname, '..') });
-
-  // 4. 发布
-  console.log('Publishing to npm...');
-  const args = process.argv.slice(2).join(' ');
-  execSync(`npm publish --access public ${args}`, { stdio: 'inherit', cwd: path.join(__dirname, '..') });
-
-  console.log('Publish successful!');
-} catch (error) {
-  console.error('Publish failed:', error.message);
-  process.exit(1);
-}

src/DataTable.js

@@ -253,7 +253,6 @@ const createSelectionManager = (container, state) => {
 globalThis.Component.register('DataTable', container => {
         if (!container.state) container.state = globalThis.NewState({})
         const state = container.state
-        container.editable = container.hasAttribute('editable')
 
         Object.assign(state, {
                 list: [], fields: [], _renderedList: [],
@@ -264,8 +263,7 @@ globalThis.Component.register('DataTable', container => {
                 filterConfig: {}, 
                 activeFieldId: null, activeField: null, activeModes: [],
                 _columnStats: {}, _internalUpdate: false, _appliedHash: '', _fieldsDirty: false, _masterCellNodes: null,
-                isDirty: false, isBulkEdit: null,
-                editable: container.editable
+                isDirty: false, isBulkEdit: null
         })
 
         const perf = createPerfMonitor();
@@ -294,7 +292,6 @@ globalThis.Component.register('DataTable', container => {
         container.onScroll = () => {
                 perf.onScroll(); scroll.refresh();
                 container.hideColumnMenu();
-                container.hideEditor(true);
                 const prev = container.querySelector('.dt-spacer-prev'), post = container.querySelector('.dt-spacer-post');
                 if (prev) { prev.style.height = (state.prevHeight || 0) + 'px'; prev.style.display = state.prevHeight > 0 ? 'block' : 'none'; }
                 if (post) { post.style.height = (state.postHeight || 0) + 'px'; post.style.display = state.postHeight > 0 ? 'block' : 'none'; }
@@ -345,11 +342,6 @@ globalThis.Component.register('DataTable', container => {
 
         container.showColumnMenu = (field, event) => {
                 const btn = event.currentTarget, menu = container.querySelector('.dt-column-menu');
-                if (menu.style.display === 'block' && state.activeFieldId === field.id) {
-                        container.hideColumnMenu();
-                        container.applySortFilter();
-                        return;
-                }
                 const type = field.settings?.formType || field.type || 'text';
                 state.activeModes = MODE_MAP[type] || (['boolean', 'switch', 'checkbox', 'radio'].includes(type) ? [] : MODE_MAP.text);
                 if (!state.filterConfig[field.id]) state.filterConfig[field.id] = { mode: state.activeModes[0] || 'contains', value: '', selectedValues: [] };
@@ -528,7 +520,6 @@ globalThis.Component.register('DataTable', container => {
         };
 
         container.onMainDblClick = e => {
-                if (!container.editable) return;
                 const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row');
                 if (row && !row.classList.contains('dt-header-row')) {
                         const item = row._ref?.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll('.dt-cell')).indexOf(cell);
@@ -721,6 +712,7 @@ globalThis.Component.register('DataTable', container => {
                         </template>
 
                         <div class="mt-2" style="max-height: 180px; overflow-y: auto;">
+                                <div class="text-muted fw-bold mb-1" style="font-size: 9px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div>
                                 <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">
                                         <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background='var(--bs-light)'" onmouseout="this.style.background='transparent'">
                                                 <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">
@@ -734,10 +726,10 @@ globalThis.Component.register('DataTable', container => {
                                 <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>
                         </div>
 
-                        <div $if="this.state?.editable" class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
-                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
-                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
-                                <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
+                        <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
+                                <button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
+                                <button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
+                                <button class="btn btn-sm btn-outline-danger flex-grow-1" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
                         </div>
                 </template>
         </div>
@@ -752,17 +744,17 @@ globalThis.Component.register('DataTable', container => {
 
         <div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">
                 <div class="d-flex align-items-center gap-3 flex-grow-1">
-                        <div $if="this.state?.editable" class="d-flex align-items-center gap-1">
+                        <div class="d-flex align-items-center gap-1">
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>
                         </div>
-                        <div $if="this.state?.editable" class="vr h-50 my-auto text-muted opacity-25"></div>
+                        <div class="vr h-50 my-auto text-muted opacity-25"></div>
                         <div class="d-flex align-items-center gap-2 text-muted" style="font-size: 0.75rem">
                                 <i class="bi bi-check-all fs-6"></i>
                                 <span $text="(this.state?.selectedRowCount || 0) + ' selected / ' + (this.state?.list?.length || 0) + ' total'"></span>
                         </div>
                 </div>
-                <div $if="this.state?.editable" class="d-flex align-items-center gap-2">
+                <div class="d-flex align-items-center gap-2">
                         <button $if="this.state?.isDirty" class="btn btn-sm btn-primary border-0 px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save</button>
                         <button $if="!this.state?.isDirty" class="btn btn-sm btn-light border-0 px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Saved</button>
                 </div>
@@ -773,7 +765,6 @@ globalThis.Component.register('DataTable', container => {
         DataTable { display: block; }
         .dt-root { font-size: 0.875rem; }
         .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }
-        .dt-main { position: relative; }
         .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
         .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
         .dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }

test/diagnostic.html

@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>AutoForm Diagnostic</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="lib/state.js"></script>
     <script src="lib/base.js"></script>
     <script src="lib/datatable.js"></script>
@@ -45,7 +46,6 @@
     </script>
 </head>
 <body class="p-4">
-    <script src="lib/bootstrap.js"></script>
     <div style="width: 300px; border: 1px solid blue; min-height: 100px;">
         <AutoForm id="diagForm" inline></AutoForm>
     </div>

test/index.html

@@ -5,6 +5,9 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>DataTable Demo</title>
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 	<style>
 		body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; }
 		.demo-container { height: 100vh; padding: 20px; display: flex; flex-direction: column; }
@@ -13,11 +16,9 @@
 </head>
 
 <body class="bg-light">
-	<!-- 0. Bootstrap -->
-	<script src="lib/bootstrap.js"></script>
 	<div class="demo-container">
 		<div class="table-wrapper">
-			<DataTable id="myTable" editable></DataTable>
+			<DataTable id="myTable"></DataTable>
 		</div>
 	</div>
 

test/lib/base.js

@@ -127,14 +127,14 @@
               <option $each="item.options" as="opt" $value="opt.value !== undefined ? opt.value : opt" $text="opt.label || opt"></option>
           </select>
           
-          <div $if="['checkbox', 'radio'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px);">
+          <div $if="['checkbox', 'radio'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100">
               <label $each="item.options || [item.text||item.label||item.name]" as="opt" class="form-check mb-0 d-flex align-items-center" style="padding-left:0; cursor:pointer;">
                   <input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options ? (opt.value !== undefined ? opt.value : opt) : 'on'" $bind="this.data[item.name]">
                   <span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span>
               </label>
           </div>
           
-          <div $if="item.type === 'switch'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px); display:flex !important;">
+          <div $if="item.type === 'switch'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding-left:0; min-height:0; display:flex !important;">
               <input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.data[item.name]">
           </div>
           

test/lib/datatable.js

@@ -356,7 +356,6 @@
   globalThis.Component.register("DataTable", (container) => {
     if (!container.state) container.state = globalThis.NewState({});
     const state = container.state;
-    container.editable = container.hasAttribute("editable");
     Object.assign(state, {
       list: [],
       fields: [],
@@ -377,8 +376,7 @@
       _fieldsDirty: false,
       _masterCellNodes: null,
       isDirty: false,
-      isBulkEdit: null,
-      editable: container.editable
+      isBulkEdit: null
     });
     const perf = createPerfMonitor();
     state.perf = perf.stats;
@@ -406,7 +404,6 @@
       perf.onScroll();
       scroll.refresh();
       container.hideColumnMenu();
-      container.hideEditor(true);
       const prev = container.querySelector(".dt-spacer-prev"), post = container.querySelector(".dt-spacer-post");
       if (prev) {
         prev.style.height = (state.prevHeight || 0) + "px";
@@ -469,11 +466,6 @@
     container.showColumnMenu = (field, event) => {
       var _a;
       const btn = event.currentTarget, menu = container.querySelector(".dt-column-menu");
-      if (menu.style.display === "block" && state.activeFieldId === field.id) {
-        container.hideColumnMenu();
-        container.applySortFilter();
-        return;
-      }
       const type = ((_a = field.settings) == null ? void 0 : _a.formType) || field.type || "text";
       state.activeModes = MODE_MAP[type] || (["boolean", "switch", "checkbox", "radio"].includes(type) ? [] : MODE_MAP.text);
       if (!state.filterConfig[field.id]) state.filterConfig[field.id] = { mode: state.activeModes[0] || "contains", value: "", selectedValues: [] };
@@ -721,7 +713,6 @@
     };
     container.onMainDblClick = (e) => {
       var _a, _b, _c;
-      if (!container.editable) return;
       const cell = e.target.closest(".dt-cell"), row = cell == null ? void 0 : cell.closest(".dt-row");
       if (row && !row.classList.contains("dt-header-row")) {
         const item = (_a = row._ref) == null ? void 0 : _a.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll(".dt-cell")).indexOf(cell);
@@ -939,6 +930,7 @@
                         </template>
 
                         <div class="mt-2" style="max-height: 180px; overflow-y: auto;">
+                                <div class="text-muted fw-bold mb-1" style="font-size: 9px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div>
                                 <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">
                                         <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background='var(--bs-light)'" onmouseout="this.style.background='transparent'">
                                                 <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">
@@ -952,10 +944,10 @@
                                 <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>
                         </div>
 
-                        <div $if="this.state?.editable" class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
-                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
-                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
-                                <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
+                        <div class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">
+                                <button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>
+                                <button class="btn btn-sm btn-outline-secondary flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>
+                                <button class="btn btn-sm btn-outline-danger flex-grow-1" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>
                         </div>
                 </template>
         </div>
@@ -970,17 +962,17 @@
 
         <div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">
                 <div class="d-flex align-items-center gap-3 flex-grow-1">
-                        <div $if="this.state?.editable" class="d-flex align-items-center gap-1">
+                        <div class="d-flex align-items-center gap-1">
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>
                                 <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>
                         </div>
-                        <div $if="this.state?.editable" class="vr h-50 my-auto text-muted opacity-25"></div>
+                        <div class="vr h-50 my-auto text-muted opacity-25"></div>
                         <div class="d-flex align-items-center gap-2 text-muted" style="font-size: 0.75rem">
                                 <i class="bi bi-check-all fs-6"></i>
                                 <span $text="(this.state?.selectedRowCount || 0) + ' selected / ' + (this.state?.list?.length || 0) + ' total'"></span>
                         </div>
                 </div>
-                <div $if="this.state?.editable" class="d-flex align-items-center gap-2">
+                <div class="d-flex align-items-center gap-2">
                         <button $if="this.state?.isDirty" class="btn btn-sm btn-primary border-0 px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save</button>
                         <button $if="!this.state?.isDirty" class="btn btn-sm btn-light border-0 px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Saved</button>
                 </div>
@@ -994,7 +986,6 @@
         DataTable { display: block; }
         .dt-root { font-size: 0.875rem; }
         .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }
-        .dt-main { position: relative; }
         .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
         .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
         .dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }

test/lib/state.js

@@ -4,7 +4,7 @@
   "use strict";
   var _a, _b;
   const Util = {
-    clone: (obj) => JSON.parse(JSON.stringify(obj)),
+    clone: globalThis.structuredClone ? (obj) => globalThis.structuredClone(obj) : (obj) => JSON.parse(JSON.stringify(obj)),
     base64: (str) => btoa(String.fromCharCode(...new TextEncoder().encode(str))),
     unbase64: (str) => new TextDecoder().decode(Uint8Array.from(atob(str), (c) => c.charCodeAt(0))),
     urlbase64: (str) => Util.base64(str).replace(/[+/=]/g, (m) => ({ "+": "-", "/": "", "=": "" })[m]),
@@ -385,7 +385,6 @@
             if (existingNodes) {
               node._keyedNodes.delete(keyVal);
               existingNodes.forEach((child) => {
-                node.parentNode.insertBefore(child, node);
                 child._ref[indexName] = k;
                 child._ref[asName] = item;
                 _scanTree(child);

test/minimal_perf.html

@@ -23,7 +23,7 @@
             
             const div = document.createElement('div');
             div.setAttribute('style', 'height: 400px; width: 800px; border: 1px solid red');
-            div.innerHTML = '<DataTable id="dt" editable style="display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden"></DataTable>';
+            div.innerHTML = '<DataTable id="dt" style="display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden"></DataTable>';
             document.body.appendChild(div);
             
             // Wait for MutationObserver to pick up the new element
@@ -49,7 +49,5 @@
         };
     </script>
 </head>
-<body>
-    <script src="lib/bootstrap.js"></script>
-</body>
+<body></body>
 </html>

vite.config.js

@@ -5,9 +5,9 @@ import terser from '@rollup/plugin-terser';
 export default defineConfig({
   resolve: {
     alias: {
-      '@apigo.cc/state': resolve(__dirname, '../state/src/index.js'),
-      '@apigo.cc/base': resolve(__dirname, '../base/src/index.js'),
-      '@apigo.cc/datatable': resolve(__dirname, 'src/index.js')
+      '@web/state': resolve(__dirname, '../state/src/index.js'),
+      '@web/base': resolve(__dirname, '../base/src/index.js'),
+      '@web/datatable': resolve(__dirname, 'src/index.js')
     }
   },
   server: {
@@ -22,7 +22,7 @@ export default defineConfig({
       formats: ['umd']
     },
     rollupOptions: {
-      external: ['@apigo.cc/state', '@apigo.cc/base'],
+      external: ['@web/state', '@web/base'],
       output: [
         {
           format: 'umd',
@@ -30,8 +30,8 @@ export default defineConfig({
           entryFileNames: 'datatable.js',
           extend: true,
           globals: {
-            '@apigo.cc/state': 'ApigoState',
-            '@apigo.cc/base': 'ApigoBase'
+            '@web/state': 'ApigoState',
+            '@web/base': 'ApigoBase'
           }
         },
         {
@@ -40,8 +40,8 @@ export default defineConfig({
           entryFileNames: 'datatable.min.js',
           extend: true,
           globals: {
-            '@apigo.cc/state': 'ApigoState',
-            '@apigo.cc/base': 'ApigoBase'
+            '@web/state': 'ApigoState',
+            '@web/base': 'ApigoBase'
           },
           plugins: [terser()]
         }