@operato/data-grist 10.22.0 → 10.27.1

package/dist/src/personalizer/ox-grist-filter-personalizer.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { OxPopupList } from '@operato/popup';
+import { PERSONALIZER_POPUP_STYLES, personalizerFooter, personalizerHandle, personalizerHeader } from './personalizer-chrome.js';
 let OxGristFilterPersonalizer = class OxGristFilterPersonalizer extends LitElement {
     constructor() {
         super(...arguments);
@@ -36,40 +37,27 @@ let OxGristFilterPersonalizer = class OxGristFilterPersonalizer extends LitEleme
                     };
                 }) || []).filter(Boolean)
             };
-            const template = html `
-            <div class="personalizer-header" slot="header">
-              <md-icon
-                style="margin-left: auto;"
-                @click=${async (e) => {
+            const save = async () => {
                 if (form.personalConfigProvider) {
                     form.personalConfig = await form.personalConfigProvider.save(this.preference);
                 }
                 popup.close();
-            }}
-                title=${String(i18next.t('button.save'))}
-                >keep</md-icon
-              ><md-icon
-                @click=${async (e) => {
+            };
+            const reset = async () => {
                 if (form.personalConfigProvider) {
                     form.personalConfig = this.preference = {};
                     await form.personalConfigProvider.reset();
                 }
                 popup.close();
-            }}
-                title=${String(i18next.t('button.delete'))}
-                >keep_off</md-icon
-              ><md-icon @click=${async (e) => popup.close()} title=${String(i18next.t('button.close'))}
-                >close</md-icon
-              >
-            </div>
-
+            };
+            const template = html `
+            ${personalizerHeader(i18next.t('label.filters', { defaultValue: 'Filters' }), i18next.t('text.tick to show drag to reorder', { defaultValue: 'Tick to show, drag to reorder' }), () => popup.close())}
             ${(_a = this.preference) === null || _a === void 0 ? void 0 : _a.filters.map(filter => html `
                 <ox-checkbox label="checkbox" ?checked=${!filter.hidden} value=${filter.name} option
-                  >${filter.name}<span style="position: absolute; right: 10px; cursor: row-resize;opacity:.5" handle
-                    >☰</span
-                  ></ox-checkbox
+                  >${filter.name}${personalizerHandle()}</ox-checkbox
                 >
               `)}
