@3mo/data-grid 0.2.3 → 0.2.5

package/dist/DataGridSidePanel.js

@@ -24,117 +24,117 @@ let DataGridSidePanel = class DataGridSidePanel extends Component {
                 this.dataGrid.requestUpdate();
                 await this.dataGrid.updateComplete;
             };
-            return html `
-			<mo-checkbox ${style({ height: '30px' })}
-				label=${column.heading}
-				?checked=${column.hidden === false}
-				@change=${change}
-			></mo-checkbox>
+            return html `
+			<mo-checkbox ${style({ height: '30px' })}
+				label=${column.heading}
+				?checked=${column.hidden === false}
+				@change=${change}
+			></mo-checkbox>
 		`;
         };
     }
     static get styles() {
-        return css `
-			:host {
-				display: inline-block !important;
-				transition: 250ms;
-				width: 100%;
-				height: 100%;
-				transform-origin: right center;
-			}
-
-			:host(:not([hidden])) {
-				border-inline-start: var(--mo-data-grid-border);
-				background: var(--mo-color-transparent-gray-1);
-				opacity: 1;
-			}
-
-			:host([hidden]) {
-				opacity: 0;
-				transform: scale(0, 1);
-				width: 0;
-			}
-
-			#flexHeading {
-				border-top: var(--mo-data-grid-border);
-				border-bottom: var(--mo-data-grid-border);
-				height: var(--mo-data-grid-header-height);
-				padding-inline-start: 14px;
-			}
-
-			mo-scroller {
-				width: calc(100% - calc(2 * 14px));
-				padding: 0 14px;
-				margin-top: 14px;
-				overflow-x: hidden;
-			}
-
-			mo-scroller::part(container) {
-				width: calc(100% - calc(2 * 14px));
-			}
-
-			mo-section mo-checkbox {
-				margin-inline-start: -6px;
-			}
-
-			mo-section mo-icon-button {
-				margin-inline-start: -10px;
-			}
+        return css `
+			:host {
+				display: inline-block !important;
+				transition: 250ms;
+				width: 100%;
+				height: 100%;
+				transform-origin: right center;
+			}
+
+			:host(:not([hidden])) {
+				border-inline-start: var(--mo-data-grid-border);
+				background: var(--mo-color-transparent-gray-1);
+				opacity: 1;
+			}
+
+			:host([hidden]) {
+				opacity: 0;
+				transform: scale(0, 1);
+				width: 0;
+			}
+
+			#flexHeading {
+				border-top: var(--mo-data-grid-border);
+				border-bottom: var(--mo-data-grid-border);
+				height: var(--mo-data-grid-header-height);
+				padding-inline-start: 14px;
+			}
+
+			mo-scroller {
+				width: calc(100% - calc(2 * 14px));
+				padding: 0 14px;
+				margin-top: 14px;
+				overflow-x: hidden;
+			}
+
+			mo-scroller::part(container) {
+				width: calc(100% - calc(2 * 14px));
+			}
+
+			mo-section mo-checkbox {
+				margin-inline-start: -6px;
+			}
+
+			mo-section mo-icon-button {
+				margin-inline-start: -10px;
+			}
 		`;
     }
     get template() {
-        return html `
-			<mo-flex ${style({ height: '100%' })}>
-				${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? nothing : html `
-					<mo-tab-bar
-						value=${ifDefined(this.dataGrid.sidePanelTab)}
-						@change=${(e) => { var _a; return this.dataGrid.navigateToSidePanelTab((_a = e.detail) !== null && _a !== void 0 ? _a : "settings" /* DataGridSidePanelTab.Settings */); }}
-					>
-						<mo-tab icon='filter_list' value=${"filters" /* DataGridSidePanelTab.Filters */}></mo-tab>
-						<mo-tab icon='settings' value=${"settings" /* DataGridSidePanelTab.Settings */}></mo-tab>
-					</mo-tab-bar>
-				`}
-
-				${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? nothing : html `
-					<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
-						<mo-heading typography='heading6' ${style({ width: '*', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? 'Extended Filters' : 'Settings')}</mo-heading>
-						<mo-icon-button icon='close' dense
-							${tooltip(t('Close'))}
-							${style({ cursor: 'pointer', color: 'var(--mo-color-gray)' })}
-							@click=${() => this.dataGrid.navigateToSidePanelTab(undefined)}
-						></mo-icon-button>
-					</mo-flex>
-				`}
-
-				<mo-scroller ${style({ height: '*' })}>
-					${this.dataGrid.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? this.filtersTemplate : this.settingsTemplate}
-				</mo-scroller>
-			</mo-flex>
+        return html `
+			<mo-flex ${style({ height: '100%' })}>
+				${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? nothing : html `
+					<mo-tab-bar
+						value=${ifDefined(this.dataGrid.sidePanelTab)}
+						@change=${(e) => { var _a; return this.dataGrid.navigateToSidePanelTab((_a = e.detail) !== null && _a !== void 0 ? _a : "settings" /* DataGridSidePanelTab.Settings */); }}
+					>
+						<mo-tab icon='filter_list' value=${"filters" /* DataGridSidePanelTab.Filters */}></mo-tab>
+						<mo-tab icon='settings' value=${"settings" /* DataGridSidePanelTab.Settings */}></mo-tab>
+					</mo-tab-bar>
+				`}
+
+				${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? nothing : html `
+					<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
+						<mo-heading typography='heading6' ${style({ width: '*', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? 'Extended Filters' : 'Settings')}</mo-heading>
+						<mo-icon-button icon='close' dense
+							${tooltip(t('Close'))}
+							${style({ cursor: 'pointer', color: 'var(--mo-color-gray)' })}
+							@click=${() => this.dataGrid.navigateToSidePanelTab(undefined)}
+						></mo-icon-button>
+					</mo-flex>
+				`}
+
+				<mo-scroller ${style({ height: '*' })}>
+					${this.dataGrid.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? this.filtersTemplate : this.settingsTemplate}
+				</mo-scroller>
+			</mo-flex>
 		`;
     }
     get filtersTemplate() {
-        return html `
-			<mo-flex gap='14px'>
-				<slot name='filter'></slot>
-			</mo-flex>
+        return html `
+			<mo-flex gap='14px'>
+				<slot name='filter'></slot>
+			</mo-flex>
 		`;
     }
     get settingsTemplate() {
-        return html `
-			<mo-flex gap='14px'>
-				<slot name='settings'></slot>
-
-				<mo-section heading=${t('Columns')}>
-					${this.dataGrid.columns.map(this.getColumnTemplate)}
-				</mo-section>
-
-				<mo-section heading='Tools'>
-					<mo-icon-button icon='file_download'
-						${tooltip('Export as Excel file')}
-						@click=${() => this.dataGrid.exportExcelFile()}
-					></mo-icon-button>
-				</mo-section>
-			</mo-flex>
+        return html `
+			<mo-flex gap='14px'>
+				<slot name='settings'></slot>
+
+				<mo-section heading=${t('Columns')}>
+					${this.dataGrid.columns.map(this.getColumnTemplate)}
+				</mo-section>
+
+				<mo-section heading='Tools'>
+					<mo-icon-button icon='file_download'
+						${tooltip('Export as Excel file')}
+						@click=${() => this.dataGrid.exportExcelFile()}
+					></mo-icon-button>
+				</mo-section>
+			</mo-flex>
 		`;
     }
 };

package/dist/FieldSelectDataGridPageSize.js

@@ -4,13 +4,13 @@ import { component, html, property, nothing } from '@a11d/lit';
 import { FieldSelect } from '@3mo/select-field';
 let FieldSelectDataGridPageSize = FieldSelectDataGridPageSize_1 = class FieldSelectDataGridPageSize extends FieldSelect {
     get optionsTemplate() {
-        return html `
-			${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? nothing : html `
-				<mo-option value='auto'>Auto</mo-option>
-			`}
-			${FieldSelectDataGridPageSize_1.data.map(size => html `
-				<mo-option value=${size}>${size.format()}</mo-option>
-			`)}
+        return html `
+			${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? nothing : html `
+				<mo-option value='auto'>Auto</mo-option>
+			`}
+			${FieldSelectDataGridPageSize_1.data.map(size => html `
+				<mo-option value=${size}>${size.format()}</mo-option>
+			`)}
 		`;
     }
 };

