@3mo/data-grid 0.5.13 → 0.5.15

package/dist/CsvGenerator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CsvGenerator.d.ts","sourceRoot":"","sources":["../CsvGenerator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7C,qBAAa,YAAY;IACxB,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;CAWrD"}
+{"version":3,"file":"CsvGenerator.d.ts","sourceRoot":"","sources":["../CsvGenerator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7C,qBAAa,YAAY;IACxB,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;CA0BrD"}

package/dist/CsvGenerator.js

@@ -1,13 +1,26 @@
 import { Downloader } from '@3mo/downloader';
 export class CsvGenerator {
     static generate(dataGrid) {
-        const csv = [
-            dataGrid.visibleColumns.map(c => c.heading),
-            ...dataGrid.data.map(data => dataGrid.visibleColumns.map(c => getValueByKeyPath(data, c.dataSelector)?.toString() ?? '').join(',')),
-        ].join('\n');
+        const flattenedData = [...dataGrid['getFlattenedData']()];
+        const maxLevel = Math.max(...flattenedData.map(d => d.level));
+        const [firstHeading, ...restHeadings] = dataGrid.visibleColumns.map(c => c.heading);
+        const rows = [
+            [firstHeading, ...Array.from({ length: maxLevel }).fill(''), ...restHeadings],
+            ...flattenedData.map(d => {
+                const nestedPadding = Array.from({ length: d.level }).fill('');
+                const childrenPadding = Array.from({ length: maxLevel - d.level }).fill('');
+                const [first, ...rest] = dataGrid.visibleColumns.flatMap(column => getValueByKeyPath(d.data, column.dataSelector));
+                return [
+                    ...nestedPadding,
+                    first,
+                    ...childrenPadding,
+                    ...rest
+                ];
+            })
+        ];
+        const csv = rows.map(row => row.join(',')).join('\n');
         // @ts-expect-error manifest can be undefined
-        const manifest = globalThis.manifest;
-        const fileName = (manifest?.short_name ?? '') + 'Export'.replace(/ /g, '_');
+        const fileName = (globalThis.manifest?.short_name ?? '') + 'Export'.replace(/ /g, '_');
         Downloader.download(`data:text/csv;charset=utf-8,${encodeURIComponent(csv)}`, `${fileName}.csv`);
     }
 }

package/dist/DataGrid.js

@@ -799,16 +799,16 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     }
     *getFlattenedData() {
         if (!this.subDataGridDataSelector) {
-            yield* this.data;
+            yield* this.data.map(d => ({ level: 0, data: d }));
             return;
         }
-        const flatten = (data) => {
+        const flatten = (data, level = 0) => {
             const subData = getValueByKeyPath(data, this.subDataGridDataSelector);
             return [
-                data,
+                { data, level },
                 ...!Array.isArray(subData)
                     ? []
-                    : subData.flatMap(flatten)
+                    : subData.flatMap(d => flatten(d, level + 1))
             ];
         };
         for (const data of this.data) {
@@ -817,7 +817,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return;
     }
     get flattenedData() {
-        return [...this.getFlattenedData()];
+        return [...this.getFlattenedData()].map(({ data }) => data);
     }
     get sortedData() {
         const sorting = this.getSorting();

package/dist/DataGridCell.d.ts

@@ -12,7 +12,7 @@ export declare class DataGridCell<TValue extends KeyPathValueOf<TData>, TData =
     column: ColumnDefinition<TData, TValue>;
     row: DataGridRow<TData, TDetailsElement>;
     private editing;
-    get dataGrid(): import("DataGrid.js").DataGrid<TData, TDetailsElement>;
+    get dataGrid(): import("./DataGrid.js").DataGrid<TData, TDetailsElement>;
     get data(): TData;
     get dataSelector(): object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | (Extract<keyof TData, `${number}`> extends infer T ? T extends Extract<keyof TData, `${number}`> ? T extends keyof TData ? `${T}.${object extends 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, `${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 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, `${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;
     private get cellIndex();

package/dist/DataGridCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAG/G,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,2DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}
+{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAG/G,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,6DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}

package/dist/DataGridCell.js

@@ -99,46 +99,46 @@ let DataGridCell = class DataGridCell extends Component {
         }
     }
     static get styles() {
-        return css `
-			:host {
-				position: relative;
-				padding-inline: var(--mo-data-grid-cell-padding, 3px);
-				user-select: none;
-				line-height: var(--mo-data-grid-row-height);
-				white-space: nowrap;
-				overflow: hidden !important;
-				text-overflow: ellipsis;
-				font-size: var(--mo-data-grid-cell-font-size);
-			}
-
-			:host(:not([isEditing]):focus) {
-				outline: 2px solid var(--mo-color-accent);
-			}
-
-			:host([isEditing]) {
-				display: grid;
-			}
-
-			:host([alignment=end]) {
-				text-align: end;
-			}
-
-			:host([alignment=start]) {
-				text-align: start
-			}
-
-			:host([alignment=center]) {
-				text-align: center;
-			}
-
-			:host > :first-child {
-				line-height: var(--mo-data-grid-row-height);
-			}
-
-			:host([isEditing]) > :first-child {
-				align-self: center;
-				justify-self: stretch;
-			}
+        return css `
+			:host {
+				position: relative;
+				padding-inline: var(--mo-data-grid-cell-padding, 3px);
+				user-select: none;
+				line-height: var(--mo-data-grid-row-height);
+				white-space: nowrap;
+				overflow: hidden !important;
+				text-overflow: ellipsis;
+				font-size: var(--mo-data-grid-cell-font-size);
+			}
+
+			:host(:not([isEditing]):focus) {
+				outline: 2px solid var(--mo-color-accent);
+			}
+
+			:host([isEditing]) {
+				display: grid;
+			}
+
+			:host([alignment=end]) {
+				text-align: end;
+			}
+
+			:host([alignment=start]) {
+				text-align: start
+			}
+
+			:host([alignment=center]) {
+				text-align: center;
+			}
+
+			:host > :first-child {
+				line-height: var(--mo-data-grid-row-height);
+			}
+
+			:host([isEditing]) > :first-child {
+				align-self: center;
+				justify-self: stretch;
+			}
 		`;
     }
     get tooltip() { return this.valueTextContent; }

package/dist/DataGridHeader.js

@@ -40,45 +40,45 @@ let DataGridHeader = class DataGridHeader extends Component {
         this.dataGrid.selectionChange.unsubscribe(this.handleDataGridSelectionChange);
     }
     static get styles() {
-        return css `
-			:host {
-				--mo-data-grid-header-separator-height: 15px;
-				--mo-data-grid-header-separator-width: 2px;
-				display: inherit;
-				font-size: small;
-			}
-
-			#header {
-				border-top: var(--mo-data-grid-border);
-				border-bottom: var(--mo-data-grid-border);
-				position: relative;
-				height: var(--mo-data-grid-header-height);
-				background: var(--mo-data-grid-header-background);
-			}
-
-			.headerContent {
-				padding: 0 var(--mo-data-grid-cell-padding, 3px);
-				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;
-			}
-
-			.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: 20px;
-				height: 20px;
-				aspect-ratio: 1 / 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
+        return css `
+			:host {
+				--mo-data-grid-header-separator-height: 15px;
+				--mo-data-grid-header-separator-width: 2px;
+				display: inherit;
+				font-size: small;
+			}
+
+			#header {
+				border-top: var(--mo-data-grid-border);
+				border-bottom: var(--mo-data-grid-border);
+				position: relative;
+				height: var(--mo-data-grid-header-height);
+				background: var(--mo-data-grid-header-background);
+			}
+
+			.headerContent {
+				padding: 0 var(--mo-data-grid-cell-padding, 3px);
+				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;
+			}
+
+			.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: 20px;
+				height: 20px;
+				aspect-ratio: 1 / 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
 		`;
     }
     get skeletonColumns() {
@@ -93,75 +93,75 @@ let DataGridHeader = class DataGridHeader extends Component {
         return this.dataGrid.dataColumnsWidths.join(' var(--mo-data-grid-columns-gap) ');
     }
     get template() {
-        return html `
-			<mo-grid id='header' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap)'>
-				${this.detailsExpanderTemplate}
-				${this.selectionTemplate}
-				${this.contentTemplate}
-				${this.moreTemplate}
-			</mo-grid>
+        return html `
+			<mo-grid id='header' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap)'>
+				${this.detailsExpanderTemplate}
+				${this.selectionTemplate}
+				${this.contentTemplate}
+				${this.moreTemplate}
+			</mo-grid>
 		`;
     }
     get detailsExpanderTemplate() {
-        return this.dataGrid.hasDetails === false ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'>
-				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? html.nothing : html `
-					<mo-icon-button dense ${style({ padding: '-10px 0px 0 -10px' })}
-						${style({ display: 'inherit' })}
-						icon=${this.dataGrid.allRowDetailsOpen ? 'unfold_less' : 'unfold_more'}
-						@click=${() => this.toggleAllDetails()}
-					></mo-icon-button>
-				`}
-			</mo-flex>
+        return this.dataGrid.hasDetails === false ? html.nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'>
+				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? html.nothing : html `
+					<mo-icon-button dense ${style({ padding: '-10px 0px 0 -10px' })}
+						${style({ display: 'inherit' })}
+						icon=${this.dataGrid.allRowDetailsOpen ? 'unfold_less' : 'unfold_more'}
+						@click=${() => this.toggleAllDetails()}
+					></mo-icon-button>
+				`}
+			</mo-flex>
 		`;
     }
     get selectionTemplate() {
-        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'>
-				${this.dataGrid.selectionMode !== DataGridSelectionMode.Multiple ? html.nothing : html `
-					<mo-checkbox ${style({ position: 'absolute' })} .selected=${this.selection} @change=${this.handleSelectionChange}></mo-checkbox>
-				`}
-			</mo-flex>
+        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'>
+				${this.dataGrid.selectionMode !== DataGridSelectionMode.Multiple ? html.nothing : html `
+					<mo-checkbox ${style({ position: 'absolute' })} .selected=${this.selection} @change=${this.handleSelectionChange}></mo-checkbox>
+				`}
+			</mo-flex>
 		`;
     }
     get contentTemplate() {
-        return html `
-			<mo-grid columns=${this.separatorAdjustedColumns}>
-				${join(this.dataGrid.visibleColumns.map(column => this.getHeaderCellTemplate(column)), index => html `
-					<mo-data-grid-header-separator
-						.dataGrid=${this.dataGrid}
-						.column=${this.dataGrid.visibleColumns[index]}
-						@columnUpdate=${() => this.dataGrid.requestUpdate()}
-					></mo-data-grid-header-separator>
-				`)}
-			</mo-grid>
+        return html `
+			<mo-grid columns=${this.separatorAdjustedColumns}>
+				${join(this.dataGrid.visibleColumns.map(column => this.getHeaderCellTemplate(column)), index => html `
+					<mo-data-grid-header-separator
+						.dataGrid=${this.dataGrid}
+						.column=${this.dataGrid.visibleColumns[index]}
+						@columnUpdate=${() => this.dataGrid.requestUpdate()}
+					></mo-data-grid-header-separator>
+				`)}
+			</mo-grid>
 		`;
     }
     getHeaderCellTemplate(column) {
         const sortingDefinition = this.dataGrid.getSortingDefinition(column);
         const sortIcon = !sortingDefinition ? undefined : sortingDefinition.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
         const sortingRank = !sortingDefinition || this.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
-        return html `
-			<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
-				${style({ overflow: 'hidden', position: 'relative', cursor: 'pointer', userSelect: 'none' })}
-				@click=${() => this.sort(column)}
-			>
-				<div class='headerContent' ${style({ width: '100%', textAlign: column.alignment })} title=${column.title || column.heading}>${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)' })} icon=${ifDefined(sortIcon)}></mo-icon>
-				`}
-			</mo-flex>
+        return html `
+			<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
+				${style({ overflow: 'hidden', position: 'relative', cursor: 'pointer', userSelect: 'none' })}
+				@click=${() => this.sort(column)}
+			>
+				<div class='headerContent' ${style({ width: '100%', textAlign: column.alignment })} title=${column.title || column.heading}>${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)' })} icon=${ifDefined(sortIcon)}></mo-icon>
+				`}
+			</mo-flex>
 		`;
     }
     get moreTemplate() {
-        return this.dataGrid.hasToolbar || this.dataGrid.sidePanelHidden ? html.nothing : html `
-			<mo-flex alignItems='center' justifyContent='center' ${style({ marginInlineEnd: '8px', cursor: 'pointer', position: 'relative' })}>
-				<mo-icon-button dense icon='settings' ${style({ color: 'var(--mo-color-accent)', fontSize: 'large' })}
-					@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
-				></mo-icon-button>
-			</mo-flex>
+        return this.dataGrid.hasToolbar || this.dataGrid.sidePanelHidden ? html.nothing : html `
+			<mo-flex alignItems='center' justifyContent='center' ${style({ marginInlineEnd: '8px', cursor: 'pointer', position: 'relative' })}>
+				<mo-icon-button dense icon='settings' ${style({ color: 'var(--mo-color-accent)', fontSize: 'large' })}
+					@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
+				></mo-icon-button>
+			</mo-flex>
 		`;
     }
     sort(column) {

package/dist/DataGridHeaderSeparator.js

@@ -17,55 +17,55 @@ let DataGridHeaderSeparator = DataGridHeaderSeparator_1 = class DataGridHeaderSe
         };
     }
     static get styles() {
-        return css `
-			div.separator {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				inset-inline-start: calc(var(--mo-data-grid-columns-gap) * -1);
-				width: var(--mo-data-grid-columns-gap);
-				height: 100%;
-				user-select: none;
-			}
-
-			.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(:not([disabled])) div.separator {
-				cursor: col-resize;
-			}
-
-			:host(:not([disabled])) .separator:hover .knob {
-				--mo-data-grid-header-separator-height: 30px;
-				--mo-data-grid-header-separator-width: 8px;
-				background-color: var(--mo-color-accent);
-				cursor: col-resize;
-			}
-
-			:host(:not([disabled])) .resizerOverlay {
-				position: fixed;
-				top: 0;
-				height: 100%;
-				background: var(--mo-color-gray);
-				width: 2px;
-			}
+        return css `
+			div.separator {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				inset-inline-start: calc(var(--mo-data-grid-columns-gap) * -1);
+				width: var(--mo-data-grid-columns-gap);
+				height: 100%;
+				user-select: none;
+			}
+
+			.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(:not([disabled])) div.separator {
+				cursor: col-resize;
+			}
+
+			:host(:not([disabled])) .separator:hover .knob {
+				--mo-data-grid-header-separator-height: 30px;
+				--mo-data-grid-header-separator-width: 8px;
+				background-color: var(--mo-color-accent);
+				cursor: col-resize;
+			}
+
+			:host(:not([disabled])) .resizerOverlay {
+				position: fixed;
+				top: 0;
+				height: 100%;
+				background: var(--mo-color-gray);
+				width: 2px;
+			}
 		`;
     }
     get template() {
         this.toggleAttribute('disabled', DataGridHeaderSeparator_1.disableResizing);
-        return html `
-			<div class='separator' @mousedown=${this.handleMouseDown}>
-				<div class='knob'></div>
-			</div>
-
-			${this.isResizing === false ? html.nothing : html `
-				<div class='resizerOverlay' ${style({ marginInlineStart: `${this.delta}px` })}></div>
-			`}
+        return html `
+			<div class='separator' @mousedown=${this.handleMouseDown}>
+				<div class='knob'></div>
+			</div>
+
+			${this.isResizing === false ? html.nothing : html `
+				<div class='resizerOverlay' ${style({ marginInlineStart: `${this.delta}px` })}></div>
+			`}
 		`;
     }
     handleMouseUp() {