+            ${personalizerFooter(reset, save)}
           `;
             const popup = OxPopupList.open({
                 template,
@@ -79,29 +67,7 @@ let OxGristFilterPersonalizer = class OxGristFilterPersonalizer extends LitEleme
                 attrSelected: 'checked',
                 top: e.pageY,
                 left: e.pageX,
-                styles: css `
-              :host {
-                width: 240px;
-                min-height: 300px;
-                max-height: 80%;
-                overflow: auto;
-              }
-
-              ::slotted(.personalizer-header) {
-                --md-icon-size: 1.4em;
-
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                text-transform: capitalize;
-                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-              }
-
-              ::slotted([option]) {
-                position: relative;
-                user-select: none;
-              }
-            `
+                styles: PERSONALIZER_POPUP_STYLES
             });
             popup.onselect = (e) => {
                 var _a;

package/dist/src/personalizer/ox-grist-filter-personalizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-filter-personalizer.js","sourceRoot":"","sources":["../../../src/personalizer/ox-grist-filter-personalizer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/outlined-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { OxPopupList } from '@operato/popup'\n\nimport { FilterConfigObject, FilterPreference, PersonalGristPreference } from '../types.js'\n\nimport { OxFiltersForm } from '../filters/filters-form.js'\n\n@customElement('ox-grist-filter-personalizer')\nexport class OxGristFilterPersonalizer extends LitElement {\n  static styles = [\n    css`\n      md-icon {\n        --md-icon-size: 16px;\n        width: 36px;\n        height: 36px;\n        color: var(--md-sys-color-secondary-container);\n        cursor: pointer;\n\n        display: flex;\n        place-content: center;\n        place-items: center;\n        position: relative;\n\n        &:hover {\n          color: var(--md-sys-color-primary-container);\n        }\n      }\n\n      md-ripple {\n        border-radius: 50%;\n        inset: unset;\n        height: 36px;\n        width: 36px;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: true }) debug: boolean = false\n\n  @state() private preference?: PersonalGristPreference\n\n  render() {\n    return html`\n      <md-icon\n        @click=${async (e: MouseEvent) => {\n          const form = this.closest('ox-filters-form') as OxFiltersForm\n          const { filterColumns, personalFilters = [] } = form\n          const queryFilters = await form.getQueryFilters()\n\n          this.preference = {\n            filters: (\n              personalFilters.map((filter: FilterPreference) => {\n                const originFilterColumn =\n                  filter.name == 'search'\n                    ? { filter: { name: 'search' } }\n                    : filterColumns.find(f => f.name == filter.name)\n\n                if (!originFilterColumn) {\n                  /* 원래 filters 설정에 있는 것들 만을 유지한다. */\n                  return\n                }\n\n                const { value } = originFilterColumn.filter! as FilterConfigObject\n\n                return {\n                  name: filter.name,\n                  hidden: filter.hidden,\n                  /* 만약, filters에 기본값이 이미 설정되어 있다면, 그대로 유지한다. */\n                  value: value ?? queryFilters.find(f => f.name == filter.name)?.value\n                }\n              }) || []\n            ).filter(Boolean) as FilterPreference[]\n          }\n\n          const template = html`\n            <div class=\"personalizer-header\" slot=\"header\">\n              <md-icon\n                style=\"margin-left: auto;\"\n                @click=${async (e: MouseEvent) => {\n                  if (form.personalConfigProvider) {\n                    form.personalConfig = await form.personalConfigProvider.save(this.preference)\n                  }\n                  popup.close()\n                }}\n                title=${String(i18next.t('button.save'))}\n                >keep</md-icon\n              ><md-icon\n                @click=${async (e: MouseEvent) => {\n                  if (form.personalConfigProvider) {\n                    form.personalConfig = this.preference = {}\n                    await form.personalConfigProvider.reset()\n                  }\n                  popup.close()\n                }}\n                title=${String(i18next.t('button.delete'))}\n                >keep_off</md-icon\n              ><md-icon @click=${async (e: MouseEvent) => popup.close()} title=${String(i18next.t('button.close'))}\n                >close</md-icon\n              >\n            </div>\n\n            ${this.preference?.filters!.map(\n              filter => html`\n                <ox-checkbox label=\"checkbox\" ?checked=${!filter.hidden} value=${filter.name} option\n                  >${filter.name}<span style=\"position: absolute; right: 10px; cursor: row-resize;opacity:.5\" handle\n                    >☰</span\n                  ></ox-checkbox\n                >\n              `\n            )}\n          `\n\n          const popup = OxPopupList.open({\n            template,\n            multiple: true,\n            sortable: true,\n            debug: this.debug,\n            attrSelected: 'checked',\n            top: e.pageY,\n            left: e.pageX,\n            styles: css`\n              :host {\n                width: 240px;\n                min-height: 300px;\n                max-height: 80%;\n                overflow: auto;\n              }\n\n              ::slotted(.personalizer-header) {\n                --md-icon-size: 1.4em;\n\n                display: flex;\n                flex-direction: row;\n                align-items: center;\n                text-transform: capitalize;\n                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);\n              }\n\n              ::slotted([option]) {\n                position: relative;\n                user-select: none;\n              }\n            `\n          })\n\n          popup.onselect = (e: Event) => {\n            const selected = (e as CustomEvent).detail\n\n            const pconfig: PersonalGristPreference = { ...form.personalConfig }\n            const pfilters = this.preference?.filters!\n\n            pconfig.filters = pfilters.map(filter => {\n              return {\n                name: filter.name,\n                hidden: selected.indexOf(filter.name) == -1,\n                value: filter.value\n              }\n            })\n\n            form.personalConfig = this.preference = pconfig\n\n            form.applyUpdatedConfiguration()\n          }\n\n          popup.addEventListener('sorted', (e: Event) => {\n            const sorted = (e as CustomEvent).detail as HTMLElement[]\n\n            const pconfig: PersonalGristPreference = { ...form.personalConfig }\n            const pfilters = this.preference?.filters!\n\n            pconfig.filters = sorted\n              .map(element => {\n                const name = (element as HTMLInputElement).value\n                return pfilters.find(filter => filter.name == name)!\n              })\n              .filter(Boolean)\n\n            form.personalConfig = this.preference = pconfig\n\n            form.applyUpdatedConfiguration()\n          })\n        }}\n        >settings<md-ripple></md-ripple\n      ></md-icon>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-grist-filter-personalizer.js","sourceRoot":"","sources":["../../../src/personalizer/ox-grist-filter-personalizer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { OxPopupList } from '@operato/popup'\n\nimport { FilterConfigObject, FilterPreference, PersonalGristPreference } from '../types.js'\n\nimport { OxFiltersForm } from '../filters/filters-form.js'\nimport { PERSONALIZER_POPUP_STYLES, personalizerFooter, personalizerHandle, personalizerHeader } from './personalizer-chrome.js'\n\n@customElement('ox-grist-filter-personalizer')\nexport class OxGristFilterPersonalizer extends LitElement {\n  static styles = [\n    css`\n      md-icon {\n        --md-icon-size: 16px;\n        width: 36px;\n        height: 36px;\n        color: var(--md-sys-color-secondary-container);\n        cursor: pointer;\n\n        display: flex;\n        place-content: center;\n        place-items: center;\n        position: relative;\n\n        &:hover {\n          color: var(--md-sys-color-primary-container);\n        }\n      }\n\n      md-ripple {\n        border-radius: 50%;\n        inset: unset;\n        height: 36px;\n        width: 36px;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: true }) debug: boolean = false\n\n  @state() private preference?: PersonalGristPreference\n\n  render() {\n    return html`\n      <md-icon\n        @click=${async (e: MouseEvent) => {\n          const form = this.closest('ox-filters-form') as OxFiltersForm\n          const { filterColumns, personalFilters = [] } = form\n          const queryFilters = await form.getQueryFilters()\n\n          this.preference = {\n            filters: (\n              personalFilters.map((filter: FilterPreference) => {\n                const originFilterColumn =\n                  filter.name == 'search'\n                    ? { filter: { name: 'search' } }\n                    : filterColumns.find(f => f.name == filter.name)\n\n                if (!originFilterColumn) {\n                  /* 원래 filters 설정에 있는 것들 만을 유지한다. */\n                  return\n                }\n\n                const { value } = originFilterColumn.filter! as FilterConfigObject\n\n                return {\n                  name: filter.name,\n                  hidden: filter.hidden,\n                  /* 만약, filters에 기본값이 이미 설정되어 있다면, 그대로 유지한다. */\n                  value: value ?? queryFilters.find(f => f.name == filter.name)?.value\n                }\n              }) || []\n            ).filter(Boolean) as FilterPreference[]\n          }\n\n          const save = async () => {\n            if (form.personalConfigProvider) {\n              form.personalConfig = await form.personalConfigProvider.save(this.preference)\n            }\n            popup.close()\n          }\n\n          const reset = async () => {\n            if (form.personalConfigProvider) {\n              form.personalConfig = this.preference = {}\n              await form.personalConfigProvider.reset()\n            }\n            popup.close()\n          }\n\n          const template = html`\n            ${personalizerHeader(\n              i18next.t('label.filters', { defaultValue: 'Filters' }),\n              i18next.t('text.tick to show drag to reorder', { defaultValue: 'Tick to show, drag to reorder' }),\n              () => popup.close()\n            )}\n            ${this.preference?.filters!.map(\n              filter => html`\n                <ox-checkbox label=\"checkbox\" ?checked=${!filter.hidden} value=${filter.name} option\n                  >${filter.name}${personalizerHandle()}</ox-checkbox\n                >\n              `\n            )}\n            ${personalizerFooter(reset, save)}\n          `\n\n          const popup = OxPopupList.open({\n            template,\n            multiple: true,\n            sortable: true,\n            debug: this.debug,\n            attrSelected: 'checked',\n            top: e.pageY,\n            left: e.pageX,\n            styles: PERSONALIZER_POPUP_STYLES\n          })\n\n          popup.onselect = (e: Event) => {\n            const selected = (e as CustomEvent).detail\n\n            const pconfig: PersonalGristPreference = { ...form.personalConfig }\n            const pfilters = this.preference?.filters!\n\n            pconfig.filters = pfilters.map(filter => {\n              return {\n                name: filter.name,\n                hidden: selected.indexOf(filter.name) == -1,\n                value: filter.value\n              }\n            })\n\n            form.personalConfig = this.preference = pconfig\n\n            form.applyUpdatedConfiguration()\n          }\n\n          popup.addEventListener('sorted', (e: Event) => {\n            const sorted = (e as CustomEvent).detail as HTMLElement[]\n\n            const pconfig: PersonalGristPreference = { ...form.personalConfig }\n            const pfilters = this.preference?.filters!\n\n            pconfig.filters = sorted\n              .map(element => {\n                const name = (element as HTMLInputElement).value\n                return pfilters.find(filter => filter.name == name)!\n              })\n              .filter(Boolean)\n\n            form.personalConfig = this.preference = pconfig\n\n            form.applyUpdatedConfiguration()\n          })\n        }}\n        >settings<md-ripple></md-ripple\n      ></md-icon>\n    `\n  }\n}\n"]}

