@3mo/data-grid 0.1.4 → 0.2.0

package/dist/DataGrid.d.ts

@@ -4,7 +4,7 @@ import { InstanceofAttributeController } from '@3mo/instanceof-attribute-control
 import { SlotController } from '@3mo/slot-controller';
 import { ThemeController } from '@3mo/theme';
 import { MediaQueryController } from '@3mo/media-query-observer';
-import { ColumnDefinition, DataGridCell, DataGridRow, DataGridSidePanelTab } from './index.js';
+import { ColumnDefinition, DataGridCell, DataGridHeader, DataGridRow, DataGridSidePanelTab } from './index.js';
 export type DataGridPagination = 'auto' | number;
 export declare const enum DataGridSelectionMode {
     None = "none",
@@ -22,7 +22,7 @@ export declare const enum DataGridSelectionBehaviorOnDataChange {
 }
 export declare const enum DataGridEditability {
     Never = "never",
-    OnRowClick = "on-row-click",
+    Cell = "cell",
     Always = "always"
 }
 export type DataGridSorting<TData> = {
@@ -43,6 +43,7 @@ export type DataGridSorting<TData> = {
  * @attr isDataSelectable - Whether data of a given row is selectable.
  * @attr selectedData - The selected data.
  * @attr selectOnClick - Whether the row should be selected on click.
+ * @attr selectionCheckboxesHidden - Whether the selection checkboxes should be hidden. This activates selection on row click ignoring the `selectOnClick` attribute.
  * @attr selectionBehaviorOnDataChange - The behavior of the selection when the data changes.
  * @attr multipleDetails - Whether multiple details can be opened at the same time.
  * @attr subDataGridDataSelector - The key path of the sub data grid data.
@@ -75,10 +76,7 @@ export type DataGridSorting<TData> = {
  * @fires sidePanelClose {CustomEvent}
  * @fires sortingChange {CustomEvent<DataGridSorting<TData>>}
  * @fires rowClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowConnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDisconnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
  * @fires rowDoubleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowEdit {CustomEvent<DataGridRow<TData, TDetailsElement>>}
  * @fires cellEdit {CustomEvent<DataGridCell<any, TData, TDetailsElement>>}
  */
 export declare class DataGrid<TData, TDetailsElement extends Element | undefined = undefined> extends Component {
@@ -94,11 +92,8 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     readonly sidePanelOpen: EventDispatcher<DataGridSidePanelTab>;
     readonly sidePanelClose: EventDispatcher;
     readonly sortingChange: EventDispatcher<DataGridSorting<TData> | undefined>;
-    readonly rowConnected: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
-    readonly rowDisconnected: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
     readonly rowClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
     readonly rowDoubleClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
-    readonly rowEdit: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
     readonly cellEdit: EventDispatcher<DataGridCell<any, TData, TDetailsElement>>;
     data: TData[];
     columns: ColumnDefinition<TData>[];
@@ -111,6 +106,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     isDataSelectable?: (data: TData) => boolean;
     selectedData: TData[];
     selectOnClick: boolean;
+    selectionCheckboxesHidden: boolean;
     selectionBehaviorOnDataChange: DataGridSelectionBehaviorOnDataChange;
     getRowDetailsTemplate?: (data: TData) => HTMLTemplateResult;
     multipleDetails: boolean;
@@ -128,7 +124,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     preventFabCollapse: boolean;
     protected fabSlotCollapsed: boolean;
     readonly rows: Array<DataGridRow<TData, TDetailsElement>>;
-    private readonly header?;
+    readonly header?: DataGridHeader<TData>;
     private readonly rowsContainer?;
     private readonly footer?;
     private readonly sidePanel?;

package/dist/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAA8C,cAAc,EAA+C,kBAAkB,EAAS,MAAM,WAAW,CAAA;AAE9L,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAIhE,OAAO,EAAgB,gBAAgB,EAAE,YAAY,EAAkC,cAAc,EAAE,WAAW,EAAqB,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAqB/K,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAA;AAEhD,0BAAkB,qBAAqB;IACtC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACrB;AAED,0BAAkB,uBAAuB;IACxC,UAAU,eAAe;IACzB,SAAS,cAAc;CACvB;AAED,0BAAkB,qCAAqC;IACtD,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACrB;AAED,0BAAkB,mBAAmB;IACpC,KAAK,UAAU;IACf,IAAI,SAAS;IACb,MAAM,WAAW;CACjB;AAED,MAAM,MAAM,eAAe,CAAC,KAAK,IAAI;IACpC,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IAC1B,QAAQ,EAAE,uBAAuB,CAAA;CACjC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,QAAQ,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACtG,MAAM,CAAC,QAAQ,CAAC,SAAS,uBAAqD;IAC9E,MAAM,CAAC,QAAQ,CAAC,QAAQ,uBAAiF;IACzG,MAAM,CAAC,QAAQ,CAAC,wBAAwB,wBAA8D;IACtG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,uBAAuB,EAAE,MAAM,CAAK;IAErD,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACnD,QAAQ,CAAC,eAAe,EAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACxD,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,gBAAgB,EAAG,eAAe,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAA;IAC3E,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACxE,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,oBAAoB,CAAC,CAAA;IAC9D,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAA;IACzC,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,CAAA;IAC5E,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACxE,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9E,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAE5D,IAAI,UAAqB;IACzB,OAAO,4BAAuC;IAE7B,YAAY,UAAQ;IACpB,4BAA4B,UAAQ;IACpD,IAAI,SAAI;IACmF,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAE1H,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAA;IAE/B,aAAa,wBAA6B;IAC3C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAA;IAC5C,YAAY,UAAqB;IAC/B,aAAa,UAAQ;IACrB,yBAAyB,UAAQ;IAClD,6BAA6B,wCAA8C;IAE3D,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,kBAAkB,CAAA;IAC1D,eAAe,UAAQ;IACD,uBAAuB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAA;IACvC,cAAc,UAAQ;IACxB,SAAS,CAAC,gBAAgB,UAAqB;IAE9C,yBAAyB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,kBAAkB,CAAA;IACrE,mCAAmC,UAAQ;IAE3C,WAAW,sBAA4B;IAExD,YAAY,EAAE,oBAAoB,GAAG,SAAS,CAAA;IAC7B,eAAe,UAAQ;IACvB,wBAAwB,UAAQ;IAChC,wBAAwB,UAA0C;IAElE,kBAAkB,UAAQ;IACX,SAAS,CAAC,gBAAgB,UAAQ;IAE9C,QAAQ,CAAC,IAAI,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC5D,QAAQ,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAA;IAC5C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAa;IACvC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAuB;IAC3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAA0B;IAC3D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAiB;IAE1E,mBAAmB,CAAC,EAAE;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAA;IAExD,OAAO,CAAC,IAAI,EAAE,MAAM;IAKpB,gBAAgB,CAAC,IAAI,EAAE,MAAM;IAI7B,aAAa,CAAC,UAAU,CAAC,EAAE,kBAAkB;IAK7C,sBAAsB,CAAC,UAAU,CAAC,EAAE,kBAAkB;IAItD,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,iBAAiB,wCAAqC;IAalF,SAAS;IAMT,WAAW;IAIX,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;IAQzB,YAAY,CAAC,IAAI,EAAE,KAAK;IAIxB,IAAI,YAAY,YAEf;IAED,IAAI,UAAU,YAEb;IAED,SAAS,CAAC,IAAI,EAAE,KAAK;IAKrB,IAAI,iBAAiB,YAEpB;IAED,cAAc;IAId,eAAe;IAIf,gBAAgB;IAQhB,IAAI,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC;IAKrC,MAAM;IAIN,gBAAgB,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC;IAIjD,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAMlD,gCAAgC;IAMhC,cAAc;IAOd,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS;IAUlH,sBAAsB,CAAC,GAAG,CAAC,EAAE,oBAAoB;IAKjD,eAAe;IAWf,IAAI,YAAY,YAEf;IAED,IAAI,cAAc,YAEjB;IAED,IAAI,eAAe,cAElB;IAED,IAAI,cAAc,cAEjB;IAED,IAAI,UAAU,YAEb;IAED,IAAI,UAAU,YAEb;IAED,IAAI,OAAO,YAIV;IAED,IAAI,OAAO,YAIV;IAED,IAAI,aAAa,YAEhB;IAED,IAAI,uBAAuB,YAE1B;IAED,IAAI,QAAQ,WAgBX;IAED,IAAI,SAAS,YAEZ;IAED,IAAI,UAAU,WAEb;IAED,IAAI,OAAO,WAEV;IAED,IAAI,WAAW,YAEd;IAED,SAAS,CAAC,QAAQ,CAAC,cAAc,iBAK/B;IAEF,SAAS,CAAC,QAAQ,CAAC,6BAA6B,gCAA0C;IAE1F,SAAS,CAAC,QAAQ,CAAC,6BAA6B,uBAAuD;IAEvG,QAAQ,CAAC,eAAe,kBAA4B;cAEjC,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;cAQvD,YAAY,CAAC,KAAK,EAAE,cAAc;IAOrD,WAAoB,MAAM,kCA8IzB;IAED,cAAuB,QAAQ,yCAM9B;IAED,OAAO,KAAK,oBAAoB,GAgB/B;IAED,OAAO,KAAK,mBAAmB,GAO9B;IAED,OAAO,KAAK,iBAAiB,GAU5B;IAED,SAAS,KAAK,uBAAuB,uBAEpC;IAED,SAAS,KAAK,sBAAsB,uBAEnC;IAED,SAAS,KAAK,eAAe,uBAE5B;IAED,SAAS,KAAK,aAAa,6CAE1B;IAED,SAAS,KAAK,WAAW,yCAOxB;IAED,SAAS,KAAK,eAAe,yCAE5B;IAED,SAAS,KAAK,iBAAiB,yCAM9B;IAED,SAAS,KAAK,gBAAgB,yCAgB7B;IAED,SAAS,KAAK,cAAc,uBAI3B;IAED,OAAO,KAAK,YAAY,GAevB;IAED,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM;IAanD,SAAS,CAAC,0BAA0B,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC;IAgB7E,SAAS,KAAK,cAAc,yCAgB3B;IAED,IAAI,YAAY,yCAEf;IAED,cAAc,CAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC;IAkB9C,SAAS,KAAK,eAAe,uBAa5B;IAED,SAAS,KAAK,sBAAsB,uBAEnC;IAED,SAAS,KAAK,4BAA4B,uBAEzC;IAED,SAAS,KAAK,kBAAkB,uBAE/B;IAED,SAAS,KAAK,wBAAwB,uBAqBrC;IAED,SAAS,KAAK,sBAAsB,yCAgBnC;IAID,OAAO,CAAC,2BAA2B;IAKnC,IAAI,aAAa,aAOhB;IAED,IAAI,kBAAkB,uBAErB;IAED,IAAI,oBAAoB,uBAEvB;IAED,IAAI,iBAAiB,aAIpB;IAED,IAAI,eAAe,uBAElB;IAGD,OAAO,CAAC,oBAAoB,CAAI;IAChC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAe5B;IAED,SAAS,KAAK,UAAU,YAqBvB;IAED,IAAI,UAAU,YAOb;IAED,OAAO,KAAK,uBAAuB,GAelC;IAED,OAAO,KAAK,oBAAoB,GA2B/B;IAED,IAAI,cAAc,8BAEjB;IAED,IAAI,sBAAsB,YASzB;CACD;AAiCD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;KAC5C;CACD"}

package/dist/DataGrid.js

@@ -44,6 +44,7 @@ Localizer.register("de" /* LanguageCode.German */, {
  * @attr isDataSelectable - Whether data of a given row is selectable.
  * @attr selectedData - The selected data.
  * @attr selectOnClick - Whether the row should be selected on click.
+ * @attr selectionCheckboxesHidden - Whether the selection checkboxes should be hidden. This activates selection on row click ignoring the `selectOnClick` attribute.
  * @attr selectionBehaviorOnDataChange - The behavior of the selection when the data changes.
  * @attr multipleDetails - Whether multiple details can be opened at the same time.
  * @attr subDataGridDataSelector - The key path of the sub data grid data.
@@ -76,10 +77,7 @@ Localizer.register("de" /* LanguageCode.German */, {
  * @fires sidePanelClose {CustomEvent}
  * @fires sortingChange {CustomEvent<DataGridSorting<TData>>}
  * @fires rowClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowConnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDisconnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
  * @fires rowDoubleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowEdit {CustomEvent<DataGridRow<TData, TDetailsElement>>}
  * @fires cellEdit {CustomEvent<DataGridCell<any, TData, TDetailsElement>>}
  */
 let DataGrid = DataGrid_1 = class DataGrid extends Component {
@@ -93,6 +91,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         this.selectionMode = "none" /* DataGridSelectionMode.None */;
         this.selectedData = new Array();
         this.selectOnClick = false;
+        this.selectionCheckboxesHidden = false;
         this.selectionBehaviorOnDataChange = "reset" /* DataGridSelectionBehaviorOnDataChange.Reset */;
         this.multipleDetails = false;
         this.detailsOnClick = false;
@@ -276,12 +275,14 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return this.filterElements.length > 0;
     }
     get hasSums() {
-        const hasSums = !!this.columns.find(c => c.sumHeading) || !!this.querySelector('* [slot="sum"]') || !!this.renderRoot.querySelector('slot[name="sum"] > *');
+        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"] > *'));
         this.toggleAttribute('hasSums', hasSums);
         return hasSums;
     }
     get hasFabs() {
-        const hasFabs = !!this.querySelector('* [slot=fab]') || !!this.renderRoot.querySelector('#flexFab *:not(slot[name=fab])');
+        var _a;
+        const hasFabs = !!this.querySelector('* [slot=fab]') || !!((_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#flexFab *:not(slot[name=fab])'));
         this.toggleAttribute('hasFabs', hasFabs);
         return hasFabs;
     }
@@ -328,7 +329,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     firstUpdated(props) {
         super.firstUpdated(props);
         this.extractColumnsIfNotSetExplicitly();
-        this.rowEdit.subscribe(() => this.requestUpdate());
         this.cellEdit.subscribe(() => this.requestUpdate());
         this.setPage(1);
     }
@@ -727,7 +727,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return !this.hasDetails ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-details-width');
     }
     get selectionColumnWidth() {
-        return !this.hasSelection ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-selection-width');
+        return !this.hasSelection || this.selectionCheckboxesHidden ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-selection-width');
     }
     get dataColumnsWidths() {
         return this.visibleColumns
@@ -801,15 +801,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
             .filter(key => !key.startsWith('_'))
             .map(key => {
             const columnElement = document.createElement(getDefaultColumnElement(getValueByKeyPath(sampleData, key)));
+            columnElement.heading = key.replace(/([A-Z])/g, ' $1').charAt(0).toUpperCase() + key.replace(/([A-Z])/g, ' $1').slice(1);
+            columnElement.dataGrid = key;
+            const definition = columnElement.definition;
             columnElement.remove();
-            return {
-                heading: key.replace(/([A-Z])/g, ' $1').charAt(0).toUpperCase() + key.replace(/([A-Z])/g, ' $1').slice(1),
-                dataSelector: key,
-                width: '1fr',
-                hidden: false,
-                getContentTemplate: columnElement.getContentTemplate.bind(columnElement),
-                getEditContentTemplate: columnElement.getEditContentTemplate.bind(columnElement),
-            };
+            return definition;
         });
     }
     get visibleColumns() {
@@ -855,21 +851,12 @@ __decorate([
 __decorate([
     event()
 ], DataGrid.prototype, "sortingChange", void 0);
-__decorate([
-    event()
-], DataGrid.prototype, "rowConnected", void 0);
-__decorate([
-    event()
-], DataGrid.prototype, "rowDisconnected", void 0);
 __decorate([
     event()
 ], DataGrid.prototype, "rowClick", void 0);
 __decorate([
     event()
 ], DataGrid.prototype, "rowDoubleClick", void 0);
-__decorate([
-    event()
-], DataGrid.prototype, "rowEdit", void 0);
 __decorate([
     event()
 ], DataGrid.prototype, "cellEdit", void 0);
@@ -906,6 +893,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], DataGrid.prototype, "selectOnClick", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "selectionCheckboxesHidden", void 0);
 __decorate([
     property()
 ], DataGrid.prototype, "selectionBehaviorOnDataChange", void 0);
@@ -992,16 +982,14 @@ function subDataGridSelectorChanged() {
 			.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}
-			@rowConnected=${(e) => this.rowConnected.dispatch(e.detail)}
-			@rowDisconnected=${(e) => this.rowDisconnected.dispatch(e.detail)}
 			@rowClick=${(e) => this.rowClick.dispatch(e.detail)}
 			@rowDoubleClick=${(e) => this.rowDoubleClick.dispatch(e.detail)}
-			@rowEdit=${(e) => this.rowEdit.dispatch(e.detail)}
 			@cellEdit=${(e) => this.cellEdit.dispatch(e.detail)}
 		></mo-data-grid>
 	`;

package/dist/DataGridCell.d.ts

@@ -1,4 +1,4 @@
-import { Component } from '@a11d/lit';
+import { Component, HTMLTemplateResult } from '@a11d/lit';
 import { ColumnDefinition, DataGridRow } from './index.js';
 /**
  * @element mo-data-grid-cell
@@ -6,18 +6,28 @@ import { ColumnDefinition, DataGridRow } from './index.js';
  * @attr value
  * @attr column
  * @attr row
- * @attr editing
  */
 export declare class DataGridCell<TValue extends KeyPathValueOf<TData>, TData = any, TDetailsElement extends Element | undefined = undefined> extends Component {
     value: TValue;
     column: ColumnDefinition<TData, TValue>;
     row: DataGridRow<TData, TDetailsElement>;
-    editing: boolean;
+    private editing;
+    get dataGrid(): import("./DataGrid.js").DataGrid<TData, TDetailsElement>;
     get data(): TData;
     get dataSelector(): KeyPathOf<TData>;
+    private get cellIndex();
+    private get rowIndex();
+    private get isEditable();
+    get isEditing(): boolean;
+    protected handlePointerDown(event: PointerEvent): void;
+    protected handleDoubleClick(event: MouseEvent): void;
+    protected handleKeyDown(event: KeyboardEvent): Promise<void>;
+    private focusCell;
     static get styles(): import("@a11d/lit").CSSResult;
     private get tooltip();
-    protected get template(): import("lit-html").HTMLTemplateResult;
+    protected get template(): HTMLTemplateResult;
+    private get contentTemplate();
+    private get editContentTemplate();
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/DataGridCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAuB,MAAM,WAAW,CAAA;AAErE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAO1D;;;;;;;GAOG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IACzB,OAAO,UAAQ;IAE3D,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,qBAAsC;IAEtD,WAAoB,MAAM,kCAsCzB;IAED,OAAO,KAAK,OAAO,GAGlB;IAED,cAAuB,QAAQ,0CAQ9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}
+{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAsD,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGxH,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,6DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,qBAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IAyClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAGlB;IAED,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}

package/dist/DataGridCell.js

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
-import { component, Component, html, property, css } from '@a11d/lit';
+import { component, Component, html, property, css, eventListener, state, nothing } from '@a11d/lit';
+import { NotificationHost } from '@a11d/lit-application';
 import { Localizer } from '@3mo/localization';
 Localizer.register("de" /* LanguageCode.German */, {
     'Using the clipboard is not allowed in an insecure browser environment': 'In einer unsicheren Browser-Umgebung darf kein Text in die Zwischenablage kopiert werden',
@@ -11,15 +12,89 @@ Localizer.register("de" /* LanguageCode.German */, {
  * @attr value
  * @attr column
  * @attr row
- * @attr editing
  */
 let DataGridCell = class DataGridCell extends Component {
     constructor() {
         super(...arguments);
         this.editing = false;
     }
+    get dataGrid() { return this.row.dataGrid; }
     get data() { return this.row.data; }
     get dataSelector() { return this.column.dataSelector; }
+    get cellIndex() { return this.row.cells.indexOf(this); }
+    get rowIndex() { return this.dataGrid.rows.indexOf(this.row); }
+    get isEditable() {
+        return !!this.column.editable
+            && this.dataGrid.editability !== "never" /* DataGridEditability.Never */
+            && [undefined, null, nothing].includes(this.editContentTemplate) === false;
+    }
+    get isEditing() {
+        return this.isEditable
+            && (this.editing || this.dataGrid.editability === "always" /* DataGridEditability.Always */);
+    }
+    handlePointerDown(event) {
+        if (this.isEditing && event.composedPath().includes(this) === false) {
+            this.editing = false;
+        }
+    }
+    handleDoubleClick(event) {
+        if (this.dataGrid.editability === "cell" /* DataGridEditability.Cell */) {
+            event.preventDefault();
+            this.editing = true;
+        }
+    }
+    async handleKeyDown(event) {
+        var _a, _b, _c;
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                if (this.isEditable) {
+                    this.editing = true;
+                }
+                else {
+                    this.click();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.editing = false;
+                await this.updateComplete;
+                this.focusCell(event, this);
+                break;
+            case 'c':
+                if (this.isEditing === false && event.ctrlKey) {
+                    event.preventDefault();
+                    await navigator.clipboard.writeText(String(this.value));
+                    (_a = NotificationHost.instance) === null || _a === void 0 ? void 0 : _a.notifySuccess(t('Copied to clipboard'));
+                }
+                break;
+            case 'Tab':
+            case 'ArrowRight':
+                this.focusCell(event, this.row.cells.at(this.cellIndex === this.dataGrid.visibleColumns.length - 1 ? 0 : this.cellIndex + 1));
+                break;
+            case 'ArrowLeft':
+                this.focusCell(event, this.row.cells.at(this.cellIndex === 0 ? this.dataGrid.visibleColumns.length - 1 : this.cellIndex - 1));
+                break;
+            case 'ArrowUp':
+                this.focusCell(event, (_b = this.dataGrid.rows.at(this.rowIndex === 0 ? this.dataGrid.rows.length - 1 : this.rowIndex - 1)) === null || _b === void 0 ? void 0 : _b.cells.at(this.cellIndex));
+                break;
+            case 'ArrowDown':
+                this.focusCell(event, (_c = this.dataGrid.rows.at(this.rowIndex === this.dataGrid.rows.length - 1 ? 0 : this.rowIndex + 1)) === null || _c === void 0 ? void 0 : _c.cells.at(this.cellIndex));
+                break;
+            default:
+                break;
+        }
+    }
+    focusCell(event, cell) {
+        if (cell && this.isEditing === false) {
+            event.preventDefault();
+            cell.focus();
+            this.editing = false;
+            if (this.dataGrid.selectionCheckboxesHidden) {
+                this.dataGrid.select([...(event.shiftKey ? this.dataGrid.selectedData : []), cell.row.data]);
+            }
+        }
+    }
     static get styles() {
         return css `
 			:host {
@@ -33,7 +108,11 @@ let DataGridCell = class DataGridCell extends Component {
 				font-size: small;
 			}
 
-			:host([editing]) {
+			:host(:not([isEditing]):focus) {
+				outline: 2px solid var(--mo-color-accent);
+			}
+
+			:host([isEditing]) {
 				display: grid;
 			}
 
@@ -53,7 +132,7 @@ let DataGridCell = class DataGridCell extends Component {
 				line-height: var(--mo-data-grid-row-height);
 			}
 
-			:host([editing]) > :first-child {
+			:host([isEditing]) > :first-child {
 				align-self: center;
 				justify-self: stretch;
 			}
@@ -64,14 +143,24 @@ let DataGridCell = class DataGridCell extends Component {
         return allowedTitleTypes.includes(typeof this.value) ? String(this.value) : '';
     }
     get template() {
-        var _a, _b, _c, _d, _e;
         this.title = this.tooltip;
-        const contentTemplate = (_c = (_b = (_a = this.column).getContentTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, this.data)) !== null && _c !== void 0 ? _c : this.value;
-        const editContentTemplate = (_e = (_d = this.column).getEditContentTemplate) === null || _e === void 0 ? void 0 : _e.call(_d, this.value, this.data);
+        this.toggleAttribute('isEditing', this.isEditing);
         this.setAttribute('alignment', this.column.alignment || 'start');
-        return this.column.editable && this.editing && editContentTemplate ? editContentTemplate : html `
-			${contentTemplate}
-		`;
+        if (this.isEditing) {
+            this.removeAttribute('tabindex');
+        }
+        else {
+            this.setAttribute('tabindex', '-1');
+        }
+        return this.isEditing ? this.editContentTemplate : this.contentTemplate;
+    }
+    get contentTemplate() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.column).getContentTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, this.data)) !== null && _c !== void 0 ? _c : html `${this.value}`;
+    }
+    get editContentTemplate() {
+        var _a, _b;
+        return (_b = (_a = this.column).getEditContentTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, this.data);
     }
 };
 __decorate([
@@ -84,8 +173,24 @@ __decorate([
     property({ type: Object })
 ], DataGridCell.prototype, "row", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    state({
+        updated() {
+            var _a;
+            if (this.isEditing) {
+                (_a = this.renderRoot.querySelector('[data-focus]')) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    })
 ], DataGridCell.prototype, "editing", void 0);
+__decorate([
+    eventListener({ target: document, type: 'pointerdown' })
+], DataGridCell.prototype, "handlePointerDown", null);
+__decorate([
+    eventListener('dblclick')
+], DataGridCell.prototype, "handleDoubleClick", null);
+__decorate([
+    eventListener('keydown')
+], DataGridCell.prototype, "handleKeyDown", null);
 DataGridCell = __decorate([
     component('mo-data-grid-cell')
 ], DataGridCell);

package/dist/DataGridHeader.js

@@ -101,7 +101,7 @@ let DataGridHeader = class DataGridHeader extends Component {
 		`;
     }
     get selectionTemplate() {
-        return this.dataGrid.hasSelection === false ? nothing : html `
+        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? nothing : html `
 			<mo-flex justifyContent='center' alignItems='center'>
 				${this.dataGrid.selectionMode !== "multiple" /* DataGridSelectionMode.Multiple */ ? nothing : html `
 					<mo-checkbox ${style({ position: 'absolute' })} value=${this.selection} @change=${this.handleSelectionChange}></mo-checkbox>

package/dist/columns/DataGridColumn.d.ts

@@ -23,7 +23,7 @@ export declare abstract class DataGridColumn<TData, TValue> extends Component {
     nonEditable: boolean;
     get definition(): ColumnDefinition<TData, TValue>;
     abstract getContentTemplate(value: TValue | undefined, data: TData): HTMLTemplateResult;
-    abstract getEditContentTemplate(value: TValue | undefined, data: TData): HTMLTemplateResult;
+    abstract getEditContentTemplate?(value: TValue | undefined, data: TData): HTMLTemplateResult;
     protected handleEdit(value: TValue | undefined, data: TData): void;
     connectedCallback(): void;
     protected updated(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE9D;;;;;;;;;GASG;AACH,8BAAsB,cAAc,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IACxC,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAE3D,KAAK,SAAuB;IACF,MAAM,UAAQ;IACvB,OAAO,SAAK;IACZ,SAAS,SAAU;IACV,KAAK,EAAG,MAAM,CAAA;IACvB,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChB,WAAW,UAAQ;IACnB,WAAW,UAAQ;IAE/D,IAAI,UAAU,IAAI,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAahD;IAED,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IACvF,QAAQ,CAAC,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAE3F,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAIlD,iBAAiB;cAOP,OAAO;CAI1B"}
+{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE9D;;;;;;;;;GASG;AACH,8BAAsB,cAAc,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,SAAS;IACxC,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IAE3D,KAAK,SAAuB;IACF,MAAM,UAAQ;IACvB,OAAO,SAAK;IACZ,SAAS,SAAU;IACV,KAAK,EAAG,MAAM,CAAA;IACvB,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChB,WAAW,UAAQ;IACnB,WAAW,UAAQ;IAE/D,IAAI,UAAU,IAAI,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAahD;IAED,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IACvF,QAAQ,CAAC,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAE5F,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAIlD,iBAAiB;cAOP,OAAO;CAI1B"}

package/dist/columns/DataGridColumn.js

@@ -23,6 +23,7 @@ export class DataGridColumn extends Component {
         this.nonEditable = false;
     }
     get definition() {
+        var _a;
         return {
             dataSelector: this.dataSelector,
             heading: this.heading,
@@ -31,9 +32,9 @@ export class DataGridColumn extends Component {
             hidden: this.hidden,
             width: !AsteriskSyntaxStyleHandler.regex.test(this.width) ? this.width : `${AsteriskSyntaxStyleHandler.getProportion(this.width)}fr`,
             sortable: !this.nonSortable,
-            editable: !this.nonEditable,
+            editable: !this.nonEditable && this.getEditContentTemplate !== undefined,
             getContentTemplate: this.getContentTemplate.bind(this),
-            getEditContentTemplate: this.getEditContentTemplate.bind(this),
+            getEditContentTemplate: (_a = this.getEditContentTemplate) === null || _a === void 0 ? void 0 : _a.bind(this),
         };
     }
     handleEdit(value, data) {

package/dist/columns/DataGridColumnBoolean.js

@@ -27,7 +27,7 @@ let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridColumn {
     }
     getEditContentTemplate(value, data) {
         return html `
-			<mo-checkbox label=${this.heading}
+			<mo-checkbox label=${this.heading} data-focus
 				?checked=${value}
 				@change=${(e) => this.handleEdit(e.detail === 'checked', data)}
 			></mo-checkbox>

package/dist/columns/DataGridColumnCurrency.js

@@ -14,7 +14,7 @@ let DataGridColumnCurrency = class DataGridColumnCurrency extends DataGridColumn
     }
     getEditContentTemplate(value, data) {
         return html `
-			<mo-field-currency dense
+			<mo-field-currency dense data-focus
 				label=${this.heading}
 				value=${ifDefined(value)}
 				@change=${(e) => this.handleEdit(e.detail, data)}

package/dist/columns/DataGridColumnDate.js

@@ -17,7 +17,7 @@ let DataGridColumnDate = class DataGridColumnDate extends DataGridColumn {
     }
     getEditContentTemplate(value, data) {
         return html `
-			<mo-field-date dense
+			<mo-field-date dense data-focus
 				?hideDatePicker=${this.hideDatePicker}
 				label=${this.heading}
 				.value=${value}

package/dist/columns/DataGridColumnImage.d.ts

@@ -2,7 +2,7 @@ import { DataGridColumn } from './DataGridColumn.js';
 /** @element mo-data-grid-column-image */
 export declare class DataGridColumnImage<TData> extends DataGridColumn<TData, string> {
     getContentTemplate(value: string | undefined, _data: TData): import("lit-html").HTMLTemplateResult;
-    getEditContentTemplate(value: string | undefined, data: TData): import("lit-html").HTMLTemplateResult;
+    getEditContentTemplate: undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnImage.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnImage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,yCAAyC;AACzC,qBACa,mBAAmB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAE5E,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK;IAM1D,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;CAG7D;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,2BAA2B,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAA;KACzD;CACD"}
+{"version":3,"file":"DataGridColumnImage.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnImage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,yCAAyC;AACzC,qBACa,mBAAmB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAE5E,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK;IAMjD,sBAAsB,YAAY;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,2BAA2B,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAA;KACzD;CACD"}

package/dist/columns/DataGridColumnImage.js

@@ -3,15 +3,16 @@ import { component, html, nothing } from '@a11d/lit';
 import { DataGridColumn } from './DataGridColumn.js';
 /** @element mo-data-grid-column-image */
 let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
+    constructor() {
+        super(...arguments);
+        this.getEditContentTemplate = undefined;
+    }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
         return !value ? nothing : html `
 			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
 		`;
     }
-    getEditContentTemplate(value, data) {
-        return this.getContentTemplate(value, data);
-    }
 };
 DataGridColumnImage = __decorate([
     component('mo-data-grid-column-image')

package/dist/columns/DataGridColumnNumber.js

@@ -10,7 +10,7 @@ let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumb
     }
     getEditContentTemplate(value, data) {
         return html `
-			<mo-field-number dense label=${this.heading}
+			<mo-field-number dense label=${this.heading} data-focus
 				value=${ifDefined(value)}
 				@change=${(e) => this.handleEdit(e.detail, data)}
 			></mo-field-number>

package/dist/columns/DataGridColumnNumberBase.d.ts

@@ -1,11 +1,11 @@
-import { TemplateResult } from '@a11d/lit';
+import { HTMLTemplateResult } from '@a11d/lit';
 import { DataGridColumn } from './DataGridColumn.js';
 export declare abstract class DataGridColumnNumberBase<TData> extends DataGridColumn<TData, number> {
     sumHeading: string | undefined;
     textAlign: string;
     get definition(): {
         sumHeading: string | undefined;
-        getSumTemplate: (sum: number) => TemplateResult<1>;
+        getSumTemplate: (sum: number) => HTMLTemplateResult;
         heading: string;
         title?: string | undefined;
         dataSelector: KeyPathOf<TData>;
@@ -14,9 +14,9 @@ export declare abstract class DataGridColumnNumberBase<TData> extends DataGridCo
         hidden?: boolean | undefined;
         sortable?: boolean | undefined;
         editable?: boolean | undefined;
-        getContentTemplate?(value: number, data: TData): import("lit-html").HTMLTemplateResult;
-        getEditContentTemplate?(value: number, data: TData): import("lit-html").HTMLTemplateResult;
+        getContentTemplate?(value: number, data: TData): HTMLTemplateResult;
+        getEditContentTemplate?(value: number, data: TData): HTMLTemplateResult;
     };
-    abstract getSumTemplate(sum: number): TemplateResult<1>;
+    abstract getSumTemplate(sum: number): HTMLTemplateResult;
 }
 //# sourceMappingURL=DataGridColumnNumberBase.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnNumberBase.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnNumberBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAE,MAAM,WAAW,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,8BAAsB,wBAAwB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAC9E,UAAU,EAAE,MAAM,GAAG,SAAS,CAAY;IACjC,SAAS,SAAQ;IAEtC,IAAa,UAAU;;;;;;;;;;;;;MAMtB;IAED,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC;CACvD"}
+{"version":3,"file":"DataGridColumnNumberBase.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnNumberBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAY,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,8BAAsB,wBAAwB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAC9E,UAAU,EAAE,MAAM,GAAG,SAAS,CAAY;IACjC,SAAS,SAAQ;IAEtC,IAAa,UAAU;;;;;;;;;;;;;MAMtB;IAED,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;CACxD"}

package/dist/columns/DataGridColumnPercent.js

@@ -10,7 +10,7 @@ let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNu
     }
     getEditContentTemplate(value, data) {
         return html `
-			<mo-field-percent dense
+			<mo-field-percent dense data-focus
 				label=${this.heading}
 				value=${ifDefined(value)}
 				@change=${(e) => this.handleEdit(e.detail, data)}

package/dist/columns/DataGridColumnText.js

@@ -9,7 +9,7 @@ let DataGridColumnText = class DataGridColumnText extends DataGridColumn {
     }
     getEditContentTemplate(value, data) {
         return html `
-			<mo-field-text dense label=${this.heading}
+			<mo-field-text dense label=${this.heading} data-focus
 				value=${ifDefined(value)}
 				@change=${(e) => this.handleEdit(e.detail, data)}
 			></mo-field-text>

package/dist/rows/DataGridRow.d.ts

@@ -18,10 +18,7 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
     selected: boolean;
     detailsOpen: boolean;
     protected contextMenuOpen: boolean;
-    protected editing: boolean;
     get detailsElement(): TDetailsElement | undefined;
-    protected connected(): void;
-    protected disconnected(): void;
     protected initialized(): void;
     updated(...parameters: Parameters<Component['updated']>): void;
     protected get hasDetails(): boolean;
@@ -35,8 +32,6 @@ export declare abstract class DataGridRow<TData, TDetailsElement extends Element
     protected get detailsTemplate(): HTMLTemplateResult;
     private setSelection;
     protected handleContentClick(): void;
-    private dataBeforeEdit?;
-    private enableEditMode;
     protected handleContentDoubleClick(): Promise<void>;
     openContextMenu(mouseEvent?: MouseEvent): Promise<void>;
     private get contextMenuData();