add grid, initial version

css/functions/func.scss

@@ -1,3 +1,10 @@
+@mixin inset($top, $right, $bottom, $left) {
+    top: $top;
+    right: $right;
+    bottom: $bottom;
+    left: $left;
+}
+
 @mixin scrollbar() {
     &::-webkit-scrollbar {
         width: 8px;

css/grid.scss

@@ -0,0 +1,250 @@
+@keyframes loading-spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(359deg);
+    }
+}
+
+.grid {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+    & {
+        --hover-bg-color: lightyellow;
+        --header-border-color: #adaba9;
+        --header-bg-color: #fafafa;
+        --header-fore-color: #000;
+        --cell-border-color: #f0f0f0;
+        --cell-fore-color: #333;
+        --dark-border-color: #666;
+        --split-border-color: #b3b3b3;
+        --dragger-bg-color: #fff;
+        --row-bg-color: #fff;
+        --row-active-bg-color: #fafafa;
+        --row-selected-bg-color: #e6f2fb;
+        --text-disabled-color: gray;
+        --loading-bg-color: hsla(0, 0%, 100%, .4);
+        --loading-fore-color: rgba(0, 0, 0, .2);
+
+        --font-size: .8125rem;
+        --line-height: 36px;
+        --header-line-height: 26px;
+        --text-indent: 8px;
+
+        --loading-size: 40px;
+        --loading-border-radius: 20px;
+
+        --arrow-size: 4px;
+        --split-width: 8px;
+        --dragger-size: 20px;
+        --dragger-opacity: .4;
+        --dragger-cursor-size: 4px;
+        --dragger-cursor-opacity: .6;
+
+        --header-padding: 4px 12px 4px 8px;
+        --spacing-s: 4px;
+        --spacing-cell: 5px 4px 5px 8px;
+    }
+
+    &:focus,
+    &:focus-visible {
+        outline: none;
+    }
+
+    &,
+    input[type="text"] {
+        font-size: var(--font-size);
+    }
+
+    >.grid-sizer {
+        position: absolute;
+        white-space: nowrap;
+        font-weight: bold;
+        visibility: hidden;
+    }
+
+    >.grid-header {
+        width: 100%;
+        min-width: 100%;
+        margin: 0;
+        border-bottom: 1px solid var(--header-border-color);
+        background-color: var(--header-bg-color);
+        color: var(--header-fore-color);
+        user-select: none;
+        border-collapse: collapse;
+        border-spacing: 0;
+        table-layout: fixed;
+        position: relative;
+
+        th {
+            padding: 0;
+            margin: 0;
+            word-wrap: break-word;
+            white-space: normal;
+            position: relative;
+
+            >div {
+                line-height: var(--header-line-height);
+                min-height: var(--line-height);
+                display: flex;
+                align-items: center;
+                padding: var(--header-padding);
+                box-sizing: border-box;
+            }
+
+            >.arrow {
+                width: 0;
+                height: 0;
+                top: 50%;
+                margin-top: calc(0px - var(--arrow-size) / 2);
+                right: calc(var(--arrow-size) / 2);
+                position: absolute;
+
+                &.asc {
+                    border-bottom: var(--arrow-size) solid var(--dark-border-color);
+                }
+
+                &.desc {
+                    border-top: var(--arrow-size) solid var(--dark-border-color);
+                }
+
+                &.asc,
+                &.desc {
+                    border-left: var(--arrow-size) solid transparent;
+                    border-right: var(--arrow-size) solid transparent;
+                }
+            }
+
+            >.spliter {
+                position: absolute;
+                height: 100%;
+                top: 0;
+                right: calc(0px - var(--split-width) /2);
+                width: var(--split-width);
+                cursor: ew-resize;
+                z-index: 1;
+
+                &::after {
+                    content: '';
+                    height: 100%;
+                    width: 1px;
+                    display: block;
+                    margin: 0 auto;
+                    transition: background-color .12s ease;
+                }
+
+                &:hover::after {
+                    background-color: var(--split-border-color);
+                }
+            }
+        }
+    }
+
+    >.grid-body {
+        flex: 1 1 auto;
+        overflow: auto;
+        color: var(--cell-fore-color);
+        @include scrollbar();
+
+        .grid-body-content {
+            position: absolute;
+            min-width: 100%;
+            table-layout: fixed;
+            border-collapse: collapse;
+            border-spacing: 0;
+
+            >.grid-row {
+                line-height: var(--line-height);
+                white-space: nowrap;
+                background-color: var(--row-bg-color);
+                border-bottom: 1px solid var(--cell-border-color);
+                box-sizing: border-box;
+
+                &:hover {
+                    background-color: var(--row-active-bg-color);
+                }
+
+                &.selected {
+                    background-color: var(--row-selected-bg-color);
+                }
+
+                >td {
+                    padding: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: pre;
+
+                    >span {
+                        padding: var(--spacing-cell);
+                    }
+
+                    >input[type="text"] {
+                        border: none;
+                        box-sizing: border-box;
+                        height: calc(var(--line-height) + 2px);
+                        width: 100%;
+                        text-indent: var(--text-indent);
+
+                        &:focus,
+                        &:focus-visible {
+                            outline: none;
+                        }
+
+                        &:disabled {
+                            color: var(--text-disabled-color);
+                        }
+                    }
+
+                    .checkbox-wrapper .check-box-inner {
+
+                        &,
+                        >svg {
+                            transition: none;
+                        }
+                    }
+                }
+            }
+        }
+
+        .grid-hover-holder {
+            box-sizing: border-box;
+            position: absolute;
+            line-height: var(--line-height);
+            padding: var(--spacing-cell);
+            background-color: var(--hover-bg-color);
+            white-space: pre;
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    >.grid-loading {
+        position: absolute;
+        @include inset(0, 0, 0, 0);
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0s linear .12s, opacity .12s ease;
+        background-color: var(--loading-bg-color);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1;
+
+        >div {
+            background-color: var(--loading-fore-color);
+            border-radius: var(--loading-border-radius);
+
+            >svg {
+                width: var(--loading-size);
+                height: var(--loading-size);
+                padding: 20px;
+                animation: loading-spinner 1.2s infinite linear;
+            }
+        }
+    }
+}

css/ui.scss

@@ -1,3 +1,4 @@
 @import './checkbox.scss';
 @import './dropdown.scss';
 @import './tooltip.scss';
+@import './grid.scss';

index.html

@@ -21,6 +21,7 @@
           <li data-page="lib/ui/checkbox.html">checkbox</li>
           <li data-page="lib/ui/tooltip.html">tooltip</li>
           <li data-page="lib/ui/dropdown.html">dropdown</li>
+          <li data-page="lib/ui/grid.html">grid</li>
         </ol>
       </li>
       <li class="title">lib-utility</li>

lib/ui/grid.html

@@ -0,0 +1,49 @@
+<div>
+  <h1>grid</h1>
+  <hr />
+  <p>
+    创建一个统一样式的滚动列表元素。
+  </p>
+  <hr />
+  <h2>示例</h2>
+  <pre></pre>
+  <div id="grid-sample"></div>
+  <!-- <div style="height: 80px"></div> -->
+  <script type="text/javascript">
+    !function () {
+      const Grid = window["lib-ui"].Grid;
+
+      const grid = new Grid(document.querySelector('#grid-sample'));
+      // grid.height = 0;
+      grid.columns = [
+        { key: 'c1', caption: 'column 1' },
+        { key: 'c2', caption: 'column 2', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
+        { key: 'c3', caption: 'column 3', width: 90 },
+        { key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input }
+      ];
+      grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
+      grid.init();
+      const source = [];
+      for (let i = 0; i < 1000; i++) {
+        source.push(
+          { c1: 'abc', c2: true, c3: 12345, c4: 'Note note this is note', enabled: false },
+          { c1: 'abc2bbbbaaaaa', c2: false, c3: 1225, c4: 'Note note this is note' },
+          { c1: 'type', c2: false, c3: 121111 },
+          { c1: 'diff', c2: true, c3: 124445555555555555 }
+        );
+      }
+      grid.source = source;
+
+      window.grid = grid;
+    }();
+  </script>
+  <style type="text/css">
+    #grid-sample {
+      height: 400px;
+    }
+
+    #grid-sample>.grid {
+      height: 100%;
+    }
+  </style>
+</div>

lib/ui/grid.js

@@ -21,23 +21,35 @@ class GridColumn {
     static setValue(element, val) { element.innerText = val }
 
     static getValue(element) { return element.innerText }
+
+    static setStyle(element, style) {
+        for (let css of Object.entries(style)) {
+            element.style.setProperty(css[0], css[1]);
+        }
+    }
 }
 
 class GridInputColumn extends GridColumn {
     static createEdit(trigger) {
         const input = document.createElement('input');
-        input.setAttribute('type', 'input');
+        input.setAttribute('type', 'text');
         if (typeof trigger === 'function') {
             input.addEventListener('change', trigger);
         }
         return input;
     }
 
-    static setValue(element, val) { element.value = val }
+    static setValue(element, val) {
+        if (element.tagName !== 'INPUT') {
+            super.setValue(element, val);
+        } else {
+            element.value = val;
+        }
+    }
 
-    static getValue(element) { return element.value }
+    static getValue(e) { return e.target.value }
 
-    static setEnabled(element, enabled) { element.disabled = enabled !== false }
+    static setEnabled(element, enabled) { element.disabled = enabled === false }
 }
 
 class GridDropdownColumn extends GridColumn {
@@ -53,9 +65,9 @@ class GridCheckboxColumn extends GridColumn {
 
     static setValue(element, val) { element.querySelector('input').checked = val }
 
-    static getValue(element) { return element.querySelector('input').checked }
+    static getValue(e) { return e.target.checked }
 
-    static setEnabled(element, enabled) { element.querySelector('input').disabled = enabled !== false }
+    static setEnabled(element, enabled) { element.querySelector('input').disabled = enabled === false }
 }
 
 const ColumnTypes = {
@@ -81,6 +93,9 @@ class Grid {
     #rowCount = -1;
     #overflows;
     #scrollTop;
+    #scrollLeft;
+    #colTypes = {};
+    #colAttrs = {};
 
     columns = [];
     langs = {
@@ -89,15 +104,17 @@ class Grid {
         reset: r('reset', 'Reset')
     };
     virtualCount = 100;
-    rowHeight = 27;
+    rowHeight = 39;
-    filterRowHeight = 26;
+    filterRowHeight = 30;
     height;
+    readonly;
     multiSelect = false;
+    fullrowClick = true;
     allowHtml = false;
     holderDisabled = false;
     window = global;
     sortIndex = -1;
-    sortDirection = 'asc';
+    sortDirection = 1;
 
     willSelect;
     selectedRowChanged;
@@ -110,30 +127,32 @@ class Grid {
         Common: 0,
         Input: 1,
         Dropdown: 2,
-        Checkbox: 3
+        Checkbox: 3,
+        isCheckbox(type) { return type === 3 }
     };
 
     constructor(container) {
         this.#parent = container;
     }
 
-    get source() { return this.#source; }
+    get source() { return this.#source?.map(s => s.values) }
     set source(list) {
         if (this.#el == null) {
             throw new Error('grid has not been initialized.')
         }
+        if (!Array.isArray(list)) {
+            throw new Error('source is not an Array.')
+        }
+        list = list.map(i => { return { values: i } });
         this.#source = list;
         // TODO: filter to currentSource;
         this.#currentSource = list;
-        this.#containerHeight = list.length * this.rowHeight;
         this.#overflows = {};
         this.#selectedColumnIndex = -1;
         this.#selectedIndexes = [];
         this.#startIndex = 0;
         this.#scrollTop = 0;
-        this.#refs.body.scrollTop = 0;
+        this.#scrollLeft = 0;
-        this.#refs.bodyContent.style.top = '0px';
-        this.#refs.bodyContainer.style.height = `${this.#containerHeight}px`;
         this.#rowCount = -1;
 
         if (this.sortIndex >= 0) {
@@ -142,11 +161,38 @@ class Grid {
             this.resize();
         }
     }
+
     get virtual() { return this.#currentSource?.length > this.virtualCount }
-    get sortKey() { }
+
+    get sortKey() {
+        if (this.columns == null) {
+            return null;
+        }
+        return this.columns[this.sortIndex]?.key;
+    }
+
     get selectedIndexes() { return this.#selectedIndexes }
-    set selectedIndexes(indexes) { }
+    set selectedIndexes(indexes) {
-    get selectedIndex() { }
+        const startIndex = this.#startIndex;
+        this.#selectedIndexes.splice(0, this.#selectedIndexes.length, ...indexes);
+        if (this.readonly !== true) {
+            this.refresh();
+        } else {
+            [...this.#refs.bodyContent.children].forEach((row, i) => {
+                if (indexes.indexOf(startIndex + i) >= 0) {
+                    row.classList.add('selected');
+                } else if (row.classList.contains('selected')) {
+                    row.classList.remove('selected');
+                }
+            });
+        }
+        if (typeof this.selectedRowChanged === 'function') {
+            this.selectedRowChanged();
+        }
+    }
+
+    get selectedIndex() { return (this.#selectedIndexes && this.#selectedIndexes[0]) ?? -1 }
+
     get loading() { return this.#refs.loading?.style.visibility === 'visible' }
     set loading(flag) {
         if (this.#refs.loading == null) {
@@ -160,6 +206,7 @@ class Grid {
             this.#refs.loading.style.opacity = 1;
         }
     }
+
     get scrollTop() { return this.#refs.body?.scrollTop; }
     set scrollTop(top) {
         if (this.#refs.body == null) {
@@ -173,7 +220,6 @@ class Grid {
         this.#el = null;
         this.#refs = {};
         this.#rendering = true;
-        this.#currentSource = this.source;
         if (!(container instanceof HTMLElement)) {
             throw new Error('no specified parent.');
         }
@@ -186,26 +232,21 @@ class Grid {
             let flag = false;
             if (e.key === 'ArrowUp') {
                 // up
-                flag = true;
+                if (index > 0) {
-                if (index > 1) {
+                    flag = true;
-                    delete this.#currentSource[index].__selected;
                     index -= 1;
-                } else {
-                    index = 0;
                 }
             } else if (e.key === 'ArrowDown') {
                 // down
-                flag = true;
                 const count = this.#currentSource?.length ?? 0;
                 if (index < count - 1) {
-                    delete this.#currentSource[index].__selected;
+                    flag = true;
                     index += 1;
                 }
             }
             if (flag) {
-                this.selectedIndexes = [index];
+                this.#selectedIndexes = [index];
                 this.scrollToIndex(index);
-                this.#currentSource[index].__selected = true;
                 this.refresh();
                 if (typeof this.selectedRowChanged === 'function') {
                     this.selectedRowChanged(index);
@@ -228,21 +269,22 @@ class Grid {
         // loading
         const loading = document.createElement('div');
         loading.className = 'grid-loading';
-        loading.appendChild(createIcon('fa-regular', 'spinner-third'));
+        const loadingHolder = document.createElement('div');
+        loadingHolder.appendChild(createIcon('fa-regular', 'spinner-third'));
+        loading.appendChild(loadingHolder);
         this.#refs.loading = loading;
         grid.appendChild(loading);
         this.#el = grid;
 
         this.#rendering = false;
         if (this.sortIndex >= 0) {
-            this.sortColumn(true);
+            this.sortColumn();
-        } else {
-            this.resize();
         }
     }
 
     scrollToIndex(index) {
-        this.#scrollToTop(index * this.rowHeight, true);
+        const top = this.#scrollToTop(index * this.rowHeight, true);
+        this.#refs.body.scrollTop = top;
     }
 
     resize(force) {
@@ -250,21 +292,18 @@ class Grid {
             return;
         }
         const body = this.#refs.body;
-        let height = this.#refs.header.offsetHeight + 2;
+        // let height = this.#refs.header.offsetHeight + 2;
-        let top = body.offsetTop;
+        // let top = body.offsetTop;
-        if (top !== height) {
+        // if (top !== height) {
-            body.style.top = `${height}px`;
+        //     body.style.top = `${height}px`;
-            top = height;
+        //     top = height;
-        }
+        // }
+        const top = this.#refs.header.offsetHeight;
 
-        height = this.height;
+        let height = this.height;
-        if (isNaN(height)) {
+        if (isNaN(height) || height <= 0) {
             height = this.#el.offsetHeight - top;
-        } else if (height === 0) {
-            height = this.#refs.bodyContent.offsetHeight;
-            this.#el.style.height = `${top + height}px`;
         }
-        body.style.height = `${height}px`;
         const count = truncate((height - 1) / this.rowHeight) * (RedumCount * 2) + 1;
         if (force || count !== this.#rowCount) {
             this.#rowCount = count;
@@ -275,6 +314,10 @@ class Grid {
 
     reload() {
         this.#containerHeight = this.#currentSource.length * this.rowHeight;
+        this.#refs.body.scrollTop = 0;
+        this.#refs.body.scrollLeft = 0;
+        this.#refs.bodyContent.style.top = '0px';
+        this.#refs.bodyContainer.style.height = `${this.#containerHeight}px`;
         this.#adjustRows(this.#refs.bodyContent);
         this.refresh();
     }
@@ -292,7 +335,10 @@ class Grid {
                 if (!col.autoResize) {
                     return;
                 }
-                const width = widths[i];
+                let width = widths[i];
+                if (width < col.width) {
+                    width = col.width;
+                }
                 if (width > 0) {
                     this.#changeColumnWidth(i, width);
                 }
@@ -300,7 +346,79 @@ class Grid {
         }
     }
 
-    sortColumn(auto, reload) { }
+    resetChange() {
+        if (this.#currentSource == null) {
+            return;
+        }
+        for (let row of this.#currentSource) {
+            delete row.__changed;
+        }
+    }
+
+    sortColumn(reload) {
+        const index = this.sortIndex;
+        const col = this.columns[index];
+        if (col == null) {
+            return;
+        }
+        const direction = this.sortDirection;
+        [...this.#refs.header.children].forEach((th, i) => {
+            const arrow = th.children[1]; // th.querySelector('layer.arrow');
+            if (arrow == null) {
+                return;
+            }
+            if (i === index) {
+                arrow.className = `arrow ${(direction !== 1 ? 'desc' : 'asc')}`;
+            } else if (arrow.className !== 'arrow') {
+                arrow.className = 'arrow';
+            }
+        });
+        let comparer;
+        if (typeof col.sortFilter !== 'function') {
+            const direction = this.sortDirection;
+            if (isNaN(direction)) {
+                direction = 1;
+            }
+            comparer = (a, b) => {
+                const ta = a.values[col.key];
+                const tb = b.values[col.key];
+                if ((ta == null || tb == null) && typeof col.filter === 'function') {
+                    a = col.filter(a.values);
+                    b = col.filter(b.values);
+                } else {
+                    a = ta;
+                    b = tb;
+                }
+                if (a?.value != null) {
+                    a = a.value;
+                }
+                if (b?.value != null) {
+                    b = b.value;
+                }
+                if (a == null && typeof b === 'number') {
+                    a = 0;
+                } else if (typeof a === 'number' && b == null) {
+                    b = 0;
+                } else if (a != null && b == null) {
+                    return direction;
+                } else if (typeof a === 'string' && typeof b === 'string') {
+                    a = a.toLowerCase();
+                    b = b.toLowerCase();
+                }
+                return a === b ? 0 : (a > b ? 1 : -1) * direction;
+            };
+        } else {
+            comparer = (a, b) => col.sortFilter(a, b) * direction;
+        }
+        this.#source.sort(comparer);
+        // TODO: filter to currentSource;
+        this.#currentSource = this.#source;
+        if (reload) {
+            this.reload();
+        } else {
+            this.refresh();
+        }
+    }
 
     #createHeader() {
         const thead = document.createElement('table');
@@ -320,29 +438,34 @@ class Grid {
                 continue;
             }
             // style
+            const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
             if (col.width > 0 || col.shrink) {
                 col.autoResize = false;
             } else {
                 col.autoResize = true;
                 this.#needResize = true;
                 sizer.innerText = col.caption;
-                let width = sizer.offsetWidth + 20;
+                let width = sizer.offsetWidth + 22;
+                if (col.allcheck && isCheckbox) {
+                    width += 32;
+                }
                 if (width < MiniColumnWidth) {
                     width = MiniColumnWidth;
                 }
                 col.width = width;
             }
-            col.align ??= 'left';
+            col.align ??= isCheckbox ? 'center' : 'left';
             if (col.sortable !== false) {
                 col.sortable = true;
             }
             if (col.shrink) {
                 col.style = { 'text-align': col.align };
             } else {
+                const w = `${col.width}px`;
                 col.style = {
-                    'width': col.width,
+                    'width': w,
-                    'max-width': col.width,
+                    'max-width': w,
-                    'min-width': col.width,
+                    'min-width': w,
                     'text-align': col.align
                 };
             }
@@ -357,14 +480,19 @@ class Grid {
             th.addEventListener('mousedown', e => this.#onDragStart(col, e));
             const wrapper = document.createElement('div');
             th.appendChild(wrapper);
-            if (col.enabled !== false && col.allcheck && col.type === Grid.ColumnTypes.Checkbox) {
+            if (col.enabled !== false && col.allcheck && isCheckbox) {
                 const check = createCheckbox({
                     onchange: e => this.#onColumnAllChecked(col, e.target.checked)
                 });
                 wrapper.appendChild(check);
             }
             const caption = document.createElement('span');
-            caption = col.caption;
+            if (col.textStyle != null) {
+                for (let css of Object.entries(col.textStyle)) {
+                    caption.style.setProperty(css[0], css[1]);
+                }
+            }
+            caption.innerText = col.caption;
             wrapper.appendChild(caption);
             // order arrow
             if (col.sortable) {
@@ -407,25 +535,17 @@ class Grid {
         body.className = 'grid-body';
         body.addEventListener('scroll', e => throttle(this.#onScroll, RefreshInterval, this, e), { passive: true });
         const cols = this.columns;
-        let height = this.#currentSource.length * this.rowHeight;
+        let width = 1;
-        let width;
+        for (let col of cols) {
-        if (height === 0) {
+            if (col.visible !== false && !isNaN(col.width)) {
-            height = 1;
+                width += col.width + 1;
-            width = 0;
-            for (let col of cols) {
-                if (col.visible !== false && !isNaN(col.width)) {
-                    width += col.width + 1;
-                }
             }
-            width += 1;
         }
-        this.#containerHeight = height;
         // body container
         const bodyContainer = document.createElement('div');
         bodyContainer.style.position = 'relative';
         bodyContainer.style.minWidth = '100%';
         bodyContainer.style.minHeight = '1px';
-        bodyContainer.style.height = `${height}px`;
         if (width > 0) {
             bodyContainer.style.width = `${width}px`;
         }
@@ -434,7 +554,7 @@ class Grid {
         const bodyContent = document.createElement('table');
         bodyContent.className = 'grid-body-content';
         bodyContainer.appendChild(bodyContent);
-        this.#adjustRows();
+        // this.#adjustRows();
         // events
         if (!this.holderDisabled) {
             const holder = document.createElement('div');
@@ -464,7 +584,7 @@ class Grid {
             for (let i = 0; i < count; i += 1) {
                 const row = document.createElement('tr');
                 row.className = 'grid-row';
-                row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + 1));
+                row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
                 row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
                 cols.forEach((col, j) => {
                     const cell = document.createElement('td');
@@ -480,13 +600,25 @@ class Grid {
                                 cell.style.setProperty(css[0], css[1]);
                             }
                         }
-                        if (col.type === Grid.ColumnTypes.Checkbox) {
+                        if (Grid.ColumnTypes.isCheckbox(col.type)) {
                             cell.appendChild(GridCheckboxColumn.createEdit(e => this.#onRowChanged(e, exists + i, col, e.target.checked)));
-                        } else if (this.allowHtml && col.type != null && isNaN(col.type)) {
+                            // this.#colTypes[col.key] = GridCheckboxColumn;
-                            cell.appendChild(col.type.create());
                         } else {
-                            cell.appendChild(GridColumn.create());
+                            let type = this.#colTypes[col.key];
+                            if (type == null) {
+                                if (isNaN(col.type)) {
+                                    if (this.allowHtml && col.type != null) {
+                                        type = col.type;
+                                    }
+                                } else {
+                                    type = ColumnTypes[col.type];
+                                }
+                                type ??= GridColumn;
+                                this.#colTypes[col.key] = type;
+                            }
+                            cell.appendChild(type.create());
                         }
+
                     }
                     row.appendChild(cell);
                 });
@@ -502,10 +634,9 @@ class Grid {
     }
 
     #fillRows(rows, cols, widths) {
-        const startIndex = this.startIndex;
+        const startIndex = this.#startIndex;
-        const selected = this.#selectedIndexes;
+        const selectedIndexes = this.#selectedIndexes;
-        const allowHtml = this.allowHtml;
+        [...rows].forEach((row, i) => {
-        rows.forEach((row, i) => {
             const vals = this.#currentSource[startIndex + i];
             if (vals == null) {
                 return;
@@ -514,13 +645,19 @@ class Grid {
                 return;
             }
             const item = vals.values;
-            if (selected.indexOf(startIndex + i) < 0) {
+            const selected = selectedIndexes.indexOf(startIndex + i) >= 0;
-                row.classList.remove('selected');
+            if (selected) {
-            } else {
                 row.classList.add('selected');
+            } else if (row.classList.contains('selected')) {
+                row.classList.remove('selected');
             }
             // data
-            const selected = row.dataset.selected === '1';
+            const selectChanged = vals.__selected ^ selected;
+            if (selected) {
+                vals.__selected = true;
+            } else {
+                delete vals.__selected;
+            }
             cols.forEach((col, j) => {
                 if (col.visible === false) {
                     return;
@@ -539,19 +676,18 @@ class Grid {
                 val ??= '';
                 // fill
                 const cell = row.children[j];
-                const custom = allowHtml && col.type != null && isNaN(col.type);
+                if (typeof col.bgFilter === 'function') {
+                    const bgColor = col.bgFilter(item);
+                    cell.style.backgroundColor = bgColor ?? '';
+                }
+                const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
+                const type = isCheckbox ? GridCheckboxColumn : this.#colTypes[col.key] ?? GridColumn;
                 let element;
-                if (vals.__selected ^ selected) {
+                if (!isCheckbox && selectChanged) {
-                    if (custom) {
+                    element = selected && typeof type.createEdit === 'function' ?
-                        element = selected ?
+                        type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e))) :
-                            col.type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, col.type.getValue(element))) :
+                        type.create();
-                            col.type.create();
+                    cell.replaceChildren(element);
-                        cell.replaceChildren(element);
-                        // } else if (col.type !== Grid.ColumnTypes.Checkbox) {
-                        //     // TODO:
-                    } else {
-                        element = cell.children[0];
-                    }
                 } else {
                     element = cell.children[0];
                 }
@@ -559,44 +695,322 @@ class Grid {
                 if (typeof enabled === 'string') {
                     enabled = item[enabled];
                 }
-                if (custom) {
+                type.setValue(element, val, item);
-                    col.type.setValue(element, item);
+                if (typeof type.setEnabled === 'function') {
-                    col.type.setEnabled(element, enabled);
+                    type.setEnabled(element, enabled);
-                } else if (col.type === Grid.ColumnTypes.Checkbox) {
-                    GridCheckboxColumn.setValue(element, val);
-                    GridCheckboxColumn.setEnabled(element, enabled);
-                } else {
-                    // TODO: input, dropdown, etc...
-                    GridColumn.setValue(element, val);
                 }
-            })
+                // auto resize
+                if (this.#needResize && col.autoResize) {
+                    const width = cell.scrollWidth + 12;
+                    if (width > 0 && widths != null && (isNaN(widths[j]) || widths[j] < width)) {
+                        widths[j] = width;
+                        widths.flag = true;
+                    }
+                }
+                if (typeof col.styleFilter === 'function') {
+                    const style = col.styleFilter(item);
+                    if (style != null) {
+                        type.setStyle(element, style);
+                    }
+                }
+                if (col.events != null) {
+                    for (let ev of Object.entries(col.events)) {
+                        element[ev[0]] = ev[1].bind(item);
+                    }
+                }
+                if (col.attrs != null) {
+                    let attrs = col.attrs;
+                    if (typeof attrs === 'function') {
+                        attrs = attrs(item);
+                    }
+                    for (let attr of Object.entries(attrs)) {
+                        element.setAttribute(attr[0], attr[1]);
+                    }
+                }
+            });
         });
     }
 
-    #changeColumnWidth(i, width) { }
+    #changeColumnWidth(index, width) {
+        const col = this.columns[index];
+        // const oldwidth = col.width;
+        const w = `${width}px`;
+        col.width = width;
+        col.style.width = w;
+        col.style['max-width'] = w;
+        col.style['min-width'] = w;
+        let element = this.#refs.header.children[index];
+        element.style.width = w;
+        element.style.maxWidth = w;
+        element.style.minWidth = w;
+        const body = this.#refs.bodyContent;
+        for (let row of body.children) {
+            element = row.children[index];
+            if (element != null) {
+                element.style.width = w;
+                element.style.maxWidth = w;
+                element.style.minWidth = w;
+            }
+        }
+        // } else {
+        //     width = this.#refs.bodyContainer.offsetWidth - oldwidth + width;
+        //     this.#refs.bodyContainer.style.width = `${width}px`;
+        // }
+    }
 
-    #scrollToTop(top, reload) { }
+    #scrollToTop(top, reload) {
+        const rowHeight = this.rowHeight;
+        top -= (top % (rowHeight * 2)) + (RedumCount * rowHeight);
+        if (top < 0) {
+            top = 0;
+        } else {
+            let bottomTop = this.#containerHeight - (reload ? 0 : this.#rowCount * rowHeight);
+            if (bottomTop < 0) {
+                bottomTop = 0;
+            }
+            if (top > bottomTop) {
+                top = bottomTop;
+            }
+        }
+        if (this.#scrollTop !== top) {
+            this.#scrollTop = top;
+            if (this.virtual) {
+                this.#startIndex = top / rowHeight;
+            }
+            this.refresh();
+            if (this.virtual) {
+                this.#refs.bodyContent.style.top = `${top}px`;
+            }
+        } else if (reload) {
+            this.refresh();
+        }
+
+        return top;
+    }
+
+    #getColumnIndex(target) {
+        if (target == null) {
+            return -1;
+        }
+        let parent;
+        while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
+            target = parent;
+        }
+        if (parent == null) {
+            return -1;
+        }
+        const index = [...parent.children].indexOf(target);
+        return index >= this.columns.length ? -1 : index;
+    }
+
+    #onHeaderClicked(col, e, force) {
+        const attr = this.#colAttrs[col.key];
+        if (!force && attr != null && (attr.resizing || attr.dragging)) {
+            return;
+        }
+        if (col.sortable && ['LABEL', 'LAYER', 'SVG', 'USE'].indexOf(e.target.tagName) < 0) {
+            const index = this.columns.indexOf(col);
+            if (index < 0) {
+                return;
+            }
+            if (this.sortIndex === index) {
+                this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+            } else {
+                this.sortIndex = index;
+            }
+            this.sortColumn(true);
+            if (typeof this.columnChanged === 'function') {
+                this.columnChanged(ColumnChangedType.Sort, index, this.sortDirection);
+            }
+        }
+    }
 
-    #onHeaderClicked(col, e, force) { }
     #onDragStart(col, e) { }
+
     #onResizeStart(col, e) { }
-    #onColumnAllChecked(col, flag) { }
+
-    #onScroll(e) { }
+    #onColumnAllChecked(col, flag) {
-    #onBodyMouseMove(e, holder) { }
+        if (this.#currentSource == null) {
-    #onRowClicked(e, index, colIndex) { }
+            return;
-    #onRowDblClicked(e) { }
+        }
+        const key = col.key;
+        const test = typeof col.enabled === 'string';
+        if (typeof col.onallchecked === 'function') {
+            col.onallchecked.call(this, col, flag);
+        } else {
+            for (let row of this.#currentSource) {
+                const item = row.values;
+                if (item == null) {
+                    continue;
+                }
+                const enabled = test ? item[col.enabled] : col.enabled;
+                if (enabled !== false) {
+                    item[key] = flag;
+                    row.__changed = true;
+                    if (typeof col.onchanged === 'function') {
+                        col.onchanged.call(this, item, flag);
+                    }
+                }
+            }
+            this.refresh();
+        }
+    }
+
+    #onScroll(e) {
+        this.#scrollLeft = e.target.scrollLeft;
+        if (!this.virtual) {
+            return;
+        }
+        const top = e.target.scrollTop;
+        this.#scrollToTop(top);
+    }
+
+    #onBodyMouseMove(e, holder) {
+        let target = e.target;
+        if (target.className === 'grid-hover-holder') {
+            return;
+        }
+        let parent;
+        while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
+            target = parent;
+        }
+        let keyid = target.keyid;
+        if (parent == null || keyid == null) {
+            delete holder.keyid;
+            if (holder.style.display !== 'none') {
+                holder.style.display = 'none';
+            }
+            return;
+        }
+        const oldkeyid = holder.keyid;
+        keyid += this.#startIndex << MaxColumnBit;
+        if (keyid === oldkeyid) {
+            return;
+        }
+        let overflow = this.#overflows[keyid];
+        if (overflow == null) {
+            overflow = target.scrollWidth > target.offsetWidth;
+            this.#overflows[keyid] = overflow;
+        }
+        if (overflow) {
+            holder.keyid = keyid;
+            holder.innerText = target.innerText;
+            const top = this.#refs.bodyContent.offsetTop + target.offsetTop + 1;
+            let left = target.offsetLeft;
+            let width = holder.offsetWidth;
+            if (width > this.#bodyClientWidth) {
+                width = this.#bodyClientWidth;
+            }
+            const maxleft = this.#bodyClientWidth + this.#scrollLeft - width;
+            if (left > maxleft) {
+                left = maxleft;
+            }
+            const height = target.offsetHeight;
+            holder.style.cssText = `top: ${top}px; left: ${left}px; max-width: ${this.#bodyClientWidth}px; height: ${height - 2}px`;
+        } else {
+            if (oldkeyid != null) {
+                delete holder.keyid;
+            }
+            if (holder.style.display !== 'none') {
+                holder.style.display = 'none';
+            }
+        }
+    }
+
+    #onRowClicked(e, index, colIndex) {
+        const startIndex = this.#startIndex;
+        const selectedIndex = startIndex + index;
+        if (typeof this.willSelect === 'function' && !this.willSelect(selectedIndex, colIndex)) {
+            return;
+        }
+        // multi-select
+        let flag = false;
+        const selectedIndexes = this.#selectedIndexes;
+        if (this.multiSelect) {
+            if (e.ctrlKey) {
+                const i = selectedIndexes.indexOf(selectedIndex);
+                if (i < 0) {
+                    selectedIndexes.push(selectedIndex);
+                } else {
+                    selectedIndexes.splice(i, 1);
+                }
+                flag = true;
+            } else if (e.shiftKey && selectedIndexes.length > 0) {
+                if (selectedIndexes.length > 1 || selectedIndexes[0] !== selectedIndex) {
+                    let start = selectedIndexes[selectedIndexes.length - 1];
+                    let end;
+                    if (start > selectedIndex) {
+                        end = start;
+                        start = selectedIndex;
+                    } else {
+                        end = selectedIndex;
+                    }
+                    selectedIndexes.splice(0);
+                    for (let i = start; i <= end; i += 1) {
+                        selectedIndexes.push(i);
+                    }
+                    flag = true;
+                }
+            }
+        }
+        if (!flag && selectedIndexes.length !== 1 || selectedIndexes[0] !== selectedIndex) {
+            selectedIndexes.splice(0, selectedIndexes.length, selectedIndex);
+            flag = true;
+        }
+        // apply style
+        if (flag) {
+            if (this.readonly !== true) {
+                this.refresh();
+            } else {
+                [...this.#refs.bodyContent.children].forEach((row, i) => {
+                    if (selectedIndexes.indexOf(startIndex + i) >= 0) {
+                        row.classList.add('selected');
+                    } else if (row.classList.contains('selected')) {
+                        row.classList.remove('selected');
+                    }
+                });
+            }
+            if (typeof this.selectedRowChanged === 'function') {
+                this.selectedRowChanged(selectedIndex);
+            }
+        }
+        colIndex ??= this.#getColumnIndex(e.target);
+        this.#selectedColumnIndex = colIndex;
+        if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1 && typeof this.cellClicked === 'function') {
+            if (this.cellClicked(selectedIndex, colIndex) === false) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        }
+    }
+    #onRowDblClicked(e) {
+        if (e.target.tagName === 'INPUT') {
+            return;
+        }
+        const index = this.selectedIndex;
+        if (typeof this.rowDblClicked === 'function') {
+            this.rowDblClicked(index);
+        }
+        if (typeof this.cellDblClicked === 'function') {
+            const colIndex = this.#selectedColumnIndex;
+            if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1) {
+                this.cellDblClicked(index, colIndex);
+            }
+        }
+    }
     #onRowChanged(_e, index, col, value) {
         if (this.#currentSource == null) {
             return;
         }
-        const item = this.#currentSource[this.#startIndex + index].values;
+        const row = this.#currentSource[this.#startIndex + index];
+        const item = row.values;
         if (item == null) {
             return;
         }
         const enabled = typeof col.enabled === 'string' ? item[col.enabled] : col.enabled;
         if (enabled !== false) {
             item[col.key] = value;
-            item.__changed = true;
+            row.__changed = true;
             if (typeof col.onchanged === 'function') {
                 col.onchanged.call(this, item, value);
             }