package/dist/src/personalizer/ox-grist-personalizer.d.ts

@@ -1,4 +1,4 @@
-import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 export declare class OxGristPersonalizer extends LitElement {
     static styles: import("lit").CSSResult[];

package/dist/src/personalizer/ox-grist-personalizer.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { OxPopupList } from '@operato/popup';
+import { PERSONALIZER_POPUP_STYLES, personalizerFooter, personalizerHandle, personalizerHeader } from './personalizer-chrome.js';
 let OxGristPersonalizer = class OxGristPersonalizer extends LitElement {
     constructor() {
         super(...arguments);
@@ -37,21 +38,7 @@ let OxGristPersonalizer = class OxGristPersonalizer extends LitElement {
                 },
                 mode
             };
-            const template = html `
-            <div class="personalizer-header" slot="header">
-              <div
-                style=${`
-                  display: flex;
-                  align-items: center;
-                  margin: 0 0 0 auto;
-                  min-height: 1.4em;
-                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
-                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
-                  border-radius: var(--md-sys-shape-corner-small);
-                  padding: 0 var(--spacing-small);
-                  cursor: pointer;
-                `}
-                @click=${async (e) => {
+            const save = async () => {
                 if (grist.personalConfigProvider) {
                     const { mode, columns, sorters, pagination } = this.preference || {};
                     grist.personalConfig = this.preference = await grist.personalConfigProvider.save({
@@ -62,53 +49,22 @@ let OxGristPersonalizer = class OxGristPersonalizer extends LitElement {
                     });
                 }
                 popup.close();
-            }}
-              >
-                ${String(i18next.t('button.save'))}
-              </div>
-              <div
-                style=${`
-                  display: flex;
-                  align-items: center;
-                  margin: 0 0 0 var(--spacing-small, 4px);
-                  min-height: 1.4em;
-                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
-                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
-                  border-radius: var(--md-sys-shape-corner-small);
-                  padding: 0 var(--spacing-small);
-                  cursor: pointer;
-                `}
-                @click=${async (e) => {
+            };
+            const reset = async () => {
                 if (grist.personalConfigProvider) {
                     grist.personalConfig = this.preference = {};
                     await grist.personalConfigProvider.reset();
                 }
                 popup.close();
-            }}
-              >
-                ${String(i18next.t('button.delete'))}
-              </div>
-              <md-icon
-                style=${`
-                  --md-icon-size: 1.2em;
-                  margin-left: var(--spacing-tiny, 2px);
-                  cursor: pointer;
-                `}
-                @click=${async (e) => popup.close()}
-                title=${String(i18next.t('button.close'))}
-                >close</md-icon
-              >
-            </div>
-
+            };
+            const template = html `
+            ${personalizerHeader(i18next.t('label.columns', { defaultValue: 'Columns' }), i18next.t('text.tick to show drag to reorder', { defaultValue: 'Tick to show, drag to reorder' }), () => popup.close())}
             ${columns.map(column => html `
                 <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option
-                  >${column.header.renderer(column)}<span
-                    style="position: absolute; right: 10px; cursor: row-resize;opacity:.5"
-                    handle
-                    >☰</span
-                  ></ox-checkbox
+                  >${column.header.renderer(column)}${personalizerHandle()}</ox-checkbox
                 >
               `)}
+            ${personalizerFooter(reset, save)}
           `;
             const popup = OxPopupList.open({
                 template,
@@ -118,29 +74,7 @@ let OxGristPersonalizer = class OxGristPersonalizer extends LitElement {
                 attrSelected: 'checked',
                 top: e.pageY,
                 left: e.pageX,
-                styles: css `
-              :host {
-                width: 240px;
-                min-height: 300px;
-                max-height: 80%;
-                overflow: auto;
-              }
-
-              ::slotted(.personalizer-header) {
-                --md-icon-size: 1.4em;
-
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                text-transform: capitalize;
-                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-              }
-
-              ::slotted([option]) {
-                position: relative;
-                user-select: none;
-              }
-            `
+                styles: PERSONALIZER_POPUP_STYLES
             });
             popup.onselect = (e) => {
                 var _a;
@@ -182,19 +116,22 @@ let OxGristPersonalizer = class OxGristPersonalizer extends LitElement {
 };
 OxGristPersonalizer.styles = [
     css `
+      /* The door to the list: a quiet glyph at the end of the header row. */
       md-icon {
-        --md-icon-size: 14px;
-        width: 16px;
-        height: 16px;
-        color: var(--ox-grist-p13n-color, var(--md-sys-color-on-primary));
-        background-color: var(--ox-grist-p13n-background-color, var(--md-sys-color-primary));
-        border-radius: 0px 0px 7px 7px;
+        --md-icon-size: 16px;
+        width: 22px;
+        height: 22px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        color: var(--ox-grist-p13n-color, var(--md-sys-color-on-surface-variant));
+        background-color: var(--ox-grist-p13n-background-color, transparent);
         cursor: pointer;
-        padding-top: var(--spacing-small);
 
         &:hover {
-          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-on-primary));
-          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-surface-tint));
+          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-on-surface));
+          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-surface-container-high));
         }
       }
     `

package/dist/src/personalizer/ox-grist-personalizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-personalizer.js","sourceRoot":"","sources":["../../../src/personalizer/ox-grist-personalizer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/outlined-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { OxPopupList } from '@operato/popup'\nimport { OxCheckbox } from '@operato/input'\n\nimport { ColumnConfig, PersonalGristPreference } from '../types.js'\nimport { DataGrist } from '../data-grist.js'\n\n@customElement('ox-grist-personalizer')\nexport class OxGristPersonalizer extends LitElement {\n  static styles = [\n    css`\n      md-icon {\n        --md-icon-size: 14px;\n        width: 16px;\n        height: 16px;\n        color: var(--ox-grist-p13n-color, var(--md-sys-color-on-primary));\n        background-color: var(--ox-grist-p13n-background-color, var(--md-sys-color-primary));\n        border-radius: 0px 0px 7px 7px;\n        cursor: pointer;\n        padding-top: var(--spacing-small);\n\n        &:hover {\n          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-on-primary));\n          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-surface-tint));\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: true }) debug: boolean = false\n\n  @state() private preference?: PersonalGristPreference\n\n  render() {\n    return html`\n      <md-icon\n        @click=${(e: MouseEvent) => {\n          const grist = this.closest('ox-grist') as DataGrist\n\n          const { config, compiledConfig, sorters, pagination, mode } = grist\n          const { columns: compiledColumns } = compiledConfig\n\n          const columns = compiledColumns\n            .filter(ccolumn => {\n              const column = config.columns.find((column: Partial<ColumnConfig>) => column.name == ccolumn.name)\n              return column && column.name && column.type !== 'gutter' && !column.hidden && !column.unusable\n            })\n            .map(column => compiledColumns.find(compiledColumn => compiledColumn.name == column.name)!)\n\n          this.preference = {\n            columns: columns.map(column => {\n              return {\n                name: column.name,\n                hidden: column.hidden,\n                width: column.width\n              }\n            }),\n            sorters,\n            pagination: {\n              ...pagination,\n              limit: grist.getCurrentLimit()\n            },\n            mode\n          }\n\n          const template = html`\n            <div class=\"personalizer-header\" slot=\"header\">\n              <div\n                style=${`\n                  display: flex;\n                  align-items: center;\n                  margin: 0 0 0 auto;\n                  min-height: 1.4em;\n                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));\n                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));\n                  border-radius: var(--md-sys-shape-corner-small);\n                  padding: 0 var(--spacing-small);\n                  cursor: pointer;\n                `}\n                @click=${async (e: MouseEvent) => {\n                  if (grist.personalConfigProvider) {\n                    const { mode, columns, sorters, pagination } = this.preference || {}\n                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save({\n                      mode,\n                      columns,\n                      sorters,\n                      pagination\n                    })\n                  }\n                  popup.close()\n                }}\n              >\n                ${String(i18next.t('button.save'))}\n              </div>\n              <div\n                style=${`\n                  display: flex;\n                  align-items: center;\n                  margin: 0 0 0 var(--spacing-small, 4px);\n                  min-height: 1.4em;\n                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));\n                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));\n                  border-radius: var(--md-sys-shape-corner-small);\n                  padding: 0 var(--spacing-small);\n                  cursor: pointer;\n                `}\n                @click=${async (e: MouseEvent) => {\n                  if (grist.personalConfigProvider) {\n                    grist.personalConfig = this.preference = {}\n                    await grist.personalConfigProvider.reset()\n                  }\n                  popup.close()\n                }}\n              >\n                ${String(i18next.t('button.delete'))}\n              </div>\n              <md-icon\n                style=${`\n                  --md-icon-size: 1.2em;\n                  margin-left: var(--spacing-tiny, 2px);\n                  cursor: pointer;\n                `}\n                @click=${async (e: MouseEvent) => popup.close()}\n                title=${String(i18next.t('button.close'))}\n                >close</md-icon\n              >\n            </div>\n\n            ${columns.map(\n              column => html`\n                <ox-checkbox label=\"checkbox\" ?checked=${!column.hidden} value=${column.name} option\n                  >${column.header.renderer(column)}<span\n                    style=\"position: absolute; right: 10px; cursor: row-resize;opacity:.5\"\n                    handle\n                    >☰</span\n                  ></ox-checkbox\n                >\n              `\n            )}\n          `\n\n          const popup = OxPopupList.open({\n            template,\n            multiple: true,\n            sortable: true,\n            debug: this.debug,\n            attrSelected: 'checked',\n            top: e.pageY,\n            left: e.pageX,\n            styles: css`\n              :host {\n                width: 240px;\n                min-height: 300px;\n                max-height: 80%;\n                overflow: auto;\n              }\n\n              ::slotted(.personalizer-header) {\n                --md-icon-size: 1.4em;\n\n                display: flex;\n                flex-direction: row;\n                align-items: center;\n                text-transform: capitalize;\n                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);\n              }\n\n              ::slotted([option]) {\n                position: relative;\n                user-select: none;\n              }\n            `\n          })\n\n          popup.onselect = (e: Event) => {\n            const selected = (e as CustomEvent).detail\n\n            const pconfig: PersonalGristPreference = grist.personalConfig || {}\n            const pcolumns = this.preference?.columns || columns\n\n            pconfig.columns = pcolumns.map(column => {\n              return {\n                name: column.name,\n                hidden: selected.indexOf(column.name) == -1,\n                width: column.width\n              }\n            })\n\n            this.preference = pconfig\n\n            grist.personalConfig = this.preference\n\n            grist.applyUpdatedConfiguration()\n          }\n\n          popup.addEventListener('sorted', (e: Event) => {\n            const sorted = (e as CustomEvent).detail as HTMLElement[]\n\n            const pconfig: PersonalGristPreference = grist.personalConfig || {}\n\n            pconfig.columns = sorted.map(element => {\n              const name = (element as OxCheckbox).value\n              return {\n                name,\n                hidden: !element.hasAttribute('checked'),\n                width: columns.find(column => column.name == name)?.width\n              }\n            })\n\n            this.preference = pconfig\n\n            grist.personalConfig = this.preference\n\n            grist.applyUpdatedConfiguration()\n          })\n        }}\n        >settings</md-icon\n      >\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-grist-personalizer.js","sourceRoot":"","sources":["../../../src/personalizer/ox-grist-personalizer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { OxPopupList } from '@operato/popup'\nimport { OxCheckbox } from '@operato/input'\n\nimport { ColumnConfig, PersonalGristPreference } from '../types.js'\nimport { DataGrist } from '../data-grist.js'\nimport { PERSONALIZER_POPUP_STYLES, personalizerFooter, personalizerHandle, personalizerHeader } from './personalizer-chrome.js'\n\n@customElement('ox-grist-personalizer')\nexport class OxGristPersonalizer extends LitElement {\n  static styles = [\n    css`\n      /* The door to the list: a quiet glyph at the end of the header row. */\n      md-icon {\n        --md-icon-size: 16px;\n        width: 22px;\n        height: 22px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 6px;\n        color: var(--ox-grist-p13n-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--ox-grist-p13n-background-color, transparent);\n        cursor: pointer;\n\n        &:hover {\n          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-on-surface));\n          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-surface-container-high));\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: true }) debug: boolean = false\n\n  @state() private preference?: PersonalGristPreference\n\n  render() {\n    return html`\n      <md-icon\n        @click=${(e: MouseEvent) => {\n          const grist = this.closest('ox-grist') as DataGrist\n\n          const { config, compiledConfig, sorters, pagination, mode } = grist\n          const { columns: compiledColumns } = compiledConfig\n\n          const columns = compiledColumns\n            .filter(ccolumn => {\n              const column = config.columns.find((column: Partial<ColumnConfig>) => column.name == ccolumn.name)\n              return column && column.name && column.type !== 'gutter' && !column.hidden && !column.unusable\n            })\n            .map(column => compiledColumns.find(compiledColumn => compiledColumn.name == column.name)!)\n\n          this.preference = {\n            columns: columns.map(column => {\n              return {\n                name: column.name,\n                hidden: column.hidden,\n                width: column.width\n              }\n            }),\n            sorters,\n            pagination: {\n              ...pagination,\n              limit: grist.getCurrentLimit()\n            },\n            mode\n          }\n\n          const save = async () => {\n            if (grist.personalConfigProvider) {\n              const { mode, columns, sorters, pagination } = this.preference || {}\n              grist.personalConfig = this.preference = await grist.personalConfigProvider.save({\n                mode,\n                columns,\n                sorters,\n                pagination\n              })\n            }\n            popup.close()\n          }\n\n          const reset = async () => {\n            if (grist.personalConfigProvider) {\n              grist.personalConfig = this.preference = {}\n              await grist.personalConfigProvider.reset()\n            }\n            popup.close()\n          }\n\n          const template = html`\n            ${personalizerHeader(\n              i18next.t('label.columns', { defaultValue: 'Columns' }),\n              i18next.t('text.tick to show drag to reorder', { defaultValue: 'Tick to show, drag to reorder' }),\n              () => popup.close()\n            )}\n            ${columns.map(\n              column => html`\n                <ox-checkbox label=\"checkbox\" ?checked=${!column.hidden} value=${column.name} option\n                  >${column.header.renderer(column)}${personalizerHandle()}</ox-checkbox\n                >\n              `\n            )}\n            ${personalizerFooter(reset, save)}\n          `\n\n          const popup = OxPopupList.open({\n            template,\n            multiple: true,\n            sortable: true,\n            debug: this.debug,\n            attrSelected: 'checked',\n            top: e.pageY,\n            left: e.pageX,\n            styles: PERSONALIZER_POPUP_STYLES\n          })\n\n          popup.onselect = (e: Event) => {\n            const selected = (e as CustomEvent).detail\n\n            const pconfig: PersonalGristPreference = grist.personalConfig || {}\n            const pcolumns = this.preference?.columns || columns\n\n            pconfig.columns = pcolumns.map(column => {\n              return {\n                name: column.name,\n                hidden: selected.indexOf(column.name) == -1,\n                width: column.width\n              }\n            })\n\n            this.preference = pconfig\n\n            grist.personalConfig = this.preference\n\n            grist.applyUpdatedConfiguration()\n          }\n\n          popup.addEventListener('sorted', (e: Event) => {\n            const sorted = (e as CustomEvent).detail as HTMLElement[]\n\n            const pconfig: PersonalGristPreference = grist.personalConfig || {}\n\n            pconfig.columns = sorted.map(element => {\n              const name = (element as OxCheckbox).value\n              return {\n                name,\n                hidden: !element.hasAttribute('checked'),\n                width: columns.find(column => column.name == name)?.width\n              }\n            })\n\n            this.preference = pconfig\n\n            grist.personalConfig = this.preference\n\n            grist.applyUpdatedConfiguration()\n          })\n        }}\n        >settings</md-icon\n      >\n    `\n  }\n}\n"]}

