@3mo/data-grid 0.16.0-preview.0 → 0.16.0

package/dist/DataGridColumn.d.ts

@@ -4,6 +4,7 @@ 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>;
     dataSelector: KeyPath.Of<TData>;
@@ -13,12 +14,14 @@ export declare class DataGridColumn<TData, TValue = unknown> {
     alignment: DataGridColumnAlignment;
     hidden: boolean;
     hide(): void;
-    sortable: boolean;
     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,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,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;IAC5C,MAAM,UAAQ;IAEd,IAAI;IAKJ,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,UAAU,CAAC,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI;IAkBpD,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

@@ -5,6 +5,10 @@ export class DataGridColumn {
         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) {

package/dist/DataGridColumnHeader.d.ts

@@ -1,13 +1,18 @@
-import { Component } from '@a11d/lit';
+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;
-    get template(): import("lit-html").HTMLTemplateResult;
+    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 {

package/dist/DataGridColumnHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnHeader.d.ts","sourceRoot":"","sources":["../DataGridColumnHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAoD,MAAM,WAAW,CAAA;AAI7F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AASzD,qBACa,oBAAqB,SAAQ,SAAS;IACtB,MAAM,EAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAChB,QAAQ,UAAQ;IAE5D,WAAoB,MAAM,kCA2GzB;IAED,IAAa,QAAQ,0CA2BpB;IAED,OAAO,KAAK,eAAe,GAO1B;IAED,OAAO,KAAK,eAAe,GAa1B;IAED,OAAO,KAAK,YAAY,GAqBvB;IAED,OAAO,KAAK,iBAAiB,GAS5B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,4BAA4B,EAAE,oBAAoB,CAAA;KAClD;CACD"}
+{"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

@@ -1,45 +1,61 @@
 import { __decorate } from "tslib";
-import { bind, Component, component, css, html, ifDefined, property, style } from '@a11d/lit';
+import { bind, Component, component, css, html, join, property, style } from '@a11d/lit';
 import { tooltip } from '@3mo/tooltip';
 import { Localizer } from '@3mo/localization';
-import { observeResize } from '@3mo/resize-observer';
+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;
 			}
 
-			#cell {
-				position: relative;
-				padding: 0 var(--mo-data-grid-cell-padding);
+			:host(:hover) {
+				background: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-gray) 8%);
+			}
 
-				&[data-sticky] {
-					position: sticky;
-				}
+			:host([data-sticky]) {
+				position: sticky;
+			}
 
-				&[data-sticky] /*[data-sticking]*/ {
-					z-index: 6;
-					background: var(--mo-data-grid-sticky-part-color);
-				}
+			:host([data-sticky]) /*[data-sticking]*/ {
+				z-index: 6;
+				background: var(--mo-data-grid-sticky-part-color);
+			}
 
-				mo-data-grid-header-separator {
-					z-index: 5;
-				}
+			mo-data-grid-header-separator {
+				z-index: 5;
+			}
 
-				&[data-sticky] /*[data-sticking]*/ mo-data-grid-header-separator {
-					z-index: 7;
-				}
+			:host([data-sticky]) /*[data-sticking]*/ mo-data-grid-header-separator {
+				z-index: 7;
 			}
 
 			#container {
@@ -61,14 +77,14 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
 			#sort {
 				position: relative;
 
+				&[data-preview] {
+					display: none;
+				}
+
 				mo-icon-button {
 					transition: 0.1s;
 					font-size: 20px;
 					color: var(--mo-color-accent);
-					font-size: 20px;
-					&[data-preview] {
-						opacity: 0;
-					}
 				}
 
 				span {
@@ -87,9 +103,12 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
 				}
 			}
 
-			:host(:hover) #sort mo-icon-button[data-preview] {
-				color: var(--mo-color-gray);
-				opacity: 0.5;
+			:host(:hover) #sort[data-preview] {
+				display: flex;
+				mo-icon-button {
+					color: var(--mo-color-gray);
+					opacity: 0.5;
+				}
 			}
 
 			#menu-icon {