package/dist/columns/DataGridColumnBoolean.js

@@ -19,18 +19,18 @@ let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridColumn {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
-        return html `
-			<mo-flex justifyContent='center' ${style({ height: '100%' })}>
-				<mo-icon icon=${value ? this.trueIcon : this.falseIcon} ${style({ color: value ? this.trueIconColor : this.falseIconColor })}></mo-icon>
-			</mo-flex>
+        return html `
+			<mo-flex justifyContent='center' ${style({ height: '100%' })}>
+				<mo-icon icon=${value ? this.trueIcon : this.falseIcon} ${style({ color: value ? this.trueIconColor : this.falseIconColor })}></mo-icon>
+			</mo-flex>
 		`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-checkbox label=${this.heading} data-focus
-				?checked=${value}
-				@change=${(e) => this.handleEdit(e.detail === 'checked', data)}
-			></mo-checkbox>
+        return html `
+			<mo-checkbox label=${this.heading} data-focus
+				?checked=${value}
+				@change=${(e) => this.handleEdit(e.detail === 'checked', data)}
+			></mo-checkbox>
 		`;
     }
 };

package/dist/columns/DataGridColumnCurrency.js

@@ -13,17 +13,17 @@ let DataGridColumnCurrency = class DataGridColumnCurrency extends DataGridColumn
         return html `${(value !== null && value !== void 0 ? value : 0).formatAsCurrency(this.currency)}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-currency dense data-focus
-				label=${this.heading}
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-currency>
+        return html `
+			<mo-field-currency dense data-focus
+				label=${this.heading}
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-currency>
 		`;
     }
     getSumTemplate(sum) {
-        return html `
-			<span ${style({ fontWeight: '500', color: 'var(--mo-color-accent)' })}>${sum.formatAsCurrency(this.currency)}</span>
+        return html `
+			<span ${style({ fontWeight: '500', color: 'var(--mo-color-accent)' })}>${sum.formatAsCurrency(this.currency)}</span>
 		`;
     }
 };

package/dist/columns/DataGridColumnDate.js

@@ -16,13 +16,13 @@ let DataGridColumnDate = class DataGridColumnDate extends DataGridColumn {
         return html `${value ? (_a = value.formatAsDate()) !== null && _a !== void 0 ? _a : '' : ''}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-date dense data-focus
-				?hideDatePicker=${this.hideDatePicker}
-				label=${this.heading}
-				.value=${value}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-date>
+        return html `
+			<mo-field-date dense data-focus
+				?hideDatePicker=${this.hideDatePicker}
+				label=${this.heading}
+				.value=${value}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-date>
 		`;
     }
 };

