@3mo/data-grid 0.5.5 → 0.5.7

package/dist/DataGrid.js

@@ -98,6 +98,8 @@ export var DataGridEditability;
  *
  * @cssprop --mo-data-grid-min-visible-rows - The minimum number of visible rows. Default to 2.5.
  * @cssprop --mo-data-grid-footer-background - The background of the footer.
+ * @cssprop --mo-data-grid-cell-padding - The inline padding of the cells. Default to 3px.
+ * @cssprop --mo-data-grid-column-sub-row-indentation - The indentation of the first column in the sub row. Default to 10px.
  *
  * @fires dataChange {CustomEvent<Array<TData>>}
  * @fires selectionChange {CustomEvent<Array<TData>>}
@@ -142,11 +144,10 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         this.cellFontSize = DataGrid_1.cellRelativeFontSize.value;
         this.rowHeight = DataGrid_1.rowHeight.value;
         this.slotController = new SlotController(this, async () => {
-            var _a;
             this.hasSums;
             this.hasFabs;
             await this.updateComplete;
-            this.style.setProperty('--mo-data-grid-fab-slot-width', `${((_a = this.renderRoot.querySelector('slot[name=fab]')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 75}px`);
+            this.style.setProperty('--mo-data-grid-fab-slot-width', `${this.renderRoot.querySelector('slot[name=fab]')?.getBoundingClientRect().width || 75}px`);
         });
         this.instanceofAttributeController = new InstanceofAttributeController(this);
         this.smallScreenObserverController = new MediaQueryController(this, '(max-width: 768px)');
