@3mo/data-grid 0.2.4 → 0.2.5

package/dist/DataGrid.js

@@ -11,7 +11,7 @@ import { observeMutation } from '@3mo/mutation-observer';
 import { MediaQueryController } from '@3mo/media-query-observer';
 import { observeResize } from '@3mo/resize-observer';
 import { Localizer } from '@3mo/localization';
-import { contextMenu } from '@3mo/context-menu';
+import { ContextMenu } from '@3mo/context-menu';
 import { CsvGenerator, DataGridColumn } from './index.js';
 Localizer.register("en" /* LanguageCode.English */, {
     '${count:pluralityNumber} entries selected': [
@@ -333,189 +333,189 @@ 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: 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);
-
-				--mo-data-grid-row-height: ${DataGrid_1.rowHeight.value}px;
-				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);
-			}
-
-			/* Don't try to use ":nth-child(even)" as it won't work for virtualized data-grids */
-			[mo-data-grid-row][data-has-alternating-background] {
-				background: var(--mo-data-grid-alternating-background);
-			}
-
-			: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;
-			}
-
-			#flexToolbar {
-				position: relative;
-				padding: var(--mo-data-grid-toolbar-padding);
-			}
-
-			#flexToolbar 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;
-			}
-
-			#flexFab {
-				position: absolute;
-				top: -28px;
-				inset-inline-end: 16px;
-				transition: var(--mo-data-grid-fab-transition, 250ms);
-			}
-
-			:host([fabSlotCollapsed][hasFabs]) #flexFab {
-				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: 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);
+
+				--mo-data-grid-row-height: ${DataGrid_1.rowHeight.value}px;
+				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);
+			}
+
+			/* Don't try to use ":nth-child(even)" as it won't work for virtualized data-grids */
+			[mo-data-grid-row][data-has-alternating-background] {
+				background: var(--mo-data-grid-alternating-background);
+			}
+
+			: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;
+			}
+
+			#flexToolbar {
+				position: relative;
+				padding: var(--mo-data-grid-toolbar-padding);
+			}
+
+			#flexToolbar 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;
+			}
+
+			#flexFab {
+				position: absolute;
+				top: -28px;
+				inset-inline-end: 16px;
+				transition: var(--mo-data-grid-fab-transition, 250ms);
+			}
+
+			:host([fabSlotCollapsed][hasFabs]) #flexFab {
+				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 ? 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 ? 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 ? nothing : this.sidePanelTemplate}
-			</mo-flex>
+        return html `
+			<mo-flex id='overlayModeContainer'>
+				${this.dataGridTemplate}
+				${this.sidePanelTab === undefined ? 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() {
@@ -534,40 +534,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({ width: '*', position: 'relative' })}>
-				<mo-grid ${style({ height: '*' })} rows='* auto'>
-					<mo-scroller ${style({ minHeight: 'var(--mo-data-grid-content-min-height, calc(2.5 * var(--mo-data-grid-row-height) + var(--mo-data-grid-header-height)))', paddingBottom: '2px' })}>
-						<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({ width: '*', position: 'relative' })}>
+				<mo-grid ${style({ height: '*' })} rows='* auto'>
+					<mo-scroller ${style({ minHeight: 'var(--mo-data-grid-content-min-height, calc(2.5 * var(--mo-data-grid-row-height) + var(--mo-data-grid-header-height)))', paddingBottom: '2px' })}>
+						<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 ? nothing : html `
-			<mo-data-grid-header .dataGrid=${this}></mo-data-grid-header>
+        return this.headerHidden ? nothing : html `
+			<mo-data-grid-header .dataGrid=${this}></mo-data-grid-header>
 		`;
     }
     get rowsTemplate() {
@@ -576,26 +576,26 @@ 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' })}
-				${observeResize(() => this.requestUpdate())}
-				@scroll=${this.handleScroll}
-			>
-				${content}
-			</mo-scroller>
+        return html `
+			<mo-scroller id='rowsContainer'
+				${style({ gridRow: '2', gridColumn: '1 / last-line' })}
+				${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=${this.hasAlternatingBackground && index % 2 === 1}
-				?selected=${live(this.selectedData.includes(data))}
-				?detailsOpen=${live(this.openDetailedData.includes(data))}
-				@detailsOpenChange=${(event) => this.handleRowDetailsOpenChange(data, event)}
-			></${this.rowElementTag}>
+        return staticHtml `
+			<${this.rowElementTag} part='row'
+				.dataGrid=${this}
+				.data=${data}
+				?data-has-alternating-background=${this.hasAlternatingBackground && index % 2 === 1}
+				?selected=${live(this.selectedData.includes(data))}
+				?detailsOpen=${live(this.openDetailedData.includes(data))}
+				@detailsOpenChange=${(event) => this.handleRowDetailsOpenChange(data, event)}
+			></${this.rowElementTag}>
 		`;
     }
     handleRowDetailsOpenChange(data, event) {
@@ -613,20 +613,20 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         }
     }
     get footerTemplate() {
-        return html `
-			<mo-flex ${style({ position: 'relative' })}>
-				<mo-flex id='flexFab' direction='vertical-reversed' gap='8px'>
-					${this.fabTemplate}
-				</mo-flex>
-				${this.hasFooter === false ? 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='flexFab' direction='vertical-reversed' gap='8px'>
+					${this.fabTemplate}
+				</mo-flex>
+				${this.hasFooter === false ? 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 sumsTemplate() {
@@ -641,24 +641,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}>
-				${column.getSumTemplate(sum)}
-			</mo-data-grid-footer-sum>
+        return html `
+			<mo-data-grid-footer-sum heading=${column.sumHeading}>
+				${column.getSumTemplate(sum)}
+			</mo-data-grid-footer-sum>
 		`;
     }
     get toolbarTemplate() {
-        return this.hasToolbar === false ? nothing : html `
-			<mo-flex id='flexToolbar' direction='horizontal' gap='8px' wrap='wrap' justifyContent='end' alignItems='center'>
-				<mo-flex direction='horizontal' alignItems='inherit' gap='8px' wrap='wrap' ${style({ width: '*' })}>
-					<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 ? nothing : html `
+			<mo-flex id='flexToolbar' direction='horizontal' gap='8px' wrap='wrap' justifyContent='end' alignItems='center'>
+				<mo-flex direction='horizontal' alignItems='inherit' gap='8px' wrap='wrap' ${style({ width: '*' })}>
+					<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() {
@@ -671,42 +671,42 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return nothing;
     }
     get selectionToolbarTemplate() {
-        return this.selectionToolbarDisabled === true || this.selectedData.length === 0 ? 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 ? nothing : html `
-						<mo-flex id='flexActions' direction='horizontal' ${contextMenu(this.getRowContextMenuTemplate(this.selectedData))}>
-							<div ${style({ width: '*' })}>${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({ width: '*' })}></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 ? 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 ? 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 : nothing); }}>
+							<div ${style({ width: '*' })}>${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({ width: '*' })}></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 ? nothing : html `
-				<mo-icon-button icon='filter_list'
-					${tooltip(t('More Filters'))}
-					${style({ color: this.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
-					@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? undefined : "filters" /* DataGridSidePanelTab.Filters */)}
-				></mo-icon-button>
-			`}
-
-			<mo-icon-button icon='settings'
-				${tooltip(t('Settings'))}
-				${style({ color: this.sidePanelTab === "settings" /* DataGridSidePanelTab.Settings */ ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
-				@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === "settings" /* DataGridSidePanelTab.Settings */ ? undefined : "settings" /* DataGridSidePanelTab.Settings */)}
-			></mo-icon-button>
+        return html `
+			${!this.hasFilters ? nothing : html `
+				<mo-icon-button icon='filter_list'
+					${tooltip(t('More Filters'))}
+					${style({ color: this.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
+					@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? undefined : "filters" /* DataGridSidePanelTab.Filters */)}
+				></mo-icon-button>
+			`}
+
+			<mo-icon-button icon='settings'
+				${tooltip(t('Settings'))}
+				${style({ color: this.sidePanelTab === "settings" /* DataGridSidePanelTab.Settings */ ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
+				@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === "settings" /* DataGridSidePanelTab.Settings */ ? undefined : "settings" /* 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
@@ -971,26 +971,26 @@ function subDataGridSelectorChanged() {
     if (selector === undefined || !!this.getRowDetailsTemplate) {
         return;
     }
-    this.getRowDetailsTemplate = (data) => html `
-		<mo-data-grid ${style({ padding: '0px' })}
-			.data=${getValueByKeyPath(data, selector)}
-			headerHidden
-			sidePanelHidden
-			.columns=${this.columns}
-			.subDataGridDataSelector=${this.subDataGridDataSelector}
-			.hasDataDetail=${this.hasDataDetail}
-			.selectionMode=${this.selectionMode}
-			.isDataSelectable=${this.isDataSelectable}
-			?selectOnClick=${this.selectOnClick}
-			?selectionCheckboxesHidden=${this.selectionCheckboxesHidden}
-			?primaryContextMenuItemOnDoubleClick=${this.primaryContextMenuItemOnDoubleClick}
-			?multipleDetails=${this.multipleDetails}
-			?detailsOnClick=${this.detailsOnClick}
-			.getRowContextMenuTemplate=${this.getRowContextMenuTemplate}
-			editability=${this.editability}
-			@rowClick=${(e) => this.rowClick.dispatch(e.detail)}
-			@rowDoubleClick=${(e) => this.rowDoubleClick.dispatch(e.detail)}
-			@cellEdit=${(e) => this.cellEdit.dispatch(e.detail)}
-		></mo-data-grid>
+    this.getRowDetailsTemplate = (data) => html `
+		<mo-data-grid ${style({ padding: '0px' })}
+			.data=${getValueByKeyPath(data, selector)}
+			headerHidden
+			sidePanelHidden
+			.columns=${this.columns}
+			.subDataGridDataSelector=${this.subDataGridDataSelector}
+			.hasDataDetail=${this.hasDataDetail}
+			.selectionMode=${this.selectionMode}
+			.isDataSelectable=${this.isDataSelectable}
+			?selectOnClick=${this.selectOnClick}
+			?selectionCheckboxesHidden=${this.selectionCheckboxesHidden}
+			?primaryContextMenuItemOnDoubleClick=${this.primaryContextMenuItemOnDoubleClick}
+			?multipleDetails=${this.multipleDetails}
+			?detailsOnClick=${this.detailsOnClick}
+			.getRowContextMenuTemplate=${this.getRowContextMenuTemplate}
+			editability=${this.editability}
+			@rowClick=${(e) => this.rowClick.dispatch(e.detail)}
+			@rowDoubleClick=${(e) => this.rowDoubleClick.dispatch(e.detail)}
+			@cellEdit=${(e) => this.cellEdit.dispatch(e.detail)}
+		></mo-data-grid>
 	`;
 }