package/dist/columns/DataGridColumnDeletion.d.ts

@@ -0,0 +1,23 @@
+import { DataGridColumn } from './DataGridColumn.js';
+/**
+ * @element mo-data-grid-column-deletion
+ *
+ * @attr prevent - Prevents the deletion button from being displayed
+ *
+ * @fires delete
+ */
+export declare class DataGridColumnDeletion<TData> extends DataGridColumn<TData, never> {
+    readonly delete: EventDispatcher<TData>;
+    prevent: boolean;
+    width: string;
+    nonSortable: boolean;
+    nonEditable: boolean;
+    getContentTemplate: (_: never, data?: TData) => import("lit-html").HTMLTemplateResult;
+    getEditContentTemplate: undefined;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-data-grid-column-deletion': DataGridColumnDeletion<unknown>;
+    }
+}
+//# sourceMappingURL=DataGridColumnDeletion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridColumnDeletion.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnDeletion.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAMpD;;;;;;GAMG;AACH,qBACa,sBAAsB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAEpB,OAAO,UAAQ;IAEnC,KAAK,SAAS;IACd,WAAW,UAAO;IAClB,WAAW,UAAO;IAE3B,kBAAkB,MAAO,KAAK,SAAS,KAAK,2CAK3C;IAED,sBAAsB,YAAY;CAClC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAA;KAC/D;CACD"}

package/dist/columns/{DataGridColumnDelete.js → DataGridColumnDeletion.js}

