@operato/data-grist 1.11.5 → 1.11.7

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 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)
+
+
+### :bug: Bug Fix
+
+* hide overflow as a default style for ox-grist-editor ([f25b4c5](https://github.com/hatiolab/operato/commit/f25b4c56b5d3e2a581f2ff4fa4a7339363fedb02))
+* hide overflow as a default style for ox-grist-editor ([1e73a42](https://github.com/hatiolab/operato/commit/1e73a42dab3fd08277362fb0ce1f81cdec5f3b2a))
+
+
+
 ### [1.11.5](https://github.com/hatiolab/operato/compare/v1.11.4...v1.11.5) (2023-12-14)
 
 **Note:** Version bump only for package @operato/data-grist

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-field.js

@@ -4,7 +4,6 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TooltipStyles } from '@operato/styles';
 import { ZERO_COLUMN } from '../configure/zero-config';
-import { getRenderer } from '../renderers';
 const DEFAULT_TEXT_ALIGN = 'left';
 let DataGridField = class DataGridField extends LitElement {
     constructor() {
@@ -27,13 +26,11 @@ let DataGridField = class DataGridField extends LitElement {
         }
         var { value, column, record, rowIndex } = this;
         var { renderer, editor } = column.record;
-        var rendered = this.editing
+        return html `
+      ${this.editing
             ? editor === null || editor === void 0 ? void 0 : editor.call(this, value, column, record, rowIndex, this)
-            : renderer === null || renderer === void 0 ? void 0 : renderer.call(this, value, column, record, rowIndex, this);
-        if (typeof rendered == 'string') {
-            rendered = getRenderer('string')(rendered, column, record, rowIndex, this);
-        }
-        return rendered;
+            : renderer === null || renderer === void 0 ? void 0 : renderer.call(this, value, column, record, rowIndex, this)}
+    `;
     }
     updated(changes) {
         var _a;

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

@@ -1 +1 @@
-{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-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'\nimport { getRenderer } from '../renderers'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField 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-record-background-color);\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([editing]) {\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      :host([focused]) {\n        --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n      }\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\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 = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean }) editing = false\n  @property({ type: Object }) value = {}\n  @property({ type: String }) valueWithEdit: string | null = null\n  @property({ attribute: false }) emphasized: any = false\n  @property({ type: String }) fixed?: string\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    var rendered = this.editing\n      ? editor?.call(this, value, column, record, rowIndex, this)\n      : renderer?.call(this, value, column, record, rowIndex, this)\n\n    if (typeof rendered == 'string') {\n      rendered = getRenderer('string')(rendered, column, record, rowIndex, this)\n    }\n\n    return rendered as TemplateResult\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.editing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.key === 'Esc' || e.key === 'Escape') {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\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    if (changes.has('fixed')) {\n      if (this.fixed) {\n        this.style.left = this.fixed + 'px'\n      }\n    }\n\n    const emphasized =\n      this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-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'\nimport { getRenderer } from '../renderers'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField 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-record-background-color);\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([editing]) {\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      :host([focused]) {\n        --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n      }\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\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 = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean }) editing = false\n  @property({ type: Object }) value = {}\n  @property({ type: String }) valueWithEdit: string | null = null\n  @property({ attribute: false }) emphasized: any = false\n  @property({ type: String }) fixed?: string\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    return html`\n      ${this.editing\n        ? editor?.call(this, value, column, record, rowIndex, this)\n        : renderer?.call(this, value, column, record, rowIndex, this)}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.editing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.key === 'Esc' || e.key === 'Escape') {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\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    if (changes.has('fixed')) {\n      if (this.fixed) {\n        this.style.left = this.fixed + 'px'\n      }\n    }\n\n    const emphasized =\n      this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\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);