@3mo/data-grid 0.5.9 → 0.5.10

package/dist/DataGrid.js

@@ -1,6 +1,6 @@
 var DataGrid_1;
 import { __decorate } from "tslib";
-import { property, component, Component, html, css, live, query, ifDefined, event, queryAll, style, literal, staticHtml, cache } from '@a11d/lit';
+import { property, component, Component, html, css, live, query, ifDefined, event, style, literal, staticHtml, cache } from '@a11d/lit';
 import { NotificationComponent } from '@a11d/lit-application';
 import { LocalStorage } from '@a11d/local-storage';
 import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
@@ -171,6 +171,12 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
             }
         };
     }
+    get rows() {
+        const root = this.shallVirtualize
+            ? this.renderRoot.querySelector('mo-virtualized-scroller')?.renderRoot.firstElementChild
+            : this.renderRoot;
+        return [...root?.querySelectorAll('[part=row]') ?? []];
+    }
     setPage(page) {
         this.page = page;
         this.pageChange.dispatch(page);
@@ -368,185 +374,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-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() {
@@ -565,70 +571,72 @@ 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 shallVirtualize() {
+        return !this.preventVerticalContentScroll && this.renderData.length > this.virtualizationThreshold;
+    }
     get rowsTemplate() {
         const getRowTemplate = (data, index) => this.getRowTemplate(data, index);
-        const shallVirtualize = !this.preventVerticalContentScroll && this.renderData.length > this.virtualizationThreshold;
-        const content = shallVirtualize === false
+        const content = this.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, 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}>
+        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) {
@@ -643,30 +651,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) {
@@ -678,24 +686,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() {
@@ -708,42 +716,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) => 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>
+        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
@@ -1043,9 +1051,6 @@ __decorate([
         }
     })
 ], DataGrid.prototype, "rowHeight", void 0);
-__decorate([
-    queryAll('[mo-data-grid-row]')
-], DataGrid.prototype, "rows", void 0);
 __decorate([
     query('mo-data-grid-header')
 ], DataGrid.prototype, "header", void 0);