@3mo/data-grid 0.15.3 → 0.16.0

package/dist/DataGridColumn.d.ts

@@ -1,22 +1,27 @@
 import { type HTMLTemplateResult } from '@a11d/lit';
 import { equals } from '@a11d/equals';
-import type { DataGrid } from './index.js';
+import type { DataGrid, DataGridSortingStrategy } from './index.js';
 import type * as CSS from 'csstype';
 export type DataGridColumnAlignment = 'start' | 'center' | 'end';
 export type DataGridColumnSticky = 'start' | 'both' | 'end';
+export type DataGridColumnMenuItems = HTMLTemplateResult | Map<'sorting' | 'stickiness' | 'more', HTMLTemplateResult>;
 export declare class DataGridColumn<TData, TValue = unknown> {
-    dataGrid?: DataGrid<TData, any>;
+    dataGrid: DataGrid<TData, any>;
     dataSelector: KeyPath.Of<TData>;
     heading: string;
     description?: string;
     width: CSS.DataType.TrackBreadth<(string & {}) | 0>;
     alignment: DataGridColumnAlignment;
     hidden: boolean;
-    sortable: boolean;
+    hide(): void;
     sticky?: DataGridColumnSticky;
+    toggleSticky(sticky: DataGridColumnSticky): void;
+    sortable: boolean;
     private _sortDataSelector?;
     get sortDataSelector(): object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | (Extract<keyof TData, `${number}`> extends infer T ? T extends Extract<keyof TData, `${number}`> ? T extends keyof TData ? `${T}.${object extends Required<TData[T]> ? string : TData[T] extends infer T_1 ? T_1 extends TData[T] ? T_1 extends readonly any[] ? Extract<keyof T_1, `${number}`> | Extract<keyof T_1, string> | (Extract<keyof T_1, `${number}`> extends infer T_2 ? T_2 extends Extract<keyof T_1, `${number}`> ? T_2 extends keyof T_1 ? never : never : never : never) : T_1 extends object ? Extract<keyof T_1, string> | (Extract<keyof T_1, string> extends infer T_3 ? T_3 extends Extract<keyof T_1, string> ? T_3 extends keyof T_1 ? never : never : never : never) : never : never : never}` : never : never : never) : TData extends object ? Extract<keyof TData, string> | (Extract<keyof TData, string> extends infer T_4 ? T_4 extends Extract<keyof TData, string> ? T_4 extends keyof TData ? `${T_4}.${object extends Required<TData[T_4]> ? string : TData[T_4] extends infer T_5 ? T_5 extends TData[T_4] ? T_5 extends readonly any[] ? Extract<keyof T_5, `${number}`> | Extract<keyof T_5, string> | (Extract<keyof T_5, `${number}`> extends infer T_6 ? T_6 extends Extract<keyof T_5, `${number}`> ? T_6 extends keyof T_5 ? never : never : never : never) : T_5 extends object ? Extract<keyof T_5, string> | (Extract<keyof T_5, string> extends infer T_7 ? T_7 extends Extract<keyof T_5, string> ? T_7 extends keyof T_5 ? never : never : never : never) : never : never : never}` : never : never : never) : never;
     set sortDataSelector(value: object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | (Extract<keyof TData, `${number}`> extends infer T ? T extends Extract<keyof TData, `${number}`> ? T extends keyof TData ? `${T}.${object extends Required<TData[T]> ? string : TData[T] extends infer T_1 ? T_1 extends TData[T] ? T_1 extends readonly any[] ? Extract<keyof T_1, `${number}`> | Extract<keyof T_1, string> | (Extract<keyof T_1, `${number}`> extends infer T_2 ? T_2 extends Extract<keyof T_1, `${number}`> ? T_2 extends keyof T_1 ? never : never : never : never) : T_1 extends object ? Extract<keyof T_1, string> | (Extract<keyof T_1, string> extends infer T_3 ? T_3 extends Extract<keyof T_1, string> ? T_3 extends keyof T_1 ? never : never : never : never) : never : never : never}` : never : never : never) : TData extends object ? Extract<keyof TData, string> | (Extract<keyof TData, string> extends infer T_4 ? T_4 extends Extract<keyof TData, string> ? T_4 extends keyof TData ? `${T_4}.${object extends Required<TData[T_4]> ? string : TData[T_4] extends infer T_5 ? T_5 extends TData[T_4] ? T_5 extends readonly any[] ? Extract<keyof T_5, `${number}`> | Extract<keyof T_5, string> | (Extract<keyof T_5, `${number}`> extends infer T_6 ? T_6 extends Extract<keyof T_5, `${number}`> ? T_6 extends keyof T_5 ? never : never : never : never) : T_5 extends object ? Extract<keyof T_5, string> | (Extract<keyof T_5, string> extends infer T_7 ? T_7 extends Extract<keyof T_5, string> ? T_7 extends keyof T_5 ? never : never : never : never) : never : never : never}` : never : never : never) : never);
+    toggleSort(strategy?: DataGridSortingStrategy | null): void;
+    getMenuItemsTemplate?(): DataGridColumnMenuItems;
     getContentTemplate?(value: TValue, data: TData): HTMLTemplateResult;
     editable: boolean | Predicate<TData>;
     getEditContentTemplate?(value: TValue, data: TData): HTMLTemplateResult;

package/dist/DataGridColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAA;AAEnC,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEhE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAE3D,qBAAa,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAClD,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/B,YAAY,EAAG,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IAEhC,OAAO,EAAG,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAgB;IAEnE,SAAS,EAAE,uBAAuB,CAAU;IAC5C,MAAM,UAAQ;IAEd,QAAQ,UAAO;IAEf,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAE7B,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,IAAI,gBAAgB,snDAAyD;IAC7E,IAAI,gBAAgB,CAAC,KAAK,mnDAAA,EAAoC;IAE9D,kBAAkB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEnE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAC5C,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;gBAEpC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAI1D,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,OAAO;IAMpD,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAIzD,OAAO,CAAC,cAAc,CAAC,CAAQ;IAC/B,IAAI,aAAa,WAAsC;IACvD,IAAI,aAAa,CAAC,KAAK,QAAA,EAGtB;IAED,OAAO,CAAC,aAAa,CAAQ;IAC7B,IAAI,YAAY,YAAgC;IAChD,IAAI,YAAY,CAAC,KAAK,SAAA,EAGrB;IAED,IAAI,iBAAiB,6FAIpB;IAED,IAAI,WAAW,mCAkBd;IAED,IAAI,uBAAuB,WA2B1B;IAED,kBAAkB,CAAC,IAAI,SAAS,CAAC,MAAM,CAAC;IACxC,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC;CAChE"}
+{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACnE,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAA;AAEnC,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEhE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAE3D,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GAAG,GAAG,CAAC,SAAS,GAAG,YAAY,GAAG,MAAM,EAAE,kBAAkB,CAAC,CAAA;AAErH,qBAAa,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAClD,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/B,YAAY,EAAG,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IAEhC,OAAO,EAAG,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAgB;IAEnE,SAAS,EAAE,uBAAuB,CAAU;IAE5C,MAAM,UAAQ;IACd,IAAI;IAKJ,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,YAAY,CAAC,MAAM,EAAE,oBAAoB;IAKzC,QAAQ,UAAO;IAEf,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,IAAI,gBAAgB,snDAAyD;IAC7E,IAAI,gBAAgB,CAAC,KAAK,mnDAAA,EAAoC;IAE9D,UAAU,CAAC,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI;IAkBpD,oBAAoB,CAAC,IAAI,uBAAuB;IAEhD,kBAAkB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEnE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAC5C,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;gBAEpC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAI1D,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,OAAO;IAMpD,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAIzD,OAAO,CAAC,cAAc,CAAC,CAAQ;IAC/B,IAAI,aAAa,WAAsC;IACvD,IAAI,aAAa,CAAC,KAAK,QAAA,EAGtB;IAED,OAAO,CAAC,aAAa,CAAQ;IAC7B,IAAI,YAAY,YAAgC;IAChD,IAAI,YAAY,CAAC,KAAK,SAAA,EAGrB;IAED,IAAI,iBAAiB,6FAIpB;IAED,IAAI,WAAW,mCAkBd;IAED,IAAI,uBAAuB,WA2B1B;IAED,kBAAkB,CAAC,IAAI,SAAS,CAAC,MAAM,CAAC;IACxC,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC;CAChE"}

package/dist/DataGridColumn.js

@@ -1,8 +1,31 @@
 import { html, style } from '@a11d/lit';
 import { equals } from '@a11d/equals';
 export class DataGridColumn {
+    hide() {
+        this.hidden = true;
+        this.dataGrid.requestUpdate();
+    }
+    toggleSticky(sticky) {
+        this.sticky = this.sticky === sticky ? undefined : sticky;
+        this.dataGrid.requestUpdate();
+    }
     get sortDataSelector() { return this._sortDataSelector || this.dataSelector; }
     set sortDataSelector(value) { this._sortDataSelector = value; }
+    toggleSort(strategy) {
+        if (!this.sortable) {
+            return;
+        }
+        if (!!strategy && this.sortingDefinition?.strategy === strategy) {
+            strategy = null;
+        }
+        if (strategy === null) {
+            this.dataGrid.sortingController.reset();
+        }
+        else {
+            this.dataGrid.sortingController.toggle(this.sortDataSelector, strategy);
+        }
+        this.dataGrid.requestUpdate();
+    }
     constructor(column) {
         this.width = 'max-content';
         this.alignment = 'start';

package/dist/DataGridColumnHeader.d.ts

@@ -0,0 +1,23 @@
+import { Component, type HTMLTemplateResult } from '@a11d/lit';
+import { ResizeController } from '@3mo/resize-observer';
+import type { DataGridColumn } from './DataGridColumn.js';
+export declare class DataGridColumnHeader extends Component {
+    column: DataGridColumn<unknown>;
+    menuOpen: boolean;
+    static get styles(): import("@a11d/lit").CSSResult;
+    readonly resizeController: ResizeController<Promise<void>>;
+    get template(): HTMLTemplateResult;
+    private get contentTemplate();
+    private get sortingTemplate();
+    private get menuTemplate();
+    private getSortingItemsTemplate;
+    private getStickinessItemsTemplate;
+    private getMoreItemsTemplate;
+    private get separatorTemplate();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-data-grid-column-header': DataGridColumnHeader;
+    }
+}
+//# sourceMappingURL=DataGridColumnHeader.d.ts.map

package/dist/DataGridColumnHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridColumnHeader.d.ts","sourceRoot":"","sources":["../DataGridColumnHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAA+C,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGjH,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAczD,qBACa,oBAAqB,SAAQ,SAAS;IACtB,MAAM,EAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAChB,QAAQ,UAAQ;IAE5D,WAAoB,MAAM,kCAqHzB;IAED,QAAQ,CAAC,gBAAgB,kCAOvB;IAEF,IAAa,QAAQ,uBA4BpB;IAED,OAAO,KAAK,eAAe,GAO1B;IAED,OAAO,KAAK,eAAe,GAU1B;IAED,OAAO,KAAK,YAAY,GAiBvB;IAED,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,0BAA0B;IAmBlC,OAAO,CAAC,oBAAoB;IAS5B,OAAO,KAAK,iBAAiB,GAS5B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,4BAA4B,EAAE,oBAAoB,CAAA;KAClD;CACD"}

package/dist/DataGridColumnHeader.js

@@ -0,0 +1,273 @@
+import { __decorate } from "tslib";
+import { bind, Component, component, css, html, join, property, style } from '@a11d/lit';
+import { tooltip } from '@3mo/tooltip';
+import { Localizer } from '@3mo/localization';
+import { ResizeController } from '@3mo/resize-observer';
+import { DataGridSortingStrategy } from './DataGridSortingController.js';
+Localizer.dictionaries.add('de', {
+    'Sorting': 'Sortierung',
+    'Sort descending': 'Absteigend sortieren',
+    'Sort ascending': 'Aufsteigend sortieren',
+    'Stickiness': 'Fixierung',
+    'Stick to start': 'Anfang fixieren',
+    'Stick to both': 'Beide fixieren',
+    'Stick to end': 'Ende fixieren',
+    'Hide': 'Ausblenden',
+});
+let DataGridColumnHeader = class DataGridColumnHeader extends Component {
+    constructor() {
+        super(...arguments);
+        this.menuOpen = false;
+        this.resizeController = new ResizeController(this, {
+            callback: async ([entry]) => {
+                // It is necessary to defer the callback to avoid
+                // this resize-observer triggering other resize-observers in a loop
+                await new Promise(r => requestIdleCallback(r));
+                this.column.widthInPixels = entry?.contentRect.width ?? 0;
+            }
+        });
+    }
+    static get styles() {
+        return css `
+			:host {
+				display: flex;
+				position: relative;
+				padding: 0 var(--mo-data-grid-cell-padding);
+				transition: background 0.1s;
+				anchor-name: --mo-data-grid-column-header;
+			}
+
+			:host(:hover) {
+				background: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-gray) 8%);
+			}
+
+			:host([data-sticky]) {
+				position: sticky;
+			}
+
+			:host([data-sticky]) /*[data-sticking]*/ {
+				z-index: 6;
+				background: var(--mo-data-grid-sticky-part-color);
+			}
+
+			mo-data-grid-header-separator {
+				z-index: 5;
+			}
+
+			:host([data-sticky]) /*[data-sticking]*/ mo-data-grid-header-separator {
+				z-index: 7;
+			}
+
+			#container {
+				transition: margin-inline-end 0.1s;
+			}
+
+			#content {
+				display: inline-block;
+				overflow: hidden !important;
+				color: var(--mo-color-foreground);
+				font-weight: 500;
+				line-height: var(--mo-data-grid-header-height);
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				user-select: none;
+				width: 100%;
+			}
+
+			#sort {
+				position: relative;
+
+				&[data-preview] {
+					display: none;
+				}
+
+				mo-icon-button {
+					transition: 0.1s;
+					font-size: 20px;
+					color: var(--mo-color-accent);
+				}
+
+				span {
+					position: absolute;
+					inset-inline-end: 0;
+					inset-block-end: 0;
+					color: var(--mo-color-accent);
+					border-radius: 50%;
+					width: fit-content;
+					user-select: none;
+					font-size: 0.8rem;
+					aspect-ratio: 1 / 1;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+
+			:host(:hover) #sort[data-preview] {
+				display: flex;
+				mo-icon-button {
+					color: var(--mo-color-gray);
+					opacity: 0.5;
+				}
+			}
+
+			#menu-icon {
+				position: absolute;
+				inset-inline-end: calc(var(--mo-data-grid-cell-padding) - 6px);
+				inset-block-start: 2px;
+				cursor: pointer;
+				opacity: 0;
+				font-size: 20px;
+				transition: 0.1s;
+			}
+
+			:host(:hover), :host([menuOpen]) {
+				#container {
+					margin-inline-end: 20px;
+				}
+
+				#menu-icon {
+					opacity: 1;
+				}
+			}
+
+			mo-menu {
+				position-anchor: --mo-data-grid-column-header;
+
+				&::part(popover) {
+					margin-inline-start: 4px;
+				}
+
+				mo-heading {
+					padding: 0.5rem 1rem;
+					opacity: 0.5;
+				}
+			}
+		`;
+    }
+    get template() {
+        if (this.column.sticky && !this.column.intersecting) {
+            this.style.insetInline = this.column.stickyColumnInsetInline;
+        }
+        this.toggleAttribute('data-sticking', this.column.intersecting === false);
+        if (!this.column.sticky) {
+            this.removeAttribute('data-sticky');
+        }
+        else {
+            this.setAttribute('data-sticky', this.column.sticky);
+        }
+        const direction = this.column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal';
+        return html `
+			<mo-flex id='container' alignItems='center' gap='0.2rem'
+				direction=${direction}
+				@click=${() => this.column.toggleSort()}
+				@contextmenu=${(e) => { e.preventDefault(); this.menuOpen = true; }}
+				${style({ flex: '1', overflow: 'hidden', cursor: 'pointer' })}
+			>
+				${this.contentTemplate}
+				${this.sortingTemplate}
+			</mo-flex>
+			${this.menuTemplate}
+			${this.separatorTemplate}
+		`;
+    }
+    get contentTemplate() {
+        return html `
+			<div id='content'
+				${style({ textAlign: this.column.alignment })}
+				${!this.column.description ? html.nothing : tooltip(this.column.description)}
+			>${this.column.heading}</div>
+		`;
+    }
+    get sortingTemplate() {
+        const sortingDefinition = this.column.sortingDefinition;
+        const sortIcon = sortingDefinition?.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
+        const sortingRank = !sortingDefinition || this.column.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
+        return !this.column.sortable ? html.nothing : html `
+			<mo-flex id='sort' direction='horizontal' ?data-preview=${!sortingDefinition?.strategy}>
+				<mo-icon-button dense icon=${sortIcon}></mo-icon-button>
+				${!sortingRank ? html.nothing : html `<span>${sortingRank}</span>`}
+			</mo-flex>
+		`;
+    }
+    get menuTemplate() {
+        const additionalItems = this.column.getMenuItemsTemplate?.();
+        return html `
+			<mo-popover-container placement='block-end' alignment='end' style='display: contents'>
+				<mo-icon-button dense id='menu-icon' icon='more_vert'></mo-icon-button>
+
+				<mo-menu slot='popover' .anchor=${this} target='menu-icon' ?open=${bind(this, 'menuOpen')}>
+					<mo-line></mo-line>
+					${join([
+            !this.column.sortable ? undefined : this.getSortingItemsTemplate(additionalItems instanceof Map ? additionalItems.get('sorting') : undefined),
+            // Hide stickiness items for now
+            true ? undefined : this.getStickinessItemsTemplate(additionalItems instanceof Map ? additionalItems.get('stickiness') : undefined),
+            this.getMoreItemsTemplate(additionalItems instanceof Map ? additionalItems.get('more') : additionalItems),
+        ].filter(Boolean), html `<mo-line></mo-line>`)}
+				</mo-menu>
+			</mo-popover-container>
+		`;
+    }
+    getSortingItemsTemplate(additionalItems) {
+        return html `
+			<mo-heading typography='subtitle2'>${t('Sorting')}</mo-heading>
+			<mo-selectable-menu-item icon='arrow_downward'
+				?disabled=${this.column.sortable === false}
+				?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Descending}
+				@click=${() => this.column.toggleSort(DataGridSortingStrategy.Descending)}
+			>${t('Sort descending')}</mo-selectable-menu-item>
+			<mo-selectable-menu-item icon='arrow_upward'
+				?disabled=${this.column.sortable === false}
+				?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Ascending}
+				@click=${() => this.column.toggleSort(DataGridSortingStrategy.Ascending)}
+			>${t('Sort ascending')}</mo-selectable-menu-item>
+			${additionalItems}
+		`;
+    }
+    getStickinessItemsTemplate(additionalItems) {
+        return html `
+			<mo-heading typography='subtitle2'>${t('Stickiness')}</mo-heading>
+			<mo-selectable-menu-item icon='push_pin'
+				?selected=${this.column.sticky === 'start'}
+				@click=${() => this.column.toggleSticky('start')}
+			>${t('Stick to start')}</mo-selectable-menu-item>
+			<mo-selectable-menu-item icon='push_pin'
+				?selected=${this.column.sticky === 'both'}
+				@click=${() => this.column.toggleSticky('both')}
+			>${t('Stick to both')}</mo-selectable-menu-item>
+			<mo-selectable-menu-item icon='push_pin'
+				?selected=${this.column.sticky === 'end'}
+				@click=${() => this.column.toggleSticky('end')}
+			>${t('Stick to end')}</mo-selectable-menu-item>
+			${additionalItems}
+		`;
+    }
+    getMoreItemsTemplate(additionalItems) {
+        return html `
+			<mo-menu-item icon='visibility_off' @click=${() => this.column.hide()}>
+				${t('Hide')}
+			</mo-menu-item>
+			${additionalItems}
+		`;
+    }
+    get separatorTemplate() {
+        const index = this.column.dataGrid.visibleColumns.indexOf(this.column);
+        return html `
+			<mo-data-grid-header-separator
+				?data-last=${this.column.dataGrid.visibleColumns.length - 1 === index}
+				.dataGrid=${this.column.dataGrid}
+				.column=${this.column.dataGrid.visibleColumns[index]}
+			></mo-data-grid-header-separator>
+		`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], DataGridColumnHeader.prototype, "column", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DataGridColumnHeader.prototype, "menuOpen", void 0);
+DataGridColumnHeader = __decorate([
+    component('mo-data-grid-column-header')
+], DataGridColumnHeader);
+export { DataGridColumnHeader };

package/dist/DataGridHeader.d.ts

@@ -5,9 +5,11 @@ export declare class DataGridHeader<TData> extends Component {
     readonly modeSelectionChange: EventDispatcher<string>;
     dataGrid: DataGrid<TData, any>;
     overlayOpen: boolean;
+    private readonly columnHeaders;
     protected connected(): void;
     protected disconnected(): void;
     private readonly handleDataGridDataChange;
+    protected updated(...parameters: Parameters<Component['updated']>): void;
     static get styles(): import("@a11d/lit").CSSResult;
     protected get template(): import("lit-html").HTMLTemplateResult;
     private get detailsExpanderTemplate();
@@ -15,11 +17,9 @@ export declare class DataGridHeader<TData> extends Component {
     private get selection();
     private readonly handleSelectionChange;
     private get contentTemplate();
-    private readonly getHeaderCellTemplate;
     private get fillerTemplate();
     private get actionsTemplate();
     private getResizeObserver;
-    private sort;
     private toggleAllDetails;
 }
 declare global {

package/dist/DataGridHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAsD,MAAM,WAAW,CAAA;AAIpG,OAAO,EAAuE,KAAK,QAAQ,EAAwB,MAAM,YAAY,CAAA;AAiBrI,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1C,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,mBAAmB,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEnC,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IACf,WAAW,UAAQ;cAE5C,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;IAED,WAAoB,MAAM,kCAmGzB;IAED,cAAuB,QAAQ,0CAQ9B;IAED,OAAO,KAAK,uBAAuB,GAclC;IAED,OAAO,KAAK,iBAAiB,GAW5B;IAED,OAAO,KAAK,SAAS,GASpB;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAQrC;IAED,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAqCrC;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,eAAe,GA0B1B;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,gBAAgB;CAIxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}
+{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAqD,MAAM,WAAW,CAAA;AAGnG,OAAO,EAAyB,KAAK,QAAQ,EAAmD,MAAM,YAAY,CAAA;AAiBlH,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1C,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,mBAAmB,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEnC,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IACf,WAAW,UAAQ;IAEvB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;cAEjF,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;cAEkB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAK1E,WAAoB,MAAM,kCAoDzB;IAED,cAAuB,QAAQ,0CAQ9B;IAED,OAAO,KAAK,uBAAuB,GAclC;IAED,OAAO,KAAK,iBAAiB,GAW5B;IAED,OAAO,KAAK,SAAS,GASpB;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAQrC;IAED,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,eAAe,GA0B1B;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;CAIxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}

package/dist/DataGridHeader.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { component, Component, css, html, ifDefined, property, event, style, live } from '@a11d/lit';
-import { tooltip } from '@3mo/tooltip';
+import { component, Component, css, html, property, event, style, live, queryAll } from '@a11d/lit';
 import { observeResize } from '@3mo/resize-observer';
 import { Localizer } from '@3mo/localization';
-import { DataGridSelectability, DataGridSortingStrategy, DataGridSidePanelTab } from './index.js';
+import { DataGridSelectability, DataGridSidePanelTab } from './index.js';
 Localizer.dictionaries.add('en', {
     'Actions for ${count:pluralityNumber} selected entries': [
         'Actions for the selected entry',
@@ -33,44 +32,6 @@ let DataGridHeader = class DataGridHeader extends Component {
                 this.dataGrid.selectAll();
             }
         };
-        this.getHeaderCellTemplate = (column, index, columns) => {
-            const sortingDefinition = column.sortingDefinition;
-            const sortIcon = !sortingDefinition ? undefined : sortingDefinition.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
-            const sortingRank = !sortingDefinition || this.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
-            const observeResizeDeferred = (callback) => observeResize((e, o) => {
-                // It is necessary to defer the callback to avoid
-                // this resize-observer triggering other resize-observers in a loop
-                requestIdleCallback(() => callback(e, o));
-            });
-            return html `
-			<mo-flex class='cell' alignItems='center' direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'}
-				data-sticky=${ifDefined(column.sticky)}
-				data-sticking=${column.intersecting === false}
-				${!column.sticky || column.intersecting ? html.nothing : style({ insetInline: column.stickyColumnInsetInline })}
-				${observeResizeDeferred(([entry]) => column.widthInPixels = entry?.contentRect.width ?? 0)}
-			>
-				<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
-					${style({ overflow: 'hidden', cursor: 'pointer', flex: '1' })}
-					@click=${() => this.sort(column)}
-				>
-					<div class='headerContent'
-						${style({ width: '100%', textAlign: column.alignment })}
-						${!column.description ? html.nothing : tooltip(column.description)}
-					>${column.heading}</div>
-
-					${sortIcon === undefined ? html.nothing : html `
-						${!sortingRank ? html.nothing : html `<span class='sort-rank'>${sortingRank}</span>`}
-						<mo-icon ${style({ color: 'var(--mo-color-accent)', marginInline: '3px' })} icon=${ifDefined(sortIcon)}></mo-icon>
-					`}
-				</mo-flex>
-				<mo-data-grid-header-separator
-					?data-last=${columns.length - 1 === index}
-					.dataGrid=${this.dataGrid}
-					.column=${this.dataGrid.visibleColumns[index]}
-				></mo-data-grid-header-separator>
-			</mo-flex>
-		`;
-        };
     }
     connected() {
         this.dataGrid.dataChange.subscribe(this.handleDataGridDataChange);
@@ -78,6 +39,10 @@ let DataGridHeader = class DataGridHeader extends Component {
     disconnected() {
         this.dataGrid.dataChange.unsubscribe(this.handleDataGridDataChange);
     }
+    updated(...parameters) {
+        super.updated(...parameters);
+        this.columnHeaders.forEach(h => h.requestUpdate());
+    }
     static get styles() {
         return css `
 			:host {
@@ -95,53 +60,6 @@ let DataGridHeader = class DataGridHeader extends Component {
 				height: var(--mo-data-grid-header-height);
 			}
 
-			.headerContent {
-				padding: 0 var(--mo-data-grid-cell-padding);
-				display: inline-block;
-				overflow: hidden !important;
-				color: var(--mo-color-foreground);
-				font-weight: 500;
-				line-height: var(--mo-data-grid-header-height);
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				user-select: none;
-			}
-
-			.sort-rank {
-				background: var(--mo-color-transparent-gray-3);
-				color: var(--mo-color-foreground);
-				border: 1px solid var(--mo-color-gray-transparent);
-				border-radius: 50%;
-				width: fit-content;
-				user-select: none;
-				height: 20px;
-				aspect-ratio: 1 / 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.cell {
-				position: relative;
-			}
-
-			.cell[data-sticky] {
-				position: sticky;
-			}
-
-			.cell[data-sticky] /*[data-sticking]*/ {
-				z-index: 6;
-				background: var(--mo-data-grid-sticky-part-color);
-			}
-
-			mo-data-grid-header-separator {
-				z-index: 5;
-			}
-
-			.cell[data-sticky] /*[data-sticking]*/ mo-data-grid-header-separator {
-				z-index: 7;
-			}
-
 			.details, .selection, .actions, .context-menu {
 				position: sticky;
 				background: var(--mo-data-grid-sticky-part-color);
@@ -226,7 +144,9 @@ let DataGridHeader = class DataGridHeader extends Component {
     }
     get contentTemplate() {
         return html `
-			${this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate)}
+			${this.dataGrid.visibleColumns.map(column => html `
+				<mo-data-grid-column-header .column=${column}></mo-data-grid-column-header>
+			`)}
 		`;
     }
     get fillerTemplate() {
@@ -261,12 +181,6 @@ let DataGridHeader = class DataGridHeader extends Component {
         // @ts-expect-error Readonly property set here
         return observeResize(([entry]) => this.dataGrid.columnsController[property] = entry?.contentRect.width ?? 0);
     }
-    sort(column) {
-        if (column.sortable) {
-            this.dataGrid.sortingController.toggle(column.sortDataSelector);
-            this.requestUpdate();
-        }
-    }
     toggleAllDetails() {
         this.dataGrid.toggleRowDetails();
         this.requestUpdate();
@@ -284,6 +198,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DataGridHeader.prototype, "overlayOpen", void 0);
+__decorate([
+    queryAll('mo-data-grid-column-header')
+], DataGridHeader.prototype, "columnHeaders", void 0);
 DataGridHeader = __decorate([
     component('mo-data-grid-header')
 ], DataGridHeader);

package/dist/DataGridHeaderSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+D,MAAM,WAAW,CAAA;AAElG,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE/D,qBACa,uBAAwB,SAAQ,SAAS;IACzB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAEnD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,kBAAkB,CAAI;IAEvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCAiDzB;IAED,cAAuB,QAAQ,0CAU9B;IAGD,SAAS,CAAC,eAAe;IAczB,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU;IAmBxD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;IAED,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}
+{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+D,MAAM,WAAW,CAAA;AAElG,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE/D,qBACa,uBAAwB,SAAQ,SAAS;IACzB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAEnD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,kBAAkB,CAAI;IAEvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCA6CzB;IAED,cAAuB,QAAQ,0CAK9B;IAGD,SAAS,CAAC,eAAe;IAczB,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,YAAY,GAAG,UAAU;IAmBxD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;IAED,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}

package/dist/DataGridHeaderSeparator.js

@@ -22,43 +22,39 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
         return css `
 			:host {
 				position: absolute;
-				inset-inline-end: -2px;
+				inset-inline-end: -3px;
+				height: 100%;
+				width: 6px;
+				user-select: none;
 			}
 
-			:host([data-last]) {
-				inset-inline-end: 0px !important;
+			:host([disabled]) {
+				pointer-events: none;
 			}
 
-			div.separator {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				inset-inline-start: -6px;
-				width: 6px;
-				height: 100%;
-				user-select: none;
+			:host([data-last]) {
+				inset-inline-end: 0px !important;
 			}
 
-			.knob {
-				height: var(--mo-data-grid-header-separator-height);
-				width: var(--mo-data-grid-header-separator-width);
-				border-radius: 100px;
-				background-color: var(--mo-color-gray);
-				transition: 0.2s;
+			:host(:hover) {
+				cursor: col-resize;
 			}
 
-			:host(:not([disabled])) div.separator {
+			.separator {
+				margin-inline: auto;
+				width: 1px;
+				height: 100%;
 				cursor: col-resize;
+				background-color: var(--mo-color-transparent-gray-3);
+				transition: 0.1s;
 			}
 
-			:host(:not([disabled])) .separator:hover .knob {
-				--mo-data-grid-header-separator-height: 30px;
-				--mo-data-grid-header-separator-width: 8px;
+			:host(:hover) .separator {
+				width: 100%;
 				background-color: var(--mo-color-accent);
-				cursor: col-resize;
 			}
 
-			:host(:not([disabled])) .resizerOverlay {
+			.resizer {
 				position: fixed;
 				pointer-events: none;
 				top: 0;
@@ -70,13 +66,8 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
     }
     get template() {
         return html `
-			<div class='separator' @pointerdown=${this.handlePointerDown} @dblclick=${this.handleDoubleClick}>
-				<div class='knob'></div>
-			</div>
-
-			${this.isResizing === false ? html.nothing : html `
-				<div class='resizerOverlay' ${style({ insetInlineStart: `${this.pointerInlineStart}px` })}></div>
-			`}
+			<div class='separator' @pointerdown=${this.handlePointerDown} @dblclick=${this.handleDoubleClick}></div>
+			${!this.isResizing ? html.nothing : html `<div class='resizer' ${style({ insetInlineStart: `${this.pointerInlineStart}px` })}></div>`}
 		`;
     }
     handlePointerUp() {

package/dist/columns/DataGridColumnComponent.d.ts

@@ -1,6 +1,6 @@
 import { Component, type HTMLTemplateResult } from '@a11d/lit';
 import { DataGrid } from '../DataGrid.js';
-import { DataGridColumn, type DataGridColumnAlignment, type DataGridColumnSticky } from '../DataGridColumn.js';
+import { DataGridColumn, type DataGridColumnAlignment, type DataGridColumnMenuItems, type DataGridColumnSticky } from '../DataGridColumn.js';
 /**
  * @attr width - The width of the column
  * @attr hidden - Whether the column is hidden. The column can be made visible by the user in the settings panel if available.
@@ -26,6 +26,7 @@ export declare abstract class DataGridColumnComponent<TData, TValue> extends Com
     nonSortable: boolean;
     nonEditable: boolean | Predicate<TData>;
     get column(): DataGridColumn<TData, TValue>;
+    protected getMenuItemsTemplate?(): DataGridColumnMenuItems;
     abstract getContentTemplate(value: TValue | undefined, data: TData): HTMLTemplateResult;
     abstract getEditContentTemplate?(value: TValue | undefined, data: TData): HTMLTemplateResult;
     protected handleEdit(value: TValue | undefined, data: TData): void;