@@ -155,11 +156,10 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         // eslint-disable-next-line @typescript-eslint/member-ordering
         this.lastScrollElementTop = 0;
         this.handleScroll = (e) => {
-            var _a;
             if (this.preventFabCollapse === false) {
                 if (!e.composed) {
                     e.preventDefault();
-                    (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('scroll', { composed: true, bubbles: true }));
+                    e.target?.dispatchEvent(new Event('scroll', { composed: true, bubbles: true }));
                     if (this.hasFabs) {
                         const targetElement = e.composedPath()[0];
                         const scrollTop = targetElement.scrollTop;
@@ -227,8 +227,8 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return Array.isArray(subValue) && subValue.length > 0 ? subValue : undefined;
     }
     hasDetail(data) {
-        var _a, _b, _c;
-        return !!this.getSubData(data) || ((_b = (_a = this.hasDataDetail) === null || _a === void 0 ? void 0 : _a.call(this, data)) !== null && _b !== void 0 ? _b : [undefined, html.nothing].includes((_c = this.getRowDetailsTemplate) === null || _c === void 0 ? void 0 : _c.call(this, data)) === false);
+        return !!this.getSubData(data) || (this.hasDataDetail?.(data) ??
+            [undefined, html.nothing].includes(this.getRowDetailsTemplate?.(data)) === false);
     }
     get allRowDetailsOpen() {
         return this.openDetailedData.length === this.detailedData.length;
@@ -275,7 +275,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     }
     handleEdit(data, dataSelector, value) {
         const row = this.rows.find(r => r.data === data);
-        const cell = row === null || row === void 0 ? void 0 : row.cells.find(c => c.dataSelector === dataSelector);
+        const cell = row?.cells.find(c => c.dataSelector === dataSelector);
         if (row && cell && value !== undefined && cell.value !== value) {
             row.requestUpdate();
             setValueByKeyPath(data, dataSelector, value);
@@ -312,14 +312,12 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return this.filterElements.length > 0;
     }
     get hasSums() {
-        var _a;
-        const hasSums = !!this.columns.find(c => c.sumHeading) || !!this.querySelector('* [slot="sum"]') || !!((_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="sum"] > *'));
+        const hasSums = !!this.columns.find(c => c.sumHeading) || !!this.querySelector('* [slot="sum"]') || !!this.renderRoot?.querySelector('slot[name="sum"] > *');
         this.toggleAttribute('hasSums', hasSums);
         return hasSums;
     }
     get hasFabs() {
-        var _a;
-        const hasFabs = !!this.querySelector('* [slot=fab]') || !!((_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#fab *:not(slot[name=fab])'));
+        const hasFabs = !!this.querySelector('* [slot=fab]') || !!this.renderRoot?.querySelector('#fab *:not(slot[name=fab])');
         this.toggleAttribute('hasFabs', hasFabs);
         return hasFabs;
     }
@@ -330,13 +328,12 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return this.hasPagination;
     }
     get pageSize() {
-        var _a;
         const dynamicPageSize = (pageSize) => this.supportsDynamicPageSize ? pageSize : DataGrid_1.pageSize.value;
         if (!this.pagination) {
             return dynamicPageSize(this.data.length);
         }
         if (this.pagination === 'auto') {
-            const rowsHeight = (_a = this.rowsContainer) === null || _a === void 0 ? void 0 : _a.clientHeight;
+            const rowsHeight = this.rowsContainer?.clientHeight;
             const rowHeight = this.rowHeight;
             const pageSize = Math.floor((rowsHeight || 0) / rowHeight) || 1;
             return dynamicPageSize(pageSize);
@@ -358,10 +355,9 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return this.page !== this.maxPage;
     }
     updated(...parameters) {
-        var _a, _b, _c;
-        (_a = this.header) === null || _a === void 0 ? void 0 : _a.requestUpdate();
-        (_b = this.sidePanel) === null || _b === void 0 ? void 0 : _b.requestUpdate();
-        (_c = this.footer) === null || _c === void 0 ? void 0 : _c.requestUpdate();
+        this.header?.requestUpdate();
+        this.sidePanel?.requestUpdate();
+        this.footer?.requestUpdate();
         this.rows.forEach(row => row.requestUpdate());
         return super.updated(...parameters);
     }
@@ -372,186 +368,185 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         this.setPage(1);
     }
     static get styles() {
-        return css `
-			:host {
-				--mo-data-grid-column-details-width: 20px;
-				--mo-data-grid-column-selection-width: 40px;
-				--mo-data-grid-column-more-width: 20px;
-
-				--mo-data-grid-header-height: 32px;
-				--mo-data-grid-footer-min-height: 40px;
-				--mo-data-grid-toolbar-padding: 0px 14px 14px 14px;
-				--mo-data-grid-border: 1px solid var(--mo-color-transparent-gray-3);
-
-				/* --mo-data-grid-columns Generated in JS */
-				--mo-data-grid-columns-gap: 6px;
-
-				--mo-data-grid-row-tree-line-width: 8px;
-				--mo-details-data-grid-start-margin: 26px;
-				--mo-data-grid-cell-padding: 3px;
-
-				--mo-data-grid-selection-background: rgba(var(--mo-color-accent-base), 0.5);
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				overflow-x: hidden;
-			}
-
-			:host([data-theme=light]) {
-				--mo-data-grid-alternating-background: rgba(var(--mo-color-foreground-base), 0.05);
-			}
-
-			:host([data-theme=dark]) {
-				--mo-data-grid-alternating-background: rgba(var(--mo-color-background-base), 0.2);
-			}
-
-			:host([preventVerticalContentScroll]) mo-scroller {
-				overflow-y: hidden;
-			}
-
-			:host([preventVerticalContentScroll]) mo-scroller::part(container) {
-				position: relative;
-			}
-
-			:host(:not([selectionMode="none"])) {
-				--mo-data-grid-row-tree-line-width: 18px;
-			}
-
-			:host([hasDetails]) {
-				--mo-data-grid-row-tree-line-width: 18px;
-			}
-
-			#toolbar {
-				position: relative;
-				padding: var(--mo-data-grid-toolbar-padding);
-			}
-
-			#toolbar mo-icon-button {
-				align-self: flex-start;
-				color: var(--mo-color-gray);
-			}
-
-			#flexSelectionToolbar {
-				background: var(--mo-color-surface);
-				position: absolute;
-				inset: 0px;
-				width: 100%;
-				height: 100%;
-				z-index: 1;
-			}
-
-			#flexSelectionToolbar > mo-flex {
-				background: var(--mo-data-grid-selection-background);
-				height: 100%;
-				align-items: center;
-			}
-
-			#flexSelectionToolbar mo-icon-button {
-				align-self: center;
-				color: var(--mo-color-foreground);
-			}
-
-			#flexActions {
-				align-items: center;
-				justify-content: center;
-				padding-inline: 14px 6px;
-				margin: 6px 0;
-				cursor: pointer;
-				background: var(--mo-color-accent-transparent);
-				height: calc(100% - calc(2 * 6px));
-				max-height: 45px;
-			}
-
-			#fab {
-				position: absolute;
-				top: -72px;
-				inset-inline-end: 16px;
-				transition: var(--mo-data-grid-fab-transition, 250ms);
-			}
-
-			:host([hasFooter]) #fab {
-				top: -28px;
-			}
-
-			:host([fabSlotCollapsed][hasFabs]) #fab {
-				transform: scale(0);
-				opacity: 0;
-			}
-
-			mo-data-grid-footer {
-				transition: var(--mo-data-grid-fab-transition, 250ms);
-			}
-
-			:host([hasSums][hasFabs]:not([fabSlotCollapsed])) mo-data-grid-footer {
-				--mo-data-grid-footer-trailing-padding: calc(var(--mo-data-grid-fab-slot-width, 56px) + 16px);
-			}
-
-			slot[name=fab] {
-				display: block;
-				z-index: 1;
-			}
-
-			mo-empty-state, ::slotted(mo-empty-state) {
-				height: 100%;
-			}
-
-			#overlayModeContainer {
-				position: relative;
-				height: 100%;
-				width: 100%;
-			}
-
-			#overlayModeContainer mo-data-grid-side-panel {
-				position: absolute;
-				inset: 0;
-				width: 100%;
-				height: 100%;
-				z-index: 1;
-				background-color: var(--mo-color-surface);
-			}
+        return css `
+			:host {
+				--mo-data-grid-column-details-width: 20px;
+				--mo-data-grid-column-selection-width: 40px;
+				--mo-data-grid-column-more-width: 20px;
+
+				--mo-data-grid-header-height: 32px;
+				--mo-data-grid-footer-min-height: 40px;
+				--mo-data-grid-toolbar-padding: 0px 14px 14px 14px;
+				--mo-data-grid-border: 1px solid var(--mo-color-transparent-gray-3);
+
+				/* --mo-data-grid-columns Generated in JS */
+				--mo-data-grid-columns-gap: 6px;
+
+				--mo-data-grid-row-tree-line-width: 8px;
+				--mo-details-data-grid-start-margin: 26px;
+
+				--mo-data-grid-selection-background: rgba(var(--mo-color-accent-base), 0.5);
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				overflow-x: hidden;
+			}
+
+			:host([data-theme=light]) {
+				--mo-data-grid-alternating-background: rgba(var(--mo-color-foreground-base), 0.05);
+			}
+
+			:host([data-theme=dark]) {
+				--mo-data-grid-alternating-background: rgba(var(--mo-color-background-base), 0.2);
+			}
+
+			:host([preventVerticalContentScroll]) mo-scroller {
+				overflow-y: hidden;
+			}
+
+			:host([preventVerticalContentScroll]) mo-scroller::part(container) {
+				position: relative;
+			}
+
+			:host(:not([selectionMode="none"])) {
+				--mo-data-grid-row-tree-line-width: 18px;
+			}
+
+			:host([hasDetails]) {
+				--mo-data-grid-row-tree-line-width: 18px;
+			}
+
+			#toolbar {
+				position: relative;
+				padding: var(--mo-data-grid-toolbar-padding);
+			}
+
+			#toolbar mo-icon-button {
+				align-self: flex-start;
+				color: var(--mo-color-gray);
+			}
+
+			#flexSelectionToolbar {
+				background: var(--mo-color-surface);
+				position: absolute;
+				inset: 0px;
+				width: 100%;
+				height: 100%;
+				z-index: 1;
+			}
+
+			#flexSelectionToolbar > mo-flex {
+				background: var(--mo-data-grid-selection-background);
+				height: 100%;
+				align-items: center;
+			}
+
+			#flexSelectionToolbar mo-icon-button {
+				align-self: center;
+				color: var(--mo-color-foreground);
+			}
+
+			#flexActions {
+				align-items: center;
+				justify-content: center;
+				padding-inline: 14px 6px;
+				margin: 6px 0;
+				cursor: pointer;
+				background: var(--mo-color-accent-transparent);
+				height: calc(100% - calc(2 * 6px));
+				max-height: 45px;
+			}
+
+			#fab {
+				position: absolute;
+				top: -72px;
+				inset-inline-end: 16px;
+				transition: var(--mo-data-grid-fab-transition, 250ms);
+			}
+
+			:host([hasFooter]) #fab {
+				top: -28px;
+			}
+
+			:host([fabSlotCollapsed][hasFabs]) #fab {
+				transform: scale(0);
+				opacity: 0;
+			}
+
+			mo-data-grid-footer {
+				transition: var(--mo-data-grid-fab-transition, 250ms);
+			}
+
+			:host([hasSums][hasFabs]:not([fabSlotCollapsed])) mo-data-grid-footer {
+				--mo-data-grid-footer-trailing-padding: calc(var(--mo-data-grid-fab-slot-width, 56px) + 16px);
+			}
+
+			slot[name=fab] {
+				display: block;
+				z-index: 1;
+			}
+
+			mo-empty-state, ::slotted(mo-empty-state) {
+				height: 100%;
+			}
+
+			#overlayModeContainer {
+				position: relative;
+				height: 100%;
+				width: 100%;
+			}
+
+			#overlayModeContainer mo-data-grid-side-panel {
+				position: absolute;
+				inset: 0;
+				width: 100%;
+				height: 100%;
+				z-index: 1;
+				background-color: var(--mo-color-surface);
+			}
 		`;
     }
     get template() {
-        return html `
-			<slot name='column' hidden ${observeMutation(() => this.requestUpdate())}>${this.columnsTemplate}</slot>
-			${this.toolbarTemplate}
-			${this.smallScreenObserverController.matches ? this.overlayModeTemplate : this.splitterModeTemplate}
+        return html `
+			<slot name='column' hidden ${observeMutation(() => this.requestUpdate())}>${this.columnsTemplate}</slot>
+			${this.toolbarTemplate}
+			${this.smallScreenObserverController.matches ? this.overlayModeTemplate : this.splitterModeTemplate}
 		`;
     }
     get splitterModeTemplate() {
-        return html `
-			<mo-splitter direction='horizontal-reversed' ${style({ height: '100%' })} .resizerTemplate=${html `
-				<mo-splitter-resizer-line style='--mo-splitter-resizer-line-thickness: 1px; --mo-splitter-resizer-line-idle-background: var(--mo-color-transparent-gray-3); --mo-splitter-resizer-line-horizontal-transform: scaleX(5);'></mo-splitter-resizer-line>
-			`}>
-				${cache(this.sidePanelTab === undefined ? html.nothing : html `
-					<mo-splitter-item size='min(25%, 300px)' min='max(15%, 250px)' max='clamp(100px, 50%, 750px)'>
-						${this.sidePanelTemplate}
-					</mo-splitter-item>
-				`)}
-
-				<mo-splitter-item min='0px' ${style({ position: 'relative' })}>
-					${this.dataGridTemplate}
-				</mo-splitter-item>
-			</mo-splitter>
+        return html `
+			<mo-splitter direction='horizontal-reversed' ${style({ height: '100%' })} .resizerTemplate=${html `
+				<mo-splitter-resizer-line style='--mo-splitter-resizer-line-thickness: 1px; --mo-splitter-resizer-line-idle-background: var(--mo-color-transparent-gray-3); --mo-splitter-resizer-line-horizontal-transform: scaleX(5);'></mo-splitter-resizer-line>
+			`}>
+				${cache(this.sidePanelTab === undefined ? html.nothing : html `
+					<mo-splitter-item size='min(25%, 300px)' min='max(15%, 250px)' max='clamp(100px, 50%, 750px)'>
+						${this.sidePanelTemplate}
+					</mo-splitter-item>
+				`)}
+
+				<mo-splitter-item min='0px' ${style({ position: 'relative' })}>
+					${this.dataGridTemplate}
+				</mo-splitter-item>
+			</mo-splitter>
 		`;
     }
     get overlayModeTemplate() {
-        return html `
-			<mo-flex id='overlayModeContainer'>
-				${this.dataGridTemplate}
-				${this.sidePanelTab === undefined ? html.nothing : this.sidePanelTemplate}
-			</mo-flex>
+        return html `
+			<mo-flex id='overlayModeContainer'>
+				${this.dataGridTemplate}
+				${this.sidePanelTab === undefined ? html.nothing : this.sidePanelTemplate}
+			</mo-flex>
 		`;
     }
     get sidePanelTemplate() {
-        return html `
-			<mo-data-grid-side-panel
-				.dataGrid=${this}
-				tab=${ifDefined(this.sidePanelTab)}
-			>
-				<slot slot='settings' name='settings'>${this.settingsDefaultTemplate}</slot>
-				<slot slot='filter' name='filter'>${this.filtersDefaultTemplate}</slot>
-			</mo-data-grid-side-panel>
+        return html `
+			<mo-data-grid-side-panel
+				.dataGrid=${this}
+				tab=${ifDefined(this.sidePanelTab)}
+			>
+				<slot slot='settings' name='settings'>${this.settingsDefaultTemplate}</slot>
+				<slot slot='filter' name='filter'>${this.filtersDefaultTemplate}</slot>
+			</mo-data-grid-side-panel>
 		`;
     }
     get settingsDefaultTemplate() {
@@ -570,40 +565,40 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         // These also update the respective attributes for now
         this.hasSums;
         this.hasFabs;
-        return html `
-			<slot name='fab' @slotchange=${() => { this.hasSums; this.hasFabs; }}></slot>
+        return html `
+			<slot name='fab' @slotchange=${() => { this.hasSums; this.hasFabs; }}></slot>
 		`;
     }
     get contentTemplate() {
         return !this.data.length ? this.noContentTemplate : this.rowsTemplate;
     }
     get noContentTemplate() {
-        return html `
-			<slot name='error-no-content'>
-				<mo-empty-state icon='youtube_searched_for'>${t('No results')}</mo-empty-state>
-			</slot>
+        return html `
+			<slot name='error-no-content'>
+				<mo-empty-state icon='youtube_searched_for'>${t('No results')}</mo-empty-state>
+			</slot>
 		`;
     }
     get dataGridTemplate() {
         this.provideCssColumnsProperties();
         this.toggleAttribute('hasDetails', this.hasDetails);
-        return html `
-			<mo-flex ${style({ flex: '1', position: 'relative' })}>
-				<mo-grid ${style({ flex: '1' })} rows='* auto'>
-					<mo-scroller ${style({ minHeight: 'var(--mo-data-grid-content-min-height, calc(var(--mo-data-grid-min-visible-rows, 2.5) * var(--mo-data-grid-row-height) + var(--mo-data-grid-header-height)))' })}>
-						<mo-grid ${style({ height: '100%' })} rows='auto *'>
-							${this.headerTemplate}
-							${this.contentTemplate}
-						</mo-grid>
-					</mo-scroller>
-					${this.footerTemplate}
-				</mo-grid>
-			</mo-flex>
+        return html `
+			<mo-flex ${style({ flex: '1', position: 'relative' })}>
+				<mo-grid ${style({ flex: '1' })} rows='* auto'>
+					<mo-scroller ${style({ minHeight: 'var(--mo-data-grid-content-min-height, calc(var(--mo-data-grid-min-visible-rows, 2.5) * var(--mo-data-grid-row-height) + var(--mo-data-grid-header-height)))' })}>
+						<mo-grid ${style({ height: '100%' })} rows='auto *'>
+							${this.headerTemplate}
+							${this.contentTemplate}
+						</mo-grid>
+					</mo-scroller>
+					${this.footerTemplate}
+				</mo-grid>
+			</mo-flex>
 		`;
     }
     get headerTemplate() {
-        return this.headerHidden ? html.nothing : html `
-			<mo-data-grid-header .dataGrid=${this}></mo-data-grid-header>
+        return this.headerHidden ? html.nothing : html `
+			<mo-data-grid-header .dataGrid=${this}></mo-data-grid-header>
 		`;
     }
     get rowsTemplate() {
@@ -612,27 +607,28 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         const content = shallVirtualize === false
             ? this.renderData.map(getRowTemplate)
             : html `<mo-virtualized-scroller .items=${this.renderData} .getItemTemplate=${getRowTemplate}></mo-virtualized-scroller>`;
-        return html `
-			<mo-scroller id='rowsContainer'
-				${style({ gridRow: '2', gridColumn: '1 / last-line', overflowX: 'hidden' })}
-				${observeResize(() => this.requestUpdate())}
-				@scroll=${this.handleScroll}
-			>
-				${content}
-			</mo-scroller>
+        return html `
+			<mo-scroller id='rowsContainer'
+				${style({ gridRow: '2', gridColumn: '1 / last-line', overflowX: 'hidden' })}
+				${observeResize(() => this.requestUpdate())}
+				@scroll=${this.handleScroll}
+			>
+				${content}
+			</mo-scroller>
 		`;
     }