@@ -7,16 +7,19 @@ Localizer.register("de" /* LanguageCode.German */, {
     'Delete position': 'Position entfernen'
 });
 /**
- * @element mo-data-grid-column-delete
+ * @element mo-data-grid-column-deletion
  *
- * @attr prevent - Prevents the delete button from being displayed
+ * @attr prevent - Prevents the deletion button from being displayed
  *
  * @fires delete
  */
-let DataGridColumnDelete = class DataGridColumnDelete extends DataGridColumn {
+let DataGridColumnDeletion = class DataGridColumnDeletion extends DataGridColumn {
     constructor() {
         super(...arguments);
         this.prevent = false;
+        this.width = '40px';
+        this.nonSortable = true;
+        this.nonEditable = true;
         this.getContentTemplate = (_, data) => this.prevent ? nothing : html `
 		<mo-icon-button icon='delete' ${tooltip('Delete position')}
 			${style({ color: 'var(--mo-color-gray)', height: '40px' })}
@@ -28,11 +31,11 @@ let DataGridColumnDelete = class DataGridColumnDelete extends DataGridColumn {
 };
 __decorate([
     event()
-], DataGridColumnDelete.prototype, "delete", void 0);
+], DataGridColumnDeletion.prototype, "delete", void 0);
 __decorate([
     property({ type: Boolean })
-], DataGridColumnDelete.prototype, "prevent", void 0);
-DataGridColumnDelete = __decorate([
-    component('mo-data-grid-column-delete')
-], DataGridColumnDelete);
-export { DataGridColumnDelete };
+], DataGridColumnDeletion.prototype, "prevent", void 0);
+DataGridColumnDeletion = __decorate([
+    component('mo-data-grid-column-deletion')
+], DataGridColumnDeletion);
+export { DataGridColumnDeletion };

package/dist/columns/DataGridColumnImage.js

@@ -9,8 +9,8 @@ let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
-        return !value ? nothing : html `
-			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
+        return !value ? nothing : html `
+			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
 		`;
     }
 };

package/dist/columns/DataGridColumnNumber.js

@@ -9,11 +9,11 @@ let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumb
         return html `${Number.isFinite(value) ? (_a = value === null || value === void 0 ? void 0 : value.format()) !== null && _a !== void 0 ? _a : nothing : nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-number dense label=${this.heading} data-focus
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-number>
+        return html `
+			<mo-field-number dense label=${this.heading} data-focus
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-number>
 		`;
     }
     getSumTemplate(sum) {

package/dist/columns/DataGridColumnPercent.js

@@ -9,12 +9,12 @@ let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNu
         return html `${Number.isFinite(value) ? (_a = value === null || value === void 0 ? void 0 : value.formatAsPercent()) !== null && _a !== void 0 ? _a : nothing : nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-percent dense data-focus
-				label=${this.heading}
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-percent>
+        return html `
+			<mo-field-percent dense data-focus
+				label=${this.heading}
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-percent>
 		`;
     }
     getSumTemplate(sum) {

package/dist/columns/DataGridColumnText.js

@@ -8,11 +8,11 @@ let DataGridColumnText = class DataGridColumnText extends DataGridColumn {
         return html `${value !== null && value !== void 0 ? value : ''}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-text dense label=${this.heading} data-focus
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-text>
+        return html `
+			<mo-field-text dense label=${this.heading} data-focus
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-text>
 		`;
     }
 };

package/dist/columns/DataGridFooterSum.js

@@ -11,29 +11,29 @@ let DataGridFooterSum = class DataGridFooterSum extends Component {
         this.heading = '';
     }
     static get styles() {
-        return css `
-			:host {
-				display: flex;
-				flex-direction: column;
-				position: relative;
-				max-height: 100%;
-				line-height: 1em;
-			}
-
-			div {
-				color: var(--mo-color-foreground-transparent);
-				font-size: x-small;
-				text-transform: uppercase;
-				text-align: center;
-			}
+        return css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				position: relative;
+				max-height: 100%;
+				line-height: 1em;
+			}
+
+			div {
+				color: var(--mo-color-foreground-transparent);
+				font-size: x-small;
+				text-transform: uppercase;
+				text-align: center;
+			}
 		`;
     }
     get template() {
-        return html `
-			<div>${this.heading}</div>
-			<mo-flex direction='horizontal' justifyContent='center'>
-				<slot></slot>
-			</mo-flex>
+        return html `
+			<div>${this.heading}</div>
+			<mo-flex direction='horizontal' justifyContent='center'>
+				<slot></slot>
+			</mo-flex>
 		`;
     }
 };