package/dist/src/personalizer/personalizer-chrome.d.ts

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+export declare const PERSONALIZER_POPUP_STYLES: import("lit").CSSResult;
+export declare function personalizerHeader(title: string, hint: string, onClose: () => void): TemplateResult;
+export declare function personalizerHandle(): TemplateResult;
+export declare function personalizerFooter(onReset: () => void, onSave: () => void): TemplateResult;

package/dist/src/personalizer/personalizer-chrome.js

@@ -0,0 +1,165 @@
+import { css, html } from 'lit';
+import { i18next } from '@operato/i18n';
+/*
+ * The shell both personalizers share: what the list is for at the top, the rows in the middle,
+ * and the two things a person can do with the result at the foot.
+ *
+ * The rows are light-DOM children of the popup, so the popup's own stylesheet reaches only their
+ * outer box (::slotted). The parts inside a row and the chrome around it are styled by the small
+ * sheet below, carried inside the template under one class so it touches nothing else.
+ */
+export const PERSONALIZER_POPUP_STYLES = css `
+  :host {
+    width: 280px;
+    min-height: 0;
+    max-height: min(80vh, 560px);
+    padding: 0;
+    overflow: auto;
+    border-radius: 12px;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+  }
+
+  ::slotted([option]) {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 5px 36px 5px 14px;
+    border: 0;
+    border-left: 0;
+    font-size: 0.8rem;
+    /* A list of a dozen ticks wants a small mark; the row, not the box, is the target. */
+    --ox-checkbox-size: 12px;
+    --ox-checkbox-border-radius: 3px;
+    --input-intra-gap: 9px;
+    color: var(--md-sys-color-on-surface);
+    user-select: none;
+  }
+
+  ::slotted([option]:hover) {
+    background-color: var(--md-sys-color-surface-container-high);
+    color: var(--md-sys-color-on-surface);
+  }
+
+  ::slotted(.ox-p13n-header),
+  ::slotted(.ox-p13n-footer) {
+    padding: 0;
+    border: 0;
+    cursor: default;
+  }
+`;
+const SHEET = html `
+  <style>
+    .ox-p13n-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 14px 10px 8px 16px;
+      background: inherit;
+    }
+    .ox-p13n-header .ox-p13n-title {
+      flex: 1;
+      min-width: 0;
+      line-height: 1.3;
+    }
+    .ox-p13n-header b {
+      display: block;
+      font-size: 0.86rem;
+      font-weight: 600;
+      color: var(--md-sys-color-on-surface);
+    }
+    /* Translations arrive in whatever case the catalogue keeps; a title starts with a capital. */
+    .ox-p13n-header b::first-letter,
+    .ox-p13n-header small::first-letter {
+      text-transform: uppercase;
+    }
+    .ox-p13n-header small {
+      display: block;
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    .ox-p13n-header md-icon {
+      --md-icon-size: 18px;
+      flex: none;
+      padding: 4px;
+      border-radius: 8px;
+      color: var(--md-sys-color-outline);
+      cursor: pointer;
+    }
+    .ox-p13n-header md-icon:hover {
+      color: var(--md-sys-color-on-surface);
+      background: var(--md-sys-color-surface-container-high);
+    }
+    /* The row is a checkbox whose slot is inline, so the handle is pinned to the row's right edge. */
+    .ox-p13n-handle {
+      --md-icon-size: 18px;
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--md-sys-color-outline-variant);
+      cursor: grab;
+    }
+    [option]:hover .ox-p13n-handle {
+      color: var(--md-sys-color-outline);
+    }
+    .ox-p13n-footer {
+      position: sticky;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 6px;
+      padding: 10px 12px 12px;
+      border-top: 1px solid var(--md-sys-color-outline-variant);
+      background: var(--ox-popup-list-background-color, var(--md-sys-color-surface-container-lowest));
+    }
+    .ox-p13n-footer button {
+      height: 28px;
+      padding: 0 12px;
+      border: 0;
+      border-radius: 999px;
+      background: transparent;
+      color: var(--md-sys-color-on-surface-variant);
+      font: inherit;
+      font-size: 0.78rem;
+      font-weight: 500;
+      cursor: pointer;
+    }
+    .ox-p13n-footer button:hover {
+      color: var(--md-sys-color-on-surface);
+      background: var(--md-sys-color-surface-container-high);
+    }
+    .ox-p13n-footer button[primary] {
+      padding: 0 16px;
+      color: var(--md-sys-color-on-primary);
+      background: var(--md-sys-color-primary);
+    }
+    .ox-p13n-footer button[primary]:hover {
+      color: var(--md-sys-color-on-primary);
+      background: var(--md-sys-color-primary);
+      filter: brightness(1.08);
+    }
+  </style>
+`;
+export function personalizerHeader(title, hint, onClose) {
+    return html `
+    ${SHEET}
+    <div class="ox-p13n-header" slot="header">
+      <div class="ox-p13n-title"><b>${title}</b><small>${hint}</small></div>
+      <md-icon @click=${onClose} title=${i18next.t('button.close', { defaultValue: 'Close' })}>close</md-icon>
+    </div>
+  `;
+}
+export function personalizerHandle() {
+    return html `<md-icon class="ox-p13n-handle" handle>drag_indicator</md-icon>`;
+}
+/* The list edits the screen as you go; the foot decides whether that outlives this visit. */
+export function personalizerFooter(onReset, onSave) {
+    return html `
+    <div class="ox-p13n-footer">
+      <button @click=${onReset}>${i18next.t('button.reset to default', { defaultValue: 'Reset to default' })}</button>
+      <button primary @click=${onSave}>${i18next.t('button.save as mine', { defaultValue: 'Save as mine' })}</button>
+    </div>
+  `;
+}
+//# sourceMappingURL=personalizer-chrome.js.map

