@operato/data-grist 1.11.6 → 1.11.7

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.11.7](https://github.com/hatiolab/operato/compare/v1.11.6...v1.11.7) (2023-12-17)
+
+
+### :bug: Bug Fix
+
+* 2-level header for data-grist ([a06219c](https://github.com/hatiolab/operato/commit/a06219caea2f4b1df5073792e1cda44223214994))
+* missing width configurations for 'image' type column ([29d98b8](https://github.com/hatiolab/operato/commit/29d98b82d78b35f71d819b236a1e51c1d96c69e0))
+
+
+
 ### [1.11.6](https://github.com/hatiolab/operato/compare/v1.11.5...v1.11.6) (2023-12-14)
 
 

package/demo/data-grist-test.html

@@ -291,7 +291,8 @@
             header: 'thumbnail',
             record: {
               editable: true
-            }
+            },
+            width: 120
           },
           {
             type: 'datetime',

package/dist/src/configure/column-builder.js

@@ -4,6 +4,7 @@ import { generateGutterColumn } from '../gutters';
 import { getGristEventHandler } from '../handlers';
 import { getRenderer } from '../renderers';
 export const buildColumn = (column) => {
+    var _a;
     var compiled = { ...column };
     if (column.type == 'gutter') {
         compiled = generateGutterColumn(column);
@@ -15,6 +16,13 @@ export const buildColumn = (column) => {
             renderer: () => header
         };
     }
+    if (typeof ((_a = compiled.header) === null || _a === void 0 ? void 0 : _a.renderer) == 'string') {
+        const text = compiled.header.renderer;
+        compiled.header = {
+            ...compiled.header,
+            renderer: () => text
+        };
+    }
     /* label */
     if (label) {
         let type = typeof label;

package/dist/src/configure/column-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, FilterOperator } from '..'\nimport { NOOP } from '../const'\nimport { getEditor } from '../editors'\nimport { generateGutterColumn } from '../gutters'\nimport { getGristEventHandler } from '../handlers'\nimport { getRenderer } from '../renderers'\nimport { ColumnConfig } from '../types'\n\nexport const buildColumn = (column: any): ColumnConfig => {\n  var compiled: ColumnConfig = { ...column }\n\n  if (column.type == 'gutter') {\n    compiled = generateGutterColumn(column)\n  }\n\n  var { name, header, record, handlers, label, filter } = compiled\n\n  /* header */\n\n  if (typeof header == 'string') {\n    compiled.header = {\n      renderer: () => header\n    }\n  }\n\n  /* label */\n  if (label) {\n    let type = typeof label\n    switch (type) {\n      case 'boolean':\n        let title = typeof header == 'string' ? header : name\n        compiled.label = {\n          renderer: () => title\n        }\n        break\n      case 'string':\n        compiled.label = {\n          renderer: () => label\n        }\n        break\n      default:\n        compiled.label = label\n    }\n  } else {\n    compiled.label = false\n  }\n\n  /*\n   * record\n   */\n  var { renderer: recordRenderer, editor, editable, classifier } = record || {}\n\n  recordRenderer = getRenderer(recordRenderer || column.type)\n  if (editable !== false && typeof editor !== 'function') {\n    editor = getEditor(column.type)\n  }\n\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  compiled.record = {\n    ...record,\n    classifier,\n    renderer: recordRenderer,\n    editor\n  }\n\n  /* filter */\n  if (filter) {\n    let type = typeof filter\n    switch (type) {\n      case 'boolean':\n        compiled.filter = {\n          type: column.type,\n          operator: 'eq'\n        }\n        break\n      case 'string':\n        compiled.filter = {\n          type: column.type,\n          operator: filter as FilterOperator\n        }\n        break\n      default:\n        compiled.filter = {\n          //@ts-ignore\n          type: column.type,\n          operator: 'eq',\n          ...(filter as FilterConfigObject)\n        }\n    }\n  }\n\n  /* handler */\n  var { click, dblclick, focus } = handlers || {}\n\n  compiled.handlers = {\n    click: click && getGristEventHandler(click),\n    dblclick: dblclick && getGristEventHandler(dblclick),\n    focus: focus && getGristEventHandler(focus)\n  }\n\n  return compiled\n}\n"]}
+{"version":3,"file":"column-builder.js","sourceRoot":"","sources":["../../../src/configure/column-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterConfigObject, FilterOperator } from '..'\nimport { NOOP } from '../const'\nimport { getEditor } from '../editors'\nimport { generateGutterColumn } from '../gutters'\nimport { getGristEventHandler } from '../handlers'\nimport { getRenderer } from '../renderers'\nimport { ColumnConfig } from '../types'\n\nexport const buildColumn = (column: any): ColumnConfig => {\n  var compiled: ColumnConfig = { ...column }\n\n  if (column.type == 'gutter') {\n    compiled = generateGutterColumn(column)\n  }\n\n  var { name, header, record, handlers, label, filter } = compiled\n\n  /* header */\n\n  if (typeof header == 'string') {\n    compiled.header = {\n      renderer: () => header\n    }\n  }\n\n  if (typeof compiled.header?.renderer == 'string') {\n    const text = compiled.header.renderer\n    compiled.header = {\n      ...compiled.header,\n      renderer: () => text\n    }\n  }\n\n  /* label */\n  if (label) {\n    let type = typeof label\n    switch (type) {\n      case 'boolean':\n        let title = typeof header == 'string' ? header : name\n        compiled.label = {\n          renderer: () => title\n        }\n        break\n      case 'string':\n        compiled.label = {\n          renderer: () => label\n        }\n        break\n      default:\n        compiled.label = label\n    }\n  } else {\n    compiled.label = false\n  }\n\n  /*\n   * record\n   */\n  var { renderer: recordRenderer, editor, editable, classifier } = record || {}\n\n  recordRenderer = getRenderer(recordRenderer || column.type)\n  if (editable !== false && typeof editor !== 'function') {\n    editor = getEditor(column.type)\n  }\n\n  if (typeof classifier !== 'function') {\n    classifier = NOOP\n  }\n\n  compiled.record = {\n    ...record,\n    classifier,\n    renderer: recordRenderer,\n    editor\n  }\n\n  /* filter */\n  if (filter) {\n    let type = typeof filter\n    switch (type) {\n      case 'boolean':\n        compiled.filter = {\n          type: column.type,\n          operator: 'eq'\n        }\n        break\n      case 'string':\n        compiled.filter = {\n          type: column.type,\n          operator: filter as FilterOperator\n        }\n        break\n      default:\n        compiled.filter = {\n          //@ts-ignore\n          type: column.type,\n          operator: 'eq',\n          ...(filter as FilterConfigObject)\n        }\n    }\n  }\n\n  /* handler */\n  var { click, dblclick, focus } = handlers || {}\n\n  compiled.handlers = {\n    click: click && getGristEventHandler(click),\n    dblclick: dblclick && getGristEventHandler(dblclick),\n    focus: focus && getGristEventHandler(focus)\n  }\n\n  return compiled\n}\n"]}

package/dist/src/data-grid/data-grid-accum-field.js

@@ -1,6 +1,5 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-// import { guard } from 'lit/directives/guard.js'
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TooltipStyles } from '@operato/styles';
 import { ZERO_COLUMN } from '../configure/zero-config';
@@ -19,7 +18,7 @@ let DataGridAccumField = class DataGridAccumField extends LitElement {
     }
     render() {
         if (!this.column || !this.column.accumulator) {
-            return html ``;
+            return this.columnIndex == 0 ? html `<mwc-icon>functions</mwc-icon>` : html `${nothing}`;
         }
         var { value, column, record, rowIndex } = this;
         var { renderer } = column.record;
@@ -53,7 +52,6 @@ DataGridAccumField.styles = [
 
         white-space: nowrap;
         background-color: var(--grid-accum-record-background-color, #ccc);
-        padding: var(--grid-record-padding);
         border: 1px solid transparent;
         border-width: 1px 0;
         border-bottom: var(--grid-record-border-bottom);
@@ -61,17 +59,6 @@ DataGridAccumField.styles = [
         font-size: var(--grid-record-wide-fontsize);
         min-height: 19px;
       }
-      :host([gutter]) {
-        padding: var(--grid-gutter-padding);
-        text-align: center;
-      }
-      :host([gutter]) * {
-        cursor: default;
-      }
-
-      :host([focused]) {
-        --grid-record-border-bottom: var(--grid-record-focused-cell-border);
-      }
 
       span,
       pre {

package/dist/src/data-grid/data-grid-accum-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-accum-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-accum-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\n// import { guard } from 'lit/directives/guard.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-accum-field')\nexport class DataGridAccumField extends LitElement {\n  static styles = [\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        white-space: nowrap;\n        background-color: var(--grid-accum-record-background-color, #ccc);\n        padding: var(--grid-record-padding);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 19px;\n      }\n      :host([gutter]) {\n        padding: var(--grid-gutter-padding);\n        text-align: center;\n      }\n      :host([gutter]) * {\n        cursor: default;\n      }\n\n      :host([focused]) {\n        --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n      }\n\n      span,\n      pre {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin-top: 3px;\n        zoom: var(--grist-input-zoom);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = -1\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean }) editing = false\n  @property({ type: Object }) value = {}\n  @property({ attribute: false }) emphasized: any = false\n\n  render(): TemplateResult {\n    if (!this.column || !this.column.accumulator) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer } = column.record\n\n    return html`${renderer?.call(this, value, column, record, rowIndex, this)}`\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('column')) {\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n      if (align != DEFAULT_TEXT_ALIGN) {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-grid-accum-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-accum-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-accum-field')\nexport class DataGridAccumField extends LitElement {\n  static styles = [\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        white-space: nowrap;\n        background-color: var(--grid-accum-record-background-color, #ccc);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 19px;\n      }\n\n      span,\n      pre {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin-top: 3px;\n        zoom: var(--grist-input-zoom);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = -1\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean }) editing = false\n  @property({ type: Object }) value = {}\n  @property({ attribute: false }) emphasized: any = false\n\n  render(): TemplateResult {\n    if (!this.column || !this.column.accumulator) {\n      return this.columnIndex == 0 ? html`<mwc-icon>functions</mwc-icon>` : html`${nothing}`\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer } = column.record\n\n    return html`${renderer?.call(this, value, column, record, rowIndex, this)}`\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('column')) {\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n      if (align != DEFAULT_TEXT_ALIGN) {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n    }\n  }\n}\n"]}

package/dist/src/data-grid/data-grid-header.d.ts

@@ -1,6 +1,6 @@
 import '@operato/popup/ox-popup.js';
 import '@material/mwc-icon';
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { ColumnConfig, FilterValue, GristData, SortersConfig } from '../types';
 export declare class DataGridHeader extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -9,14 +9,17 @@ export declare class DataGridHeader extends LitElement {
     sorters: SortersConfig;
     filters: FilterValue[];
     filteringFeature: boolean;
+    private row1;
+    private row2;
     private _lastAccVal?;
     private _throttledNotifier?;
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult<1>;
+    renderHeaderColumn({ column, clazz, start, size, align, index, group }: any): TemplateResult;
     updated(changes: PropertyValues): void;
-    _renderHeader(column: ColumnConfig): import("lit").TemplateResult<1>;
-    _renderSortHeader(column: ColumnConfig): import("lit").TemplateResult<1>;
-    _renderFilterHeader(column: ColumnConfig): import("lit").TemplateResult<1>;
+    _renderHeader(column: ColumnConfig): TemplateResult<1>;
+    _renderSortHeader(column: ColumnConfig): TemplateResult<1>;
+    _renderFilterHeader(column: ColumnConfig): TemplateResult<1>;
     _changeSort(column: ColumnConfig): void;
     _accumalate(x: number): number;
     _notifyWidthChange(idx: number, width: number): void;

package/dist/src/data-grid/data-grid-header.js

@@ -2,7 +2,8 @@ import { __decorate } from "tslib";
 import '@operato/popup/ox-popup.js';
 import '@material/mwc-icon';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import throttle from 'lodash-es/throttle';
 import { TooltipStyles } from '@operato/styles';
 import { closestElement, detectOverflow } from '@operato/utils';
@@ -17,6 +18,8 @@ let DataGridHeader = class DataGridHeader extends LitElement {
         this.sorters = [];
         this.filters = [];
         this.filteringFeature = false;
+        this.row1 = [];
+        this.row2 = [];
     }
     connectedCallback() {
         super.connectedCallback();
@@ -51,53 +54,66 @@ let DataGridHeader = class DataGridHeader extends LitElement {
         }
     }
     render() {
-        var columns = this.columns || [];
+        const clazz = this.row2.length > 0 ? 'span-both' : undefined;
         return html `
-      ${columns.map((column, idx) => {
-            var _a;
-            return !column.hidden
-                ? html `
-              <div ?gutter=${column.type == 'gutter'} ?fixed=${column.fixed} column>
-                <span
-                  for-title
-                  style="text-align:${column.record.align || 'left'};${((_a = column.header) === null || _a === void 0 ? void 0 : _a.style) || ''}"
-                  @click=${(e) => this._changeSort(column)}
-                  @mouseover=${(e) => {
-                    const element = e.target;
-                    if (detectOverflow(element)) {
-                        element.setAttribute('data-tooltip', element.textContent.trim());
-                    }
-                }}
-                  @mouseout=${(e) => {
-                    const element = e.target;
-                    element.removeAttribute('data-tooltip');
-                }}
-                  >${this._renderHeader(column)}
-                </span>
+      ${this.row1.map(({ column, clazz, start, size, align, index, group }) => this.renderHeaderColumn({ column, clazz, start, size, align, index, group }))}
 
-                ${column.sortable
-                    ? html `
-                      <span sorter @click=${(e) => this._changeSort(column)}>
-                        ${this._renderSortHeader(column)}
-                      </span>
-                    `
-                    : nothing}
-                ${this.filteringFeature && column.filter && column.filter.operator !== 'search'
-                    ? html ` <span filter> ${this._renderFilterHeader(column)} </span> `
-                    : nothing}
-                ${column.resizable !== false
-                    ? html `
-                      <span splitter draggable="false" @mousedown=${(e) => this._mousedown(e, idx)}
-                        >&nbsp;</span
-                      >
-                    `
-                    : nothing}
-              </div>
-            `
-                : nothing;
-        })}
+      <div column class=${ifDefined(clazz)}"span-both"></div>
 
-      <div column></div>
+      ${this.row2.map(({ column, index }) => this.renderHeaderColumn({ column, index }))}
+    `;
+    }
+    renderHeaderColumn({ column, clazz, start, size, align, index, group }) {
+        var _a, _b;
+        if (column.hidden) {
+            return html `${nothing}`;
+        }
+        return html `
+      <div
+        ?gutter=${column.type == 'gutter'}
+        ?fixed=${column.fixed}
+        column
+        class=${ifDefined(clazz)}
+        style=${group
+            ? `--group-start:${start};--group-size:${size};${((_a = column.header) === null || _a === void 0 ? void 0 : _a.style) || ''}`
+            : `${((_b = column.header) === null || _b === void 0 ? void 0 : _b.style) || ''}`}
+      >
+        <span
+          for-title
+          style="text-align:${align || column.record.align || 'left'};"
+          @click=${(e) => this._changeSort(column)}
+          @mouseover=${(e) => {
+            const element = e.target;
+            if (detectOverflow(element)) {
+                element.setAttribute('data-tooltip', element.textContent.trim());
+            }
+        }}
+          @mouseout=${(e) => {
+            const element = e.target;
+            element.removeAttribute('data-tooltip');
+        }}
+          >${this._renderHeader(column)}
+        </span>
+
+        ${!group && column.sortable
+            ? html `
+              <span sorter @click=${(e) => this._changeSort(column)}>
+                ${this._renderSortHeader(column)}
+              </span>
+            `
+            : nothing}
+        ${!group &&
+            this.filteringFeature &&
+            column.filter &&
+            column.filter.operator !== 'search'
+            ? html ` <span filter> ${this._renderFilterHeader(column)} </span> `
+            : nothing}
+        ${column.resizable !== false
+            ? html `
+              <span splitter draggable="false" @mousedown=${(e) => this._mousedown(e, index)}>&nbsp;</span>
+            `
+            : nothing}
+      </div>
     `;
     }
     updated(changes) {
@@ -115,6 +131,55 @@ let DataGridHeader = class DataGridHeader extends LitElement {
                 detail: fixedLefts
             }));
         }
+        if (changes.has('columns')) {
+            this.row2 = this.columns.reduce((row2, column, index) => {
+                var _a;
+                if (column.hidden || !((_a = column.header) === null || _a === void 0 ? void 0 : _a.group)) {
+                    return row2;
+                }
+                return row2.concat({
+                    index,
+                    column
+                });
+            }, []);
+            const clazz = this.row2.length > 0 ? 'span-both' : undefined;
+            var columnNo = 0;
+            this.row1 = this.columns.reduce((row1, column, index) => {
+                var _a;
+                if (column.hidden) {
+                    return row1;
+                }
+                columnNo++;
+                if (!((_a = column.header) === null || _a === void 0 ? void 0 : _a.group)) {
+                    return row1.concat({
+                        index,
+                        column,
+                        clazz
+                    });
+                }
+                const { group, groupStyle } = column.header;
+                const last = row1[row1.length - 1];
+                if (!last || group !== last.group) {
+                    return row1.concat({
+                        index,
+                        column: {
+                            ...column,
+                            header: {
+                                renderer: () => group,
+                                style: groupStyle
+                            }
+                        },
+                        group,
+                        align: 'center',
+                        clazz: 'group-header',
+                        start: columnNo,
+                        size: 1
+                    });
+                }
+                last.size++;
+                return row1;
+            }, []);
+        }
     }
     _renderHeader(column) {
         var { renderer } = column.header || {};
@@ -281,7 +346,7 @@ let DataGridHeader = class DataGridHeader extends LitElement {
             e.stopPropagation();
             e.preventDefault();
             let column = this.columns[idx];
-            let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX));
+            let width = Math.max(0, Number(column.width || 100) + this._accumalate(e.movementX));
             if (width == 0) {
                 /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */
                 return;
@@ -305,6 +370,7 @@ DataGridHeader.styles = [
         display: grid;
         grid-template-columns: var(--grid-template-columns);
 
+        border-top: var(--grid-header-top-border);
         overflow: hidden;
       }
 
@@ -314,7 +380,6 @@ DataGridHeader.styles = [
         white-space: nowrap;
         overflow: hidden;
         background-color: var(--grist-background-color);
-        border-top: var(--grid-header-top-border);
         border-bottom: var(--grid-header-bottom-border);
         padding: var(--grid-header-padding);
 
@@ -339,6 +404,7 @@ DataGridHeader.styles = [
         text-overflow: ellipsis;
         line-height: 1.6;
         text-transform: capitalize;
+        align-self: center;
       }
 
       span[for-title] mwc-icon {
@@ -347,6 +413,9 @@ DataGridHeader.styles = [
 
       span[sorter],
       span[filter] {
+        display: flex;
+        align-self: center;
+
         padding: 0;
         border: 0;
       }
@@ -401,6 +470,15 @@ DataGridHeader.styles = [
         z-index: 1;
       }
 
+      .span-both {
+        grid-row: 1 / span 2; /* 1단과 2단에 걸쳐 표시 */
+      }
+
+      .group-header {
+        grid-row: 1; /* 1행에 배치 */
+        grid-column: var(--group-start) / span var(--group-size); /* 2열부터 시작하여 2열에 걸쳐 표시 */
+      }
+
       @media print {
         :host {
           grid-template-columns: var(--grid-template-print-columns);
@@ -423,6 +501,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'filtering-feature' })
 ], DataGridHeader.prototype, "filteringFeature", void 0);
+__decorate([
+    state()
+], DataGridHeader.prototype, "row1", void 0);
+__decorate([
+    state()
+], DataGridHeader.prototype, "row2", void 0);
 DataGridHeader = __decorate([
     customElement('ox-grid-header')
 ], DataGridHeader);

package/dist/src/data-grid/data-grid-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-header.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\nimport { TooltipStyles } from '@operato/styles'\nimport { closestElement, detectOverflow } from '@operato/utils'\n\nimport { ZERO_COLUMNS, ZERO_DATA } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getFilterRenderer } from '../filters/registry'\nimport { ColumnConfig, FilterConfigObject, FilterValue, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n  static styles = [\n    FilterStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--grid-template-columns);\n\n        overflow: hidden;\n      }\n\n      div[column] {\n        display: flex;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--grist-background-color);\n        border-top: var(--grid-header-top-border);\n        border-bottom: var(--grid-header-bottom-border);\n        padding: var(--grid-header-padding);\n\n        text-overflow: ellipsis;\n        font: var(--grid-header-font);\n        color: var(--grid-header-color);\n      }\n\n      div[gutter] {\n        padding: var(--padding-default) 0 var(--padding-narrow) 0;\n        text-align: center;\n      }\n\n      span {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n\n      span[for-title] {\n        flex: 1;\n        text-overflow: ellipsis;\n        line-height: 1.6;\n        text-transform: capitalize;\n      }\n\n      span[for-title] mwc-icon {\n        font-size: var(--grid-record-fontsize);\n      }\n\n      span[sorter],\n      span[filter] {\n        padding: 0;\n        border: 0;\n      }\n\n      span[sorter] mwc-icon {\n        font-size: var(--grid-header-sorter-size);\n      }\n\n      span[filter] > mwc-icon {\n        font-size: var(--fontsize-default);\n        line-height: 20px;\n      }\n\n      span[splitter] {\n        cursor: col-resize;\n        border-right: var(--grid-header-splitter-border);\n        margin-right: 0;\n      }\n\n      span[splitter]:hover {\n        border-right: var(--grid-header-splitter-border-hover);\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin: 3px 0 0 0;\n        zoom: var(--grist-input-zoom);\n      }\n\n      [filter-title] {\n        color: var(--grid-header-filter-title-color);\n        font: var(--grid-header-filter-title-font);\n        text-transform: capitalize;\n      }\n\n      [filter-title] * {\n        vertical-align: middle;\n      }\n\n      [filter-title] mwc-icon {\n        opacity: 0.7;\n        color: var(--grid-header-filter-title-icon-color);\n      }\n\n      [filter] input[type='checkbox'] {\n        margin-left: 10px;\n        margin-bottom: 5px;\n      }\n\n      [fixed] {\n        position: sticky;\n        z-index: 1;\n      }\n\n      @media print {\n        :host {\n          grid-template-columns: var(--grid-template-print-columns);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Array }) sorters: SortersConfig = []\n  @property({ type: Array }) filters: FilterValue[] = []\n  @property({ type: Boolean, attribute: 'filtering-feature' }) filteringFeature: boolean = false\n\n  private _lastAccVal?: number\n  private _throttledNotifier?: any\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const grid = closestElement('ox-grist', this)\n\n    if (this.filteringFeature) {\n      this?.addEventListener('filter-change', (e: Event) => {\n        const { name, operator, value } = (e as CustomEvent).detail\n        const filters = this.filters instanceof Array ? [...this.filters] : []\n\n        if (value == null) {\n          const index = filters.findIndex(filter => filter.name === name)\n          if (index === -1) {\n            return\n          }\n\n          filters.splice(index, 1)\n        } else {\n          const index = filters.findIndex(filter => filter.name === name)\n          if (index === -1) {\n            filters.push({ name, operator, value })\n          } else {\n            filters.splice(index, 1, { name, operator, value })\n          }\n        }\n\n        grid?.dispatchEvent(\n          new CustomEvent('fetch-params-change', {\n            detail: {\n              filters,\n              from: 'data-grid-header'\n            }\n          })\n        )\n      })\n    }\n  }\n\n  render() {\n    var columns = this.columns || []\n\n    return html`\n      ${columns.map((column, idx) =>\n        !column.hidden\n          ? html`\n              <div ?gutter=${column.type == 'gutter'} ?fixed=${column.fixed} column>\n                <span\n                  for-title\n                  style=\"text-align:${column.record.align || 'left'};${column.header?.style || ''}\"\n                  @click=${(e: MouseEvent) => this._changeSort(column)}\n                  @mouseover=${(e: MouseEvent) => {\n                    const element = e.target as HTMLSpanElement\n\n                    if (detectOverflow(element)) {\n                      element.setAttribute('data-tooltip', element.textContent!.trim())\n                    }\n                  }}\n                  @mouseout=${(e: MouseEvent) => {\n                    const element = e.target as HTMLSpanElement\n                    element.removeAttribute('data-tooltip')\n                  }}\n                  >${this._renderHeader(column)}\n                </span>\n\n                ${column.sortable\n                  ? html`\n                      <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>\n                        ${this._renderSortHeader(column)}\n                      </span>\n                    `\n                  : nothing}\n                ${this.filteringFeature && column.filter && (column.filter as FilterConfigObject).operator !== 'search'\n                  ? html` <span filter> ${this._renderFilterHeader(column)} </span> `\n                  : nothing}\n                ${column.resizable !== false\n                  ? html`\n                      <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e, idx)}\n                        >&nbsp;</span\n                      >\n                    `\n                  : nothing}\n              </div>\n            `\n          : nothing\n      )}\n\n      <div column></div>\n    `\n  }\n\n  updated(changes: PropertyValues) {\n    if (changes.has('data')) {\n      const fixedHeaders = Array.from(this.renderRoot.querySelectorAll('div[fixed]')) as HTMLElement[]\n      const fixedLefts = [] as number[]\n      var left = 0\n      fixedHeaders.forEach((header: HTMLElement) => {\n        header.style.left = left + 'px'\n        fixedLefts.push(left)\n\n        const width = header.offsetWidth\n        left += width\n      })\n\n      this.dispatchEvent(\n        new CustomEvent('fixed-lefts-change', {\n          detail: fixedLefts\n        })\n      )\n    }\n  }\n\n  _renderHeader(column: ColumnConfig) {\n    var { renderer } = column.header || {}\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n\n  _renderSortHeader(column: ColumnConfig) {\n    var sorters = this.sorters || []\n\n    var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n    if (!sorter) {\n      return html``\n    }\n\n    if (sorters.length > 1) {\n      var rank = sorters.indexOf(sorter) + 1\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n    } else {\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n    }\n  }\n\n  _renderFilterHeader(column: ColumnConfig) {\n    const name = column.name\n    const filter = column.filter as FilterConfigObject\n    const type = filter.type\n    const value = this.filters.find(filter => filter.name === name)?.value\n    const idx = filter!.operator === 'between' ? 1 : 0\n    const renderer = getFilterRenderer(type)[idx]\n\n    return html`\n      <mwc-icon\n        @click=${(e: Event) => {\n          const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement\n          const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup | null\n          // const popup = (e.target as HTMLElement).nextSibling as OxPopupList | null\n\n          // absolute position인 popup의 위치 부모는 grist 이므로,\n          // data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.\n          // this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.\n          const top = parent.offsetTop + parent.offsetHeight\n          const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft)\n\n          popup?.open({\n            right,\n            top\n          })\n        }}\n        >filter_alt</mwc-icon\n      >\n\n      ${!renderer\n        ? html``\n        : type !== 'select'\n        ? html` <ox-popup\n            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n            ${renderer(column, value, this)}</ox-popup\n          >`\n        : filter!.operator === 'in'\n        ? html`<ox-popup-list\n            multiple\n            attr-selected=\"checked\"\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: !e.detail\n                      ? undefined\n                      : e.detail instanceof Array && e.detail.length === 0\n                      ? undefined\n                      : e.detail\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`\n        : html`<ox-popup-list\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: e.detail ? e.detail : undefined\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`}\n    `\n  }\n\n  _changeSort(column: ColumnConfig) {\n    if (!column.sortable) {\n      return\n    }\n\n    var sorters = [...this.sorters]\n\n    var idx = sorters.findIndex(sorter => sorter.name == column.name)\n    if (idx !== -1) {\n      let sorter = sorters[idx]\n      if (sorter.desc) {\n        sorters.splice(idx, 1)\n      } else {\n        sorter.desc = true\n      }\n    } else {\n      var sorter = {\n        name: column.name\n      }\n\n      sorters.push(sorter)\n    }\n\n    this.sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('fetch-params-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          sorters: this.sorters,\n          from: 'data-grid-header'\n        }\n      })\n    )\n  }\n\n  _accumalate(x: number) {\n    this._lastAccVal = (this._lastAccVal ?? 0) + x\n    return this._lastAccVal\n  }\n\n  _notifyWidthChange(idx: number, width: number) {\n    if (!this._throttledNotifier) {\n      this._throttledNotifier = throttle((idx: number, width: number) => {\n        this.dispatchEvent(\n          new CustomEvent('column-width-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              idx,\n              width\n            }\n          })\n        )\n\n        this._lastAccVal = 0\n      }, 100)\n    }\n\n    this._throttledNotifier(idx, width)\n  }\n\n  _mousedown(e: MouseEvent, idx: number) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    var mousemoveHandler = ((e: MouseEvent) => {\n      e.stopPropagation()\n      e.preventDefault()\n      let column = this.columns[idx]\n\n      let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX))\n      if (width == 0) {\n        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n        return\n      }\n\n      this._notifyWidthChange(idx, width)\n    }).bind(this)\n\n    var mouseupHandler = ((e: MouseEvent) => {\n      document.removeEventListener('mousemove', mousemoveHandler)\n      document.removeEventListener('mouseup', mouseupHandler)\n\n      mousemoveHandler(e)\n    }).bind(this)\n\n    document.addEventListener('mousemove', mousemoveHandler)\n    document.addEventListener('mouseup', mouseupHandler)\n  }\n}\n"]}
+{"version":3,"file":"data-grid-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-header.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues, nothing, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\nimport { TooltipStyles } from '@operato/styles'\nimport { closestElement, detectOverflow } from '@operato/utils'\n\nimport { ZERO_COLUMNS, ZERO_DATA } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getFilterRenderer } from '../filters/registry'\nimport { ColumnConfig, FilterConfigObject, FilterValue, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n  static styles = [\n    FilterStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: var(--grid-template-columns);\n\n        border-top: var(--grid-header-top-border);\n        overflow: hidden;\n      }\n\n      div[column] {\n        display: flex;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--grist-background-color);\n        border-bottom: var(--grid-header-bottom-border);\n        padding: var(--grid-header-padding);\n\n        text-overflow: ellipsis;\n        font: var(--grid-header-font);\n        color: var(--grid-header-color);\n      }\n\n      div[gutter] {\n        padding: var(--padding-default) 0 var(--padding-narrow) 0;\n        text-align: center;\n      }\n\n      span {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n\n      span[for-title] {\n        flex: 1;\n        text-overflow: ellipsis;\n        line-height: 1.6;\n        text-transform: capitalize;\n        align-self: center;\n      }\n\n      span[for-title] mwc-icon {\n        font-size: var(--grid-record-fontsize);\n      }\n\n      span[sorter],\n      span[filter] {\n        display: flex;\n        align-self: center;\n\n        padding: 0;\n        border: 0;\n      }\n\n      span[sorter] mwc-icon {\n        font-size: var(--grid-header-sorter-size);\n      }\n\n      span[filter] > mwc-icon {\n        font-size: var(--fontsize-default);\n        line-height: 20px;\n      }\n\n      span[splitter] {\n        cursor: col-resize;\n        border-right: var(--grid-header-splitter-border);\n        margin-right: 0;\n      }\n\n      span[splitter]:hover {\n        border-right: var(--grid-header-splitter-border-hover);\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin: 3px 0 0 0;\n        zoom: var(--grist-input-zoom);\n      }\n\n      [filter-title] {\n        color: var(--grid-header-filter-title-color);\n        font: var(--grid-header-filter-title-font);\n        text-transform: capitalize;\n      }\n\n      [filter-title] * {\n        vertical-align: middle;\n      }\n\n      [filter-title] mwc-icon {\n        opacity: 0.7;\n        color: var(--grid-header-filter-title-icon-color);\n      }\n\n      [filter] input[type='checkbox'] {\n        margin-left: 10px;\n        margin-bottom: 5px;\n      }\n\n      [fixed] {\n        position: sticky;\n        z-index: 1;\n      }\n\n      .span-both {\n        grid-row: 1 / span 2; /* 1단과 2단에 걸쳐 표시 */\n      }\n\n      .group-header {\n        grid-row: 1; /* 1행에 배치 */\n        grid-column: var(--group-start) / span var(--group-size); /* 2열부터 시작하여 2열에 걸쳐 표시 */\n      }\n\n      @media print {\n        :host {\n          grid-template-columns: var(--grid-template-print-columns);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Array }) sorters: SortersConfig = []\n  @property({ type: Array }) filters: FilterValue[] = []\n  @property({ type: Boolean, attribute: 'filtering-feature' }) filteringFeature: boolean = false\n\n  @state() private row1: {\n    index: number\n    column: ColumnConfig\n    clazz?: string\n    start?: number\n    size?: number\n    align?: string\n    group?: string\n  }[] = []\n\n  @state() private row2: {\n    index: number\n    column: ColumnConfig\n  }[] = []\n\n  private _lastAccVal?: number\n  private _throttledNotifier?: any\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const grid = closestElement('ox-grist', this)\n\n    if (this.filteringFeature) {\n      this?.addEventListener('filter-change', (e: Event) => {\n        const { name, operator, value } = (e as CustomEvent).detail\n        const filters = this.filters instanceof Array ? [...this.filters] : []\n\n        if (value == null) {\n          const index = filters.findIndex(filter => filter.name === name)\n          if (index === -1) {\n            return\n          }\n\n          filters.splice(index, 1)\n        } else {\n          const index = filters.findIndex(filter => filter.name === name)\n          if (index === -1) {\n            filters.push({ name, operator, value })\n          } else {\n            filters.splice(index, 1, { name, operator, value })\n          }\n        }\n\n        grid?.dispatchEvent(\n          new CustomEvent('fetch-params-change', {\n            detail: {\n              filters,\n              from: 'data-grid-header'\n            }\n          })\n        )\n      })\n    }\n  }\n\n  render() {\n    const clazz = this.row2.length > 0 ? 'span-both' : undefined\n\n    return html`\n      ${this.row1.map(({ column, clazz, start, size, align, index, group }) =>\n        this.renderHeaderColumn({ column, clazz, start, size, align, index, group })\n      )}\n\n      <div column class=${ifDefined(clazz)}\"span-both\"></div>\n\n      ${this.row2.map(({ column, index }) => this.renderHeaderColumn({ column, index }))}\n    `\n  }\n\n  renderHeaderColumn({ column, clazz, start, size, align, index, group }: any): TemplateResult {\n    if (column.hidden) {\n      return html`${nothing}`\n    }\n\n    return html`\n      <div\n        ?gutter=${column.type == 'gutter'}\n        ?fixed=${column.fixed}\n        column\n        class=${ifDefined(clazz)}\n        style=${group\n          ? `--group-start:${start};--group-size:${size};${column.header?.style || ''}`\n          : `${column.header?.style || ''}`}\n      >\n        <span\n          for-title\n          style=\"text-align:${align || column.record.align || 'left'};\"\n          @click=${(e: MouseEvent) => this._changeSort(column)}\n          @mouseover=${(e: MouseEvent) => {\n            const element = e.target as HTMLSpanElement\n\n            if (detectOverflow(element)) {\n              element.setAttribute('data-tooltip', element.textContent!.trim())\n            }\n          }}\n          @mouseout=${(e: MouseEvent) => {\n            const element = e.target as HTMLSpanElement\n            element.removeAttribute('data-tooltip')\n          }}\n          >${this._renderHeader(column)}\n        </span>\n\n        ${!group && column.sortable\n          ? html`\n              <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>\n                ${this._renderSortHeader(column)}\n              </span>\n            `\n          : nothing}\n        ${!group &&\n        this.filteringFeature &&\n        column.filter &&\n        (column.filter as FilterConfigObject).operator !== 'search'\n          ? html` <span filter> ${this._renderFilterHeader(column)} </span> `\n          : nothing}\n        ${column.resizable !== false\n          ? html`\n              <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e, index)}>&nbsp;</span>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues) {\n    if (changes.has('data')) {\n      const fixedHeaders = Array.from(this.renderRoot.querySelectorAll('div[fixed]')) as HTMLElement[]\n      const fixedLefts = [] as number[]\n      var left = 0\n      fixedHeaders.forEach((header: HTMLElement) => {\n        header.style.left = left + 'px'\n        fixedLefts.push(left)\n\n        const width = header.offsetWidth\n        left += width\n      })\n\n      this.dispatchEvent(\n        new CustomEvent('fixed-lefts-change', {\n          detail: fixedLefts\n        })\n      )\n    }\n\n    if (changes.has('columns')) {\n      this.row2 = this.columns.reduce((row2, column, index) => {\n        if (column.hidden || !column.header?.group) {\n          return row2\n        }\n        return row2.concat({\n          index,\n          column\n        } as any)\n      }, [] as any[])\n\n      const clazz = this.row2.length > 0 ? 'span-both' : undefined\n\n      var columnNo = 0\n\n      this.row1 = this.columns.reduce((row1, column, index) => {\n        if (column.hidden) {\n          return row1\n        }\n\n        columnNo++\n        if (!column.header?.group) {\n          return row1.concat({\n            index,\n            column,\n            clazz\n          } as any)\n        }\n        const { group, groupStyle } = column.header\n        const last = row1[row1.length - 1] as any\n\n        if (!last || group !== last.group) {\n          return row1.concat({\n            index,\n            column: {\n              ...column,\n              header: {\n                renderer: () => group,\n                style: groupStyle\n              }\n            },\n            group,\n            align: 'center',\n            clazz: 'group-header',\n            start: columnNo,\n            size: 1\n          } as any)\n        }\n\n        last.size++\n\n        return row1\n      }, [] as any[])\n    }\n  }\n\n  _renderHeader(column: ColumnConfig) {\n    var { renderer } = column.header || {}\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n\n  _renderSortHeader(column: ColumnConfig) {\n    var sorters = this.sorters || []\n\n    var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n    if (!sorter) {\n      return html``\n    }\n\n    if (sorters.length > 1) {\n      var rank = sorters.indexOf(sorter) + 1\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n    } else {\n      return sorter.desc\n        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n        : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n    }\n  }\n\n  _renderFilterHeader(column: ColumnConfig) {\n    const name = column.name\n    const filter = column.filter as FilterConfigObject\n    const type = filter.type\n    const value = this.filters.find(filter => filter.name === name)?.value\n    const idx = filter!.operator === 'between' ? 1 : 0\n    const renderer = getFilterRenderer(type)[idx]\n\n    return html`\n      <mwc-icon\n        @click=${(e: Event) => {\n          const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement\n          const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup | null\n          // const popup = (e.target as HTMLElement).nextSibling as OxPopupList | null\n\n          // absolute position인 popup의 위치 부모는 grist 이므로,\n          // data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.\n          // this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.\n          const top = parent.offsetTop + parent.offsetHeight\n          const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft)\n\n          popup?.open({\n            right,\n            top\n          })\n        }}\n        >filter_alt</mwc-icon\n      >\n\n      ${!renderer\n        ? html``\n        : type !== 'select'\n        ? html` <ox-popup\n            ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n            ${renderer(column, value, this)}</ox-popup\n          >`\n        : filter!.operator === 'in'\n        ? html`<ox-popup-list\n            multiple\n            attr-selected=\"checked\"\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: !e.detail\n                      ? undefined\n                      : e.detail instanceof Array && e.detail.length === 0\n                      ? undefined\n                      : e.detail\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`\n        : html`<ox-popup-list\n            .value=${value}\n            with-search\n            @select=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    name,\n                    operator: filter!.operator,\n                    value: e.detail ? e.detail : undefined\n                  }\n                })\n              )}\n            ><div filter-title slot=\"header\">\n              <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n            </div>\n            ${renderer(column, value, this)}</ox-popup-list\n          >`}\n    `\n  }\n\n  _changeSort(column: ColumnConfig) {\n    if (!column.sortable) {\n      return\n    }\n\n    var sorters = [...this.sorters]\n\n    var idx = sorters.findIndex(sorter => sorter.name == column.name)\n    if (idx !== -1) {\n      let sorter = sorters[idx]\n      if (sorter.desc) {\n        sorters.splice(idx, 1)\n      } else {\n        sorter.desc = true\n      }\n    } else {\n      var sorter = {\n        name: column.name\n      }\n\n      sorters.push(sorter)\n    }\n\n    this.sorters = sorters\n\n    this.dispatchEvent(\n      new CustomEvent('fetch-params-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          sorters: this.sorters,\n          from: 'data-grid-header'\n        }\n      })\n    )\n  }\n\n  _accumalate(x: number) {\n    this._lastAccVal = (this._lastAccVal ?? 0) + x\n    return this._lastAccVal\n  }\n\n  _notifyWidthChange(idx: number, width: number) {\n    if (!this._throttledNotifier) {\n      this._throttledNotifier = throttle((idx: number, width: number) => {\n        this.dispatchEvent(\n          new CustomEvent('column-width-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              idx,\n              width\n            }\n          })\n        )\n\n        this._lastAccVal = 0\n      }, 100)\n    }\n\n    this._throttledNotifier(idx, width)\n  }\n\n  _mousedown(e: MouseEvent, idx: number) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    var mousemoveHandler = ((e: MouseEvent) => {\n      e.stopPropagation()\n      e.preventDefault()\n      let column = this.columns[idx]\n\n      let width = Math.max(0, Number(column.width || 100) + this._accumalate(e.movementX))\n      if (width == 0) {\n        /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n        return\n      }\n\n      this._notifyWidthChange(idx, width)\n    }).bind(this)\n\n    var mouseupHandler = ((e: MouseEvent) => {\n      document.removeEventListener('mousemove', mousemoveHandler)\n      document.removeEventListener('mouseup', mouseupHandler)\n\n      mousemoveHandler(e)\n    }).bind(this)\n\n    document.addEventListener('mousemove', mousemoveHandler)\n    document.addEventListener('mouseup', mouseupHandler)\n  }\n}\n"]}

package/dist/src/renderers/ox-grist-renderer-tree.d.ts

@@ -0,0 +1,8 @@
+import { PropertyValues } from 'lit';
+import { OxGristRenderer } from './ox-grist-renderer';
+export declare class OxGristRendererTree extends OxGristRenderer {
+    static styles: import("lit").CSSResult;
+    get rendererTemplate(): import("lit").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    onClickExpander(e: MouseEvent): void;
+}