sync form work

lib/ui/grid.js

@@ -172,19 +172,28 @@ class GridCheckboxColumn extends GridColumn {
 }
 
 class GridIconColumn extends GridColumn {
-    static create() { return createElement('span', 'icon') }
+    static create() { return createElement('span', 'col-icon') }
 
     static setValue(element, val, item, col) {
+        let className = col.className;
+        if (typeof className === 'function') {
+            className = className.call(col, item);
+        }
+        if (className == null) {
+            element.className = 'col-icon';
+        } else {
+            element.className = `col-icon ${className}`;
+        }
         let type = col.iconType;
         if (typeof type === 'function') {
-            type = type(item);
+            type = type.call(col, item);
         }
         type ??= 'fa-regular';
         if (element.dataset.type !== type || element.dataset.icon !== val) {
             const icon = createIcon(type, val);
             // const layer = element.children[0];
             element.replaceChildren(icon);
-            !nullOrEmpty(col.tooltip) && setTooltip(icon, col.tooltip);
+            !nullOrEmpty(col.tooltip) && setTooltip(element, col.tooltip);
             element.dataset.type = type;
             element.dataset.icon = val;
         }
@@ -238,7 +247,8 @@ class Grid {
         reset: r('reset', 'Reset')
     };
     virtualCount = 100;
-    rowHeight = 39;
+    rowHeight = 36;
+    extraRows = 0;
     filterRowHeight = 30;
     height;
     readonly;
@@ -246,6 +256,7 @@ class Grid {
     fullrowClick = true;
     allowHtml = false;
     holderDisabled = false;
+    headerVisible = true;
     window = global;
     sortIndex = -1;
     sortDirection = 1;
@@ -416,7 +427,7 @@ class Grid {
     }
 
     scrollToIndex(index) {
-        const top = this.#scrollToTop(index * this.rowHeight, true);
+        const top = this.#scrollToTop(index * (this.rowHeight + 1), true);
         this.#refs.body.scrollTop = top;
     }
 
@@ -431,13 +442,15 @@ class Grid {
         //     body.style.top = `${height}px`;
         //     top = height;
         // }
-        const top = this.#refs.header.offsetHeight;
+        const top = this.headerVisible === false ? 0 : this.#refs.header.offsetHeight;
 
         let height = this.height;
-        if (isNaN(height) || height <= 0) {
+        if (height === 0) {
+            height = this.#containerHeight;
+        } else if (isNaN(height) || height < 0) {
             height = this.#el.offsetHeight - top;
         }
-        const count = truncate((height - 1) / this.rowHeight) * (RedumCount * 2) + 1;
+        const count = truncate((height - 1) / (this.rowHeight + 1)) * (RedumCount * 2) + 1;
         if (force || count !== this.#rowCount) {
             this.#rowCount = count;
             this.reload();
@@ -446,7 +459,11 @@ class Grid {
     }
 
     reload() {
-        this.#containerHeight = this.#currentSource.length * this.rowHeight;
+        let length = this.#currentSource.length;
+        if (this.extraRows > 0) {
+            length += this.extraRows;
+        }
+        this.#containerHeight = length * (this.rowHeight + 1);
         this.#refs.body.scrollTop = 0;
         this.#refs.body.scrollLeft = 0;
         this.#refs.bodyContent.style.top = '0px';
@@ -555,6 +572,9 @@ class Grid {
 
     #createHeader() {
         const thead = createElement('table', 'grid-header');
+        if (this.headerVisible === false) {
+            thead.style.display = 'none';
+        }
         const header = createElement('tr');
         thead.appendChild(header);
         const sizer = this.#refs.sizer;
@@ -838,7 +858,9 @@ class Grid {
                     enabled = false;
                 } else {
                     enabled = col.enabled;
-                    if (typeof enabled === 'string') {
+                    if (typeof enabled === 'function') {
+                        enabled = enabled.call(col, item);
+                    } else if (typeof enabled === 'string') {
                         enabled = item[enabled];
                     }
                 }
@@ -1023,7 +1045,7 @@ class Grid {
     }
 
     #scrollToTop(top, reload) {
-        const rowHeight = this.rowHeight;
+        const rowHeight = (this.rowHeight + 1);
         top -= (top % (rowHeight * 2)) + (RedumCount * rowHeight);
         if (top < 0) {
             top = 0;
@@ -1234,7 +1256,8 @@ class Grid {
             return;
         }
         const key = col.key;
-        const test = typeof col.enabled === 'string';
+        const isFunction = typeof col.enabled === 'function';
+        const isString = typeof col.enabled === 'string';
         if (typeof col.onallchecked === 'function') {
             col.onallchecked.call(this, col, flag);
         } else {
@@ -1243,7 +1266,7 @@ class Grid {
                 if (item == null) {
                     continue;
                 }
-                const enabled = test ? item[col.enabled] : col.enabled;
+                const enabled = isFunction ? col.enabled(item) : isString ? item[col.enabled] : col.enabled;
                 if (enabled !== false) {
                     item[key] = flag;
                     row.__changed = true;
@@ -1413,7 +1436,12 @@ class Grid {
         if (item == null) {
             return;
         }
-        const enabled = typeof col.enabled === 'string' ? item[col.enabled] : col.enabled;
+        let enabled = col.enabled;
+        if (typeof enabled === 'function') {
+            enabled = enabled.call(col, item);
+        } else if (typeof enabled === 'string') {
+            enabled = item[enabled];
+        }
         if (enabled !== false) {
             item[col.key] = value;
             row.__changed = true;