package/dist/src/personalizer/personalizer-chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"personalizer-chrome.js","sourceRoot":"","sources":["../../../src/personalizer/personalizer-chrome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC3C,CAAA;AAED,MAAM,KAAK,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FjB,CAAA;AAED,MAAM,UAAU,kBAAkB,CAAC,KAAa,EAAE,IAAY,EAAE,OAAmB;IACjF,OAAO,IAAI,CAAA;MACP,KAAK;;sCAE2B,KAAK,cAAc,IAAI;wBACrC,OAAO,UAAU,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;;GAE1F,CAAA;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAA,iEAAiE,CAAA;AAC9E,CAAC;AAED,6FAA6F;AAC7F,MAAM,UAAU,kBAAkB,CAAC,OAAmB,EAAE,MAAkB;IACxE,OAAO,IAAI,CAAA;;uBAEU,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,yBAAyB,EAAE,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAC;+BAC7E,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;;GAExG,CAAA;AACH,CAAC","sourcesContent":["import { css, html, TemplateResult } from 'lit'\n\nimport { i18next } from '@operato/i18n'\n\n/*\n * The shell both personalizers share: what the list is for at the top, the rows in the middle,\n * and the two things a person can do with the result at the foot.\n *\n * The rows are light-DOM children of the popup, so the popup's own stylesheet reaches only their\n * outer box (::slotted). The parts inside a row and the chrome around it are styled by the small\n * sheet below, carried inside the template under one class so it touches nothing else.\n */\nexport const PERSONALIZER_POPUP_STYLES = css`\n  :host {\n    width: 280px;\n    min-height: 0;\n    max-height: min(80vh, 560px);\n    padding: 0;\n    overflow: auto;\n    border-radius: 12px;\n    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);\n  }\n\n  ::slotted([option]) {\n    display: flex;\n    align-items: center;\n    position: relative;\n    padding: 5px 36px 5px 14px;\n    border: 0;\n    border-left: 0;\n    font-size: 0.8rem;\n    /* A list of a dozen ticks wants a small mark; the row, not the box, is the target. */\n    --ox-checkbox-size: 12px;\n    --ox-checkbox-border-radius: 3px;\n    --input-intra-gap: 9px;\n    color: var(--md-sys-color-on-surface);\n    user-select: none;\n  }\n\n  ::slotted([option]:hover) {\n    background-color: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface);\n  }\n\n  ::slotted(.ox-p13n-header),\n  ::slotted(.ox-p13n-footer) {\n    padding: 0;\n    border: 0;\n    cursor: default;\n  }\n`\n\nconst SHEET = html`\n  <style>\n    .ox-p13n-header {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      padding: 14px 10px 8px 16px;\n      background: inherit;\n    }\n    .ox-p13n-header .ox-p13n-title {\n      flex: 1;\n      min-width: 0;\n      line-height: 1.3;\n    }\n    .ox-p13n-header b {\n      display: block;\n      font-size: 0.86rem;\n      font-weight: 600;\n      color: var(--md-sys-color-on-surface);\n    }\n    /* Translations arrive in whatever case the catalogue keeps; a title starts with a capital. */\n    .ox-p13n-header b::first-letter,\n    .ox-p13n-header small::first-letter {\n      text-transform: uppercase;\n    }\n    .ox-p13n-header small {\n      display: block;\n      font-size: 0.72rem;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    .ox-p13n-header md-icon {\n      --md-icon-size: 18px;\n      flex: none;\n      padding: 4px;\n      border-radius: 8px;\n      color: var(--md-sys-color-outline);\n      cursor: pointer;\n    }\n    .ox-p13n-header md-icon:hover {\n      color: var(--md-sys-color-on-surface);\n      background: var(--md-sys-color-surface-container-high);\n    }\n    /* The row is a checkbox whose slot is inline, so the handle is pinned to the row's right edge. */\n    .ox-p13n-handle {\n      --md-icon-size: 18px;\n      position: absolute;\n      right: 10px;\n      top: 50%;\n      transform: translateY(-50%);\n      color: var(--md-sys-color-outline-variant);\n      cursor: grab;\n    }\n    [option]:hover .ox-p13n-handle {\n      color: var(--md-sys-color-outline);\n    }\n    .ox-p13n-footer {\n      position: sticky;\n      bottom: 0;\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 6px;\n      padding: 10px 12px 12px;\n      border-top: 1px solid var(--md-sys-color-outline-variant);\n      background: var(--ox-popup-list-background-color, var(--md-sys-color-surface-container-lowest));\n    }\n    .ox-p13n-footer button {\n      height: 28px;\n      padding: 0 12px;\n      border: 0;\n      border-radius: 999px;\n      background: transparent;\n      color: var(--md-sys-color-on-surface-variant);\n      font: inherit;\n      font-size: 0.78rem;\n      font-weight: 500;\n      cursor: pointer;\n    }\n    .ox-p13n-footer button:hover {\n      color: var(--md-sys-color-on-surface);\n      background: var(--md-sys-color-surface-container-high);\n    }\n    .ox-p13n-footer button[primary] {\n      padding: 0 16px;\n      color: var(--md-sys-color-on-primary);\n      background: var(--md-sys-color-primary);\n    }\n    .ox-p13n-footer button[primary]:hover {\n      color: var(--md-sys-color-on-primary);\n      background: var(--md-sys-color-primary);\n      filter: brightness(1.08);\n    }\n  </style>\n`\n\nexport function personalizerHeader(title: string, hint: string, onClose: () => void): TemplateResult {\n  return html`\n    ${SHEET}\n    <div class=\"ox-p13n-header\" slot=\"header\">\n      <div class=\"ox-p13n-title\"><b>${title}</b><small>${hint}</small></div>\n      <md-icon @click=${onClose} title=${i18next.t('button.close', { defaultValue: 'Close' })}>close</md-icon>\n    </div>\n  `\n}\n\nexport function personalizerHandle(): TemplateResult {\n  return html`<md-icon class=\"ox-p13n-handle\" handle>drag_indicator</md-icon>`\n}\n\n/* The list edits the screen as you go; the foot decides whether that outlives this visit. */\nexport function personalizerFooter(onReset: () => void, onSave: () => void): TemplateResult {\n  return html`\n    <div class=\"ox-p13n-footer\">\n      <button @click=${onReset}>${i18next.t('button.reset to default', { defaultValue: 'Reset to default' })}</button>\n      <button primary @click=${onSave}>${i18next.t('button.save as mine', { defaultValue: 'Save as mine' })}</button>\n    </div>\n  `\n}\n"]}