@@ -115,39 +134,41 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
 			mo-menu {
 				position-anchor: --mo-data-grid-column-header;
 
-				mo-menu-item[data-selected] {
-					background: color-mix(in srgb, var(--mo-color-accent), transparent 86%);
-					color: color-mix(in srgb, var(--mo-color-accent), var(--mo-color-foreground));
+				&::part(popover) {
+					margin-inline-start: 4px;
+				}
+
+				mo-heading {
+					padding: 0.5rem 1rem;
+					opacity: 0.5;
 				}
 			}
 		`;
     }
     get template() {
-        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));
-        });
+        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='cell' alignItems='center' direction=${direction}
-				data-sticky=${ifDefined(this.column.sticky)}
-				data-sticking=${this.column.intersecting === false}
-				${!this.column.sticky || this.column.intersecting ? html.nothing : style({ insetInline: this.column.stickyColumnInsetInline })}
-				${observeResizeDeferred(([entry]) => this.column.widthInPixels = entry?.contentRect.width ?? 0)}
+			<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' })}
 			>
-				<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}
+				${this.contentTemplate}
+				${this.sortingTemplate}
 			</mo-flex>
+			${this.menuTemplate}
+			${this.separatorTemplate}
 		`;
     }
     get contentTemplate() {
@@ -160,40 +181,75 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
     }
     get sortingTemplate() {
         const sortingDefinition = this.column.sortingDefinition;
-        const sortIcon = !sortingDefinition ? undefined : sortingDefinition.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
+        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'>
-				<mo-icon-button dense
-					icon=${sortIcon ?? 'arrow_downward'}
-					?data-preview=${sortIcon === undefined}
-				></mo-icon-button>
+			<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-menu-item icon='arrow_downward'
-						?data-selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Descending}
-						@click=${() => this.column.toggleSort(DataGridSortingStrategy.Descending)}
-					>${t('Sort descending')}</mo-menu-item>
-					<mo-menu-item icon='arrow_upward'
-						?data-selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Ascending}
-						@click=${() => this.column.toggleSort(DataGridSortingStrategy.Ascending)}
-					>${t('Sort ascending')}</mo-menu-item>
 					<mo-line></mo-line>