-    getRowTemplate(data, index) {
-        return staticHtml `
-			<${this.rowElementTag} part='row'
-				.dataGrid=${this}
-				.data=${data}
-				?data-has-alternating-background=${index !== undefined && this.hasAlternatingBackground && index % 2 === 1}
-				?data-grid-has-details=${this.hasDetails}
-				?selected=${live(this.selectedData.includes(data))}
-				?detailsOpen=${live(this.openDetailedData.includes(data))}
-				@detailsOpenChange=${(event) => this.handleRowDetailsOpenChange(data, event.detail)}
-			></${this.rowElementTag}>
+    getRowTemplate(data, index, level = 0) {
+        return staticHtml `
+			<${this.rowElementTag} part='row'
+				.level=${level}
+				.dataGrid=${this}
+				.data=${data}
+				?data-has-alternating-background=${index !== undefined && this.hasAlternatingBackground && index % 2 === 1}
+				?data-grid-has-details=${this.hasDetails}
+				?selected=${live(this.selectedData.includes(data))}
+				?detailsOpen=${live(this.openDetailedData.includes(data))}
+				@detailsOpenChange=${(event) => this.handleRowDetailsOpenChange(data, event.detail)}
+			></${this.rowElementTag}>
 		`;
     }
     handleRowDetailsOpenChange(data, open) {
@@ -647,30 +643,30 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
             : this.openDetailedData.filter(d => d !== data);
     }
     get footerTemplate() {
-        return html `
-			<mo-flex ${style({ position: 'relative' })}>
-				<mo-flex id='fab' direction='vertical-reversed' gap='8px'>
-					${this.fabTemplate}
-				</mo-flex>
-				${this.hasFooter === false ? html.nothing : html `
-					<mo-data-grid-footer
-						.dataGrid=${this}
-						page=${this.page}
-					>
-						<slot name='sum' slot='sum'>${this.sumDefaultTemplate}</slot>
-					</mo-data-grid-footer>
-				`}
-			</mo-flex>
+        return html `
+			<mo-flex ${style({ position: 'relative' })}>
+				<mo-flex id='fab' direction='vertical-reversed' gap='8px'>
+					${this.fabTemplate}
+				</mo-flex>
+				${this.hasFooter === false ? html.nothing : html `
+					<mo-data-grid-footer
+						.dataGrid=${this}
+						page=${this.page}
+					>
+						<slot name='sum' slot='sum'>${this.sumDefaultTemplate}</slot>
+					</mo-data-grid-footer>
+				`}
+			</mo-flex>
 		`;
     }
     get sumsData() {
         return this.selectedData.length > 0 ? this.selectedData : this.renderData;
     }
     get sumsTemplate() {
-        return html `
-			<mo-flex direction='horizontal' gap='10px' wrap='wrap-reverse' alignItems='center' ${style({ padding: '2px 4px' })}>
-				${this.columns.map(column => this.getSumTemplate(column))}
-			</mo-flex>
+        return html `
+			<mo-flex direction='horizontal' gap='10px' wrap='wrap-reverse' alignItems='center' ${style({ padding: '2px 4px' })}>
+				${this.columns.map(column => this.getSumTemplate(column))}
+			</mo-flex>
 		`;
     }
     getSumTemplate(column) {
@@ -682,24 +678,24 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
             .filter(n => isNaN(n) === false)
             .reduce(((a, b) => a + b), 0)
             || 0;
-        return html `
-			<mo-data-grid-footer-sum heading=${column.sumHeading + ''} ${style({ color: this.selectedData.length > 0 ? 'var(--mo-color-accent)' : 'currentColor' })}>
-				${column.getSumTemplate(sum)}
-			</mo-data-grid-footer-sum>
+        return html `
+			<mo-data-grid-footer-sum heading=${column.sumHeading + ''} ${style({ color: this.selectedData.length > 0 ? 'var(--mo-color-accent)' : 'currentColor' })}>
+				${column.getSumTemplate(sum)}
+			</mo-data-grid-footer-sum>
 		`;
     }
     get toolbarTemplate() {
-        return this.hasToolbar === false ? html.nothing : html `
-			<mo-flex id='toolbar' direction='horizontal' gap='8px' wrap='wrap' justifyContent='end' alignItems='center'>
-				<mo-flex direction='horizontal' alignItems='inherit' gap='8px' wrap='wrap' ${style({ flex: '1' })}>
-					<slot name='toolbar'>${this.toolbarDefaultTemplate}</slot>
-				</mo-flex>
-				<mo-flex direction='horizontal' gap='8px'>
-					<slot name='toolbarAction'>${this.toolbarActionDefaultTemplate}</slot>
-					${this.toolbarActionsTemplate}
-					${this.selectionToolbarTemplate}
-				</mo-flex>
-			</mo-flex>
+        return this.hasToolbar === false ? html.nothing : html `
+			<mo-flex id='toolbar' direction='horizontal' gap='8px' wrap='wrap' justifyContent='end' alignItems='center'>
+				<mo-flex direction='horizontal' alignItems='inherit' gap='8px' wrap='wrap' ${style({ flex: '1' })}>
+					<slot name='toolbar'>${this.toolbarDefaultTemplate}</slot>
+				</mo-flex>
+				<mo-flex direction='horizontal' gap='8px'>
+					<slot name='toolbarAction'>${this.toolbarActionDefaultTemplate}</slot>
+					${this.toolbarActionsTemplate}
+					${this.selectionToolbarTemplate}
+				</mo-flex>
+			</mo-flex>
 		`;
     }
     get toolbarDefaultTemplate() {
@@ -712,42 +708,42 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return html.nothing;
     }
     get selectionToolbarTemplate() {
-        return this.selectionToolbarDisabled === true || this.selectedData.length === 0 ? html.nothing : html `
-			<mo-flex id='flexSelectionToolbar'>
-				<mo-flex direction='horizontal' gap='30px' ${style({ placeSelf: 'stretch' })}>
-					<div ${style({ fontWeight: '500', margin: '0 6px' })}>
-						${t('${count:pluralityNumber} entries selected', { count: this.selectedData.length })}
-					</div>
-					${!this.getRowContextMenuTemplate ? html.nothing : html `
-						<mo-flex id='flexActions' direction='horizontal' @click=${(e) => { var _a, _b; return ContextMenu.open(e, (_b = (_a = this.getRowContextMenuTemplate) === null || _a === void 0 ? void 0 : _a.call(this, this.selectedData)) !== null && _b !== void 0 ? _b : html.nothing); }}>
-							<div ${style({ flex: '1' })}>${t('Options')}</div>
-							<mo-icon-button dense icon='arrow_drop_down' ${style({ display: 'flex', alignItems: 'center', justifyContent: 'center' })}></mo-icon-button>
-						</mo-flex>
-					`}
-					<div ${style({ flex: '1' })}></div>
-					<mo-icon-button icon='close'
-						${tooltip(t('Deselect All'))}
-						@click=${() => this.deselectAll()}
-					></mo-icon-button>
-				</mo-flex>
-			</mo-flex>
+        return this.selectionToolbarDisabled === true || this.selectedData.length === 0 ? html.nothing : html `
+			<mo-flex id='flexSelectionToolbar'>
+				<mo-flex direction='horizontal' gap='30px' ${style({ placeSelf: 'stretch' })}>
+					<div ${style({ fontWeight: '500', margin: '0 6px' })}>
+						${t('${count:pluralityNumber} entries selected', { count: this.selectedData.length })}
+					</div>
+					${!this.getRowContextMenuTemplate ? html.nothing : html `
+						<mo-flex id='flexActions' direction='horizontal' @click=${(e) => ContextMenu.open(e, this.getRowContextMenuTemplate?.(this.selectedData) ?? html.nothing)}>
+							<div ${style({ flex: '1' })}>${t('Options')}</div>
+							<mo-icon-button dense icon='arrow_drop_down' ${style({ display: 'flex', alignItems: 'center', justifyContent: 'center' })}></mo-icon-button>
+						</mo-flex>
+					`}
+					<div ${style({ flex: '1' })}></div>
+					<mo-icon-button icon='close'
+						${tooltip(t('Deselect All'))}
+						@click=${() => this.deselectAll()}
+					></mo-icon-button>
+				</mo-flex>
+			</mo-flex>
 		`;
     }
     get toolbarActionsTemplate() {
-        return html `
-			${!this.hasFilters ? html.nothing : html `
-				<mo-icon-button icon='filter_list'
-					${tooltip(t('More Filters'))}
-					${style({ color: this.sidePanelTab === DataGridSidePanelTab.Filters ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
-					@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === DataGridSidePanelTab.Filters ? undefined : DataGridSidePanelTab.Filters)}
-				></mo-icon-button>
-			`}
-
-			<mo-icon-button icon='settings'
-				${tooltip(t('Settings'))}
-				${style({ color: this.sidePanelTab === DataGridSidePanelTab.Settings ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
-				@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === DataGridSidePanelTab.Settings ? undefined : DataGridSidePanelTab.Settings)}
-			></mo-icon-button>
+        return html `
+			${!this.hasFilters ? html.nothing : html `
+				<mo-icon-button icon='filter_list'
+					${tooltip(t('More Filters'))}
+					${style({ color: this.sidePanelTab === DataGridSidePanelTab.Filters ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
+					@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === DataGridSidePanelTab.Filters ? undefined : DataGridSidePanelTab.Filters)}
+				></mo-icon-button>
+			`}
+
+			<mo-icon-button icon='settings'
+				${tooltip(t('Settings'))}
+				${style({ color: this.sidePanelTab === DataGridSidePanelTab.Settings ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
+				@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === DataGridSidePanelTab.Settings ? undefined : DataGridSidePanelTab.Settings)}
+			></mo-icon-button>
 		`;
     }
     // The reason for not doing this in the CSS is that we need to trim all the 0px values out of the columns
@@ -788,7 +784,10 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     getSortingDefinition(column) {
         const sorting = this.getSorting();
         const definition = sorting.find(s => s.selector === (column.sortDataSelector || column.dataSelector));
-        return !definition ? undefined : Object.assign(Object.assign({}, definition), { rank: sorting.indexOf(definition) + 1 });
+        return !definition ? undefined : {
+            ...definition,
+            rank: sorting.indexOf(definition) + 1
+        };
     }
     *getFlattenedData() {
         if (!this.subDataGridDataSelector) {
@@ -815,15 +814,14 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     get sortedData() {
         const sorting = this.getSorting();
         const sortedData = [...this.data];
-        if (!(sorting === null || sorting === void 0 ? void 0 : sorting.length)) {
+        if (!sorting?.length) {
             return sortedData;
         }
         return sortedData.sort((a, b) => {
-            var _a, _b;
             for (const sortCriteria of sorting) {
                 const { selector, strategy } = sortCriteria;
-                const aValue = (_a = getValueByKeyPath(a, selector)) !== null && _a !== void 0 ? _a : Infinity;
-                const bValue = (_b = getValueByKeyPath(b, selector)) !== null && _b !== void 0 ? _b : Infinity;
+                const aValue = getValueByKeyPath(a, selector) ?? Infinity;
+                const bValue = getValueByKeyPath(b, selector) ?? Infinity;
                 if (aValue < bValue) {
                     return strategy === DataGridSortingStrategy.Ascending ? -1 : 1;
                 }
@@ -844,13 +842,12 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return this.sortedData.slice(from, to);
     }
     get elementExtractedColumns() {
-        var _a;
         if (!this.columnsSlot) {
             return [];
         }
         const children = this.columnsSlot.children.length > 0 ? Array.from(this.columnsSlot.children) : undefined;
         const assigned = this.columnsSlot.assignedElements().length > 0 ? Array.from(this.columnsSlot.assignedElements()) : undefined;
-        return Array.from((_a = assigned !== null && assigned !== void 0 ? assigned : children) !== null && _a !== void 0 ? _a : [])
+        return Array.from(assigned ?? children ?? [])
             .filter((c) => {
             const isColumn = c instanceof DataGridColumn;
             if (isColumn) {