package/dist/src/types.d.ts

@@ -308,6 +308,12 @@ export type ColumnConfig = {
     icon?: string;
     iconOnly?: boolean;
     danger?: boolean;
+    /**
+     * CARD mode, gutter columns: draw this button only while the card is hovered (or focused). A
+     * function decides per record - e.g. a favorite star that is quiet until set, then stays. On a
+     * device with no hover (touch) quiet gutters are always drawn, so nothing becomes unreachable.
+     */
+    quiet?: boolean | ((record: GristRecord) => boolean);
     /** [end] only for button gutter column */
     header: HeaderConfig;
     record: RecordConfig;
@@ -582,6 +588,12 @@ export type ImexConfig = {
  * @property {boolean} appendable - Indicates whether new rows can be appended to the table.
  * @property {boolean} insertable - Indicates whether new rows can be inserted into the table.
  * @property {RowSelectableConfig} [selectable] - Configuration for row selection options.
+ * @property {boolean} [reorderable] - CARD mode only: lets a viewer drag cards to reorder them.
+ * Dispatches a bubbling `reorder` CustomEvent on `ox-grist` (`detail: { ids: string[], movedId: string }`,
+ * the full record order after the move) instead of persisting anything itself - the consumer holds
+ * the actual ordering field and mutation, which differ per domain (an adjacency scheme, a stored
+ * array, ...). Off by default; a list still sorted server-side by some other field should leave this
+ * unset rather than let a drag silently not stick past the next fetch.
  * @property {GroupConfig[]} groups - An array of group configuration options.
  * @property {string[]} totals - An array of field names for which totals should be calculated and displayed.
  * @property {GristClassifier} classifier - A function that classifies rows based on their attributes.
@@ -593,6 +605,7 @@ export type RowsConfig = {
     editable: boolean;
     insertable: boolean;
     selectable?: RowSelectableConfig;
+    reorderable?: boolean;
     groups: GroupConfig[];
     totals: string[];
     classifier: GristClassifier;