-					<mo-menu-item icon='visibility_off' @click=${() => this.column.hide()}>
-						${t('Hide')}
-					</mo-menu-item>
+					${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 `

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,kCA8CzB;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"}
+{"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

@@ -46,7 +46,6 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
 				height: 100%;
 				cursor: col-resize;
 				background-color: var(--mo-color-transparent-gray-3);
-				height: 100%;
 				transition: 0.1s;
 			}
 

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;

package/dist/columns/DataGridColumnComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnComponent.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,KAAK,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE9G;;;;;;;;;;;GAWG;AACH,8BAAsB,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAE3D,KAAK,SAAgB;IACK,MAAM,UAAQ;IACxC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IACZ,OAAO,SAAK;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,uBAAuB,CAAU;IAC5C,YAAY,EAAG,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IACrB,WAAW,UAAQ;IAO5D,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAElD,IAAI,MAAM,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAkB1C;IAED,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IACvF,QAAQ,CAAC,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAE5F,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAIlD,iBAAiB;cAOP,OAAO;IAKzB,kBAAkB,IAAI,SAAS,CAAC,MAAM,CAAC;IAIvC,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC;CAI7D"}
+{"version":3,"file":"DataGridColumnComponent.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,KAAK,uBAAuB,EAAE,KAAK,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAE5I;;;;;;;;;;;GAWG;AACH,8BAAsB,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAE3D,KAAK,SAAgB;IACK,MAAM,UAAQ;IACxC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IACZ,OAAO,SAAK;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,uBAAuB,CAAU;IAC5C,YAAY,EAAG,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IACrB,WAAW,UAAQ;IAO5D,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAElD,IAAI,MAAM,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAmB1C;IAED,SAAS,CAAC,oBAAoB,CAAC,IAAI,uBAAuB;IAE1D,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IACvF,QAAQ,CAAC,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAE5F,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAIlD,iBAAiB;cAOP,OAAO;IAKzB,kBAAkB,IAAI,SAAS,CAAC,MAAM,CAAC;IAIvC,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC;CAI7D"}

package/dist/columns/DataGridColumnComponent.js

@@ -37,6 +37,7 @@ export class DataGridColumnComponent extends Component {
             width: this.width,
             sortable: !this.nonSortable,
             editable: this.getEditContentTemplate !== undefined && (typeof nonEditable !== 'function' ? !nonEditable : x => !nonEditable(x)),
+            getMenuItemsTemplate: this.getMenuItemsTemplate?.bind(this),
             getContentTemplate: this.getContentTemplate.bind(this),
             getEditContentTemplate: this.getEditContentTemplate?.bind(this),
             generateCsvHeading: this.generateCsvHeading.bind(this),

package/dist/custom-elements.json

@@ -738,6 +738,11 @@
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "resizeController",
+					"type": "ResizeController<Promise<void>>",
+					"default": "\"new ResizeController(this, {\\n\\t\\tcallback: async ([entry]) => {\\n\\t\\t\\t// It is necessary to defer the callback to avoid\\n\\t\\t\\t// this resize-observer triggering other resize-observers in a loop\\n\\t\\t\\tawait new Promise(r => requestIdleCallback(r))\\n\\t\\t\\tthis.column.widthInPixels = entry?.contentRect.width ?? 0\\n\\t\\t}\\n\\t})\""
+				},
 				{
 					"name": "template",
 					"description": "The template rendered into renderRoot. Invoked on each update to perform rendering tasks.",
@@ -844,16 +849,17 @@
 					"type": "boolean",
 					"default": "false"
 				},
-				{
-					"name": "icon",
-					"type": "MaterialIcon | undefined"
-				},
 				{
 					"name": "disabled",
 					"description": "Whether the list item is disabled",
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "icon",
+					"description": "Icon to be displayed in the list item",
+					"type": "MaterialIcon | undefined"
+				},
 				{
 					"name": "preventClickOnSpace",
 					"description": "Whether the list item should prevent click on space",
@@ -877,11 +883,6 @@
 					"type": "SlotController",
 					"default": "\"new SlotController(this)\""
 				},
-				{
-					"name": "icon",
-					"attribute": "icon",
-					"type": "MaterialIcon | undefined"
-				},
 				{
 					"name": "role",
 					"type": "\"menuitem\"",
@@ -899,6 +900,12 @@
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "icon",
+					"attribute": "icon",
+					"description": "Icon to be displayed in the list item",
+					"type": "MaterialIcon | undefined"
+				},
 				{
 					"name": "preventClickOnSpace",
 					"attribute": "preventClickOnSpace",
@@ -915,11 +922,6 @@
 					"name": "",
 					"description": "Default slot for content"
 				}
-			],
-			"cssParts": [
-				{
-					"name": "icon"
-				}
 			]
 		},
 		{
@@ -3697,6 +3699,10 @@
 					"name": "menuOpen",
 					"type": "boolean"
 				},
+				{
+					"name": "resizeController",
+					"type": "ResizeController<Promise<void>>"
+				},
 				{
 					"name": "template",
 					"description": "The template rendered into renderRoot. Invoked on each update to perform rendering tasks.",
@@ -3775,16 +3781,17 @@
 					"type": "boolean",
 					"default": "false"
 				},
-				{
-					"name": "icon",
-					"type": "MaterialIcon | undefined"
-				},
 				{
 					"name": "disabled",
 					"description": "Whether the list item is disabled",
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "icon",
+					"description": "Icon to be displayed in the list item",
+					"type": "MaterialIcon | undefined"
+				},
 				{
 					"name": "preventClickOnSpace",
 					"description": "Whether the list item should prevent click on space",
@@ -3808,11 +3815,6 @@
 					"type": "SlotController",
 					"default": "\"new SlotController(this)\""
 				},
-				{
-					"name": "icon",
-					"attribute": "icon",
-					"type": "MaterialIcon | undefined"
-				},
 				{
 					"name": "role",
 					"type": "\"menuitem\"",
@@ -3830,6 +3832,12 @@
 					"type": "boolean",
 					"default": "false"
 				},
+				{
+					"name": "icon",
+					"attribute": "icon",
+					"description": "Icon to be displayed in the list item",
+					"type": "MaterialIcon | undefined"
+				},
 				{
 					"name": "preventClickOnSpace",
 					"attribute": "preventClickOnSpace",
@@ -3846,11 +3854,6 @@
 					"name": "",
 					"description": "Default slot for content"
 				}
-			],
-			"cssParts": [
-				{
-					"name": "icon"
-				}
 			]
 		},
 		{