@3mo/data-grid 0.4.18 → 0.4.20

package/dist/DataGrid.js

@@ -85,6 +85,7 @@ export var DataGridEditability;
  * @attr preventFabCollapse - Whether the FAB should be prevented from collapsing.
  * @attr cellFontSize - The font size of the cells relative to the default font size. Defaults @see DataGrid.cellFontSize 's value which defaults to 0.8.
  * @attr rowHeight - The height of the rows in pixels. Defaults to @see DataGrid.rowHeight 's value which defaults to 35.
+ * @attr exportable - Whether the DataGrid is exportable. This will show an export button in the footer.
  *
  * @slot - Use this slot only for declarative DataGrid APIs e.g. setting ColumnDefinitions via `mo-data-grid-columns` tag.
  * @slot toolbar - The horizontal bar above DataGrid's contents.
@@ -136,6 +137,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         this.hasAlternatingBackground = DataGrid_1.hasAlternatingBackground.value;
         this.preventFabCollapse = false;
         this.fabSlotCollapsed = false;
+        this.exportable = false;
         this.cellFontSize = DataGrid_1.cellRelativeFontSize.value;
         this.rowHeight = DataGrid_1.rowHeight.value;
         this.slotController = new SlotController(this, async () => {
@@ -281,8 +283,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     }
     exportExcelFile() {
         try {
-            const selectors = this.visibleColumns.map(c => c.dataSelector);
-            CsvGenerator.generate(this.data, selectors);
+            CsvGenerator.generate(this);
             NotificationComponent.notifyInfo(t('Exporting excel file'));
         }
         catch (error) {
@@ -341,7 +342,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return this.pagination;
     }
     get hasFooter() {
-        const value = this.hasPagination || this.hasSums;
+        const value = this.hasPagination || this.hasSums || this.exportable;
         this.toggleAttribute('hasFooter', value);
         return value;
     }
@@ -369,186 +370,186 @@ 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-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);
+			}
 		`;
     }
     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() {
@@ -567,40 +568,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() {
@@ -609,26 +610,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', 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=${this.hasAlternatingBackground && index % 2 === 1}
-				?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'
+				.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.detail)}
+			></${this.rowElementTag}>
 		`;
     }
     handleRowDetailsOpenChange(data, open) {
@@ -643,30 +644,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 +679,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 +709,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) => { 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>
 		`;
     }
     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
@@ -1010,6 +1011,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DataGrid.prototype, "fabSlotCollapsed", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "exportable", void 0);
 __decorate([
     property({
         type: Number,
@@ -1055,27 +1059,27 @@ 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)}
-			@rowMiddleClick=${(e) => this.rowMiddleClick.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)}
+			@rowMiddleClick=${(e) => this.rowMiddleClick.dispatch(e.detail)}
+			@cellEdit=${(e) => this.cellEdit.dispatch(e.detail)}
+		></mo-data-grid>
 	`;
 }