package/dist/columns/index.d.ts

@@ -8,5 +8,5 @@ export * from './DataGridColumnImage.js';
 export * from './DataGridColumnNumber.js';
 export * from './DataGridColumnText.js';
 export * from './DataGridFooterSum.js';
-export * from './DataGridColumnDelete.js';
+export * from './DataGridColumnDeletion.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../columns/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../columns/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA"}

package/dist/columns/index.js

@@ -8,4 +8,4 @@ export * from './DataGridColumnImage.js';
 export * from './DataGridColumnNumber.js';
 export * from './DataGridColumnText.js';
 export * from './DataGridFooterSum.js';
-export * from './DataGridColumnDelete.js';
+export * from './DataGridColumnDeletion.js';

package/dist/rows/DataGridDefaultRow.js

@@ -3,48 +3,48 @@ import { css, component, html } from '@a11d/lit';
 import { DataGridRow } from './DataGridRow.js';
 let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
     static get styles() {
-        return css `
-			${super.styles}
-
-			mo-grid {
-				height: var(--mo-data-grid-row-height);
-				grid-template-columns: var(--mo-data-grid-columns);
-				column-gap: var(--mo-data-grid-columns-gap);
-			}
-
-			mo-flex {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-			}
-
-			#selectionContainer {
-				height: var(--mo-data-grid-row-height);
-			}
-
-			#detailsContainer [instanceof*=mo-data-grid] {
-				--mo-data-grid-header-background: rgba(var(--mo-color-foreground-base), 0.04);
-				--mo-data-grid-alternating-background: transparent;
-				--mo-data-grid-content-min-height: 0px;
-			}
-
-			#detailsContainer [instanceof*=mo-data-grid]:not([headerHidden]) {
-				background: var(--mo-color-transparent-gray-1);
-			}
-
-			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid]:not([headerHidden]) {
-				margin: 16px var(--mo-details-data-grid-start-margin);
-				width: calc(100% - calc(var(--mo-details-data-grid-start-margin) * 2));
-			}
-
-			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid] {
-				padding: 0px !important;
-			}
-
-			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid][headerHidden] {
-				margin-inline-start: var(--mo-details-data-grid-start-margin);
-				width: calc(100% - var(--mo-details-data-grid-start-margin));
-			}
+        return css `
+			${super.styles}
+
+			mo-grid {
+				height: var(--mo-data-grid-row-height);
+				grid-template-columns: var(--mo-data-grid-columns);
+				column-gap: var(--mo-data-grid-columns-gap);
+			}
+
+			mo-flex {
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+
+			#selectionContainer {
+				height: var(--mo-data-grid-row-height);
+			}
+
+			#detailsContainer [instanceof*=mo-data-grid] {
+				--mo-data-grid-header-background: rgba(var(--mo-color-foreground-base), 0.04);
+				--mo-data-grid-alternating-background: transparent;
+				--mo-data-grid-content-min-height: 0px;
+			}
+
+			#detailsContainer [instanceof*=mo-data-grid]:not([headerHidden]) {
+				background: var(--mo-color-transparent-gray-1);
+			}
+
+			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid]:not([headerHidden]) {
+				margin: 16px var(--mo-details-data-grid-start-margin);
+				width: calc(100% - calc(var(--mo-details-data-grid-start-margin) * 2));
+			}
+
+			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid] {
+				padding: 0px !important;
+			}
+
+			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid][headerHidden] {
+				margin-inline-start: var(--mo-details-data-grid-start-margin);
+				width: calc(100% - var(--mo-details-data-grid-start-margin));
+			}
 		`;
     }
     updated(...parameters) {
@@ -55,11 +55,11 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
         }
     }
     get rowTemplate() {
-        return html `
-			${this.detailsExpanderTemplate}
-			${this.selectionTemplate}
-			${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
-			${this.contextMenuIconButtonTemplate}
+        return html `
+			${this.detailsExpanderTemplate}
+			${this.selectionTemplate}
+			${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
+			${this.contextMenuIconButtonTemplate}
 		`;
     }
 };