@3mo/data-grid 0.8.25 → 0.8.26-preview.0

package/dist/DataGrid.d.ts

@@ -4,9 +4,12 @@ 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 { DataGridSelectionController, DataGridSelectionMode, DataGridSelectionBehaviorOnDataChange } from './DataGridSelectionController.js';
+import { DataGridColumnsController } from './DataGridColumnsController.js';
+import { DataGridSelectionBehaviorOnDataChange, DataGridSelectionController, DataGridSelectionMode } from './DataGridSelectionController.js';
 import { DataGridSortingController, type DataGridRankedSortDefinition, type DataGridSorting } from './DataGridSortingController.js';
+import { DataGridDetailsController } from './DataGridDetailsController.js';
 import { DataGridSidePanelTab, type DataGridColumn, type DataGridCell, type DataGridRow } from './index.js';
+import { DataRecord } from './DataRecord.js';
 export type DataGridPagination = 'auto' | number;
 export declare enum DataGridEditability {
     Never = "never",
@@ -111,7 +114,6 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     subDataGridDataSelector?: KeyPathOf<TData>;
     hasDataDetail?: (data: TData) => boolean;
     detailsOnClick: boolean;
-    protected openDetailedData: TData[];
     getRowContextMenuTemplate?: (data: Array<TData>) => HTMLTemplateResult;
     primaryContextMenuItemOnDoubleClick: boolean;
     editability: DataGridEditability;
@@ -129,30 +131,25 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     readonly rows: Array<DataGridRow<TData, TDetailsElement>>;
     private readonly footer?;
     private readonly sidePanel?;
-    private readonly columnsSlot?;
     setPage(page: number): void;
-    handlePageChange(page: number): void;
     setPagination(pagination?: DataGridPagination): void;
-    handlePaginationChange(pagination?: DataGridPagination): void;
     setData(data: Array<TData>, selectionBehavior?: DataGridSelectionBehaviorOnDataChange): void;
     get hasSelection(): boolean;
     selectAll(...parameters: Parameters<typeof this.selectionController.selectAll>): void;
     deselectAll(...parameters: Parameters<typeof this.selectionController.deselectAll>): void;
     select(...parameters: Parameters<typeof this.selectionController.select>): void;
     isSelectable(...parameters: Parameters<typeof this.selectionController.isSelectable>): boolean;
-    get detailedData(): TData[];
     get hasDetails(): boolean;
-    getSubData(data: TData): Array<TData> | undefined;
-    hasDetail(data: TData): boolean;
     get allRowDetailsOpen(): boolean;
-    openRowDetails(): void;
-    closeRowDetails(): void;
-    toggleRowDetails(): void;
+    openRowDetails(...parameters: Parameters<typeof this.detailsController.openAll>): void;
+    closeRowDetails(...parameters: Parameters<typeof this.detailsController.closeAll>): void;
+    toggleRowDetails(...parameters: Parameters<typeof this.detailsController.toggleAll>): void;
+    getSorting(...parameters: Parameters<typeof DataGridSortingController.prototype.get>): DataGridRankedSortDefinition<TData>[];
     sort(...parameters: Parameters<typeof this.sortingController.set>): void;
     unsort(...parameters: Parameters<typeof this.sortingController.reset>): void;
-    setColumns(columns: Array<DataGridColumn<TData>>): void;
-    extractColumnsIfNotSetExplicitly(): void;
-    extractColumns(): void;
+    setColumns(...parameters: Parameters<typeof this.columnsController.setColumns>): void;
+    extractColumns(...parameters: Parameters<typeof this.columnsController.extractColumns>): void;
+    get visibleColumns(): DataGridColumn<TData, unknown>[];
     getRow(data: TData): DataGridRow<TData, TDetailsElement> | undefined;
     getCell(data: TData, column: DataGridColumn<TData, unknown>): DataGridCell<any, TData, TDetailsElement> | undefined;
     handleEdit(data: TData, column: DataGridColumn<TData, unknown>, value: KeyPathValueOf<TData, KeyPathOf<TData>> | undefined): void;
@@ -175,9 +172,11 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     protected readonly slotController: SlotController;
     protected readonly instanceofAttributeController: InstanceofAttributeController;
     protected readonly smallScreenObserverController: MediaQueryController;
-    readonly themeController: ThemeController;
+    protected readonly themeController: ThemeController;
+    readonly columnsController: DataGridColumnsController<TData>;
     readonly selectionController: DataGridSelectionController<TData>;
     readonly sortingController: DataGridSortingController<TData>;
+    readonly detailsController: DataGridDetailsController<TData>;
     readonly rowIntersectionObserver?: IntersectionObserver;
     protected updated(...parameters: Parameters<Component['updated']>): void;
     protected firstUpdated(props: PropertyValues): void;
@@ -197,10 +196,8 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     protected get dataGridTemplate(): HTMLTemplateResult;
     protected get headerTemplate(): HTMLTemplateResult;
     private get rowsTemplate();
-    getRowTemplate(data: TData, index?: number, level?: number): import("lit-html").TemplateResult;
-    private handleRowDetailsOpenChange;
+    getRowTemplate(dataRecord: DataRecord<TData>, index?: number): import("lit-html").TemplateResult;
     protected get footerTemplate(): HTMLTemplateResult;
-    get sumsData(): TData[];
     get sumsTemplate(): HTMLTemplateResult;
     protected get toolbarTemplate(): HTMLTemplateResult;
     protected get toolbarDefaultTemplate(): HTMLTemplateResult;
@@ -208,26 +205,14 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     protected get sumDefaultTemplate(): HTMLTemplateResult;
     protected get selectionToolbarTemplate(): HTMLTemplateResult;
     protected get toolbarActionsTemplate(): HTMLTemplateResult;
-    private provideCssColumnsProperties;
-    readonly detailsColumnWidthInPixels = 0;
-    readonly selectionColumnWidthInPixels = 0;
-    readonly moreColumnWidthInPixels = 0;
-    get columnsWidths(): string[];
-    get detailsColumnWidth(): string | undefined;
-    get selectionColumnWidth(): string | undefined;
-    get dataColumnsWidths(): string[];
-    get moreColumnWidth(): string | undefined;
     private lastScrollElementTop;
     private handleScroll;
     protected handlePointerDown(event: PointerEvent): void;
-    getSorting(): DataGridRankedSortDefinition<TData>[];
     private getFlattenedData;
-    get flattenedData(): TData[];
-    protected get sortedData(): TData[];
-    get renderData(): TData[];
-    private get elementExtractedColumns();
-    private get autoGeneratedColumns();
-    get visibleColumns(): DataGridColumn<TData, unknown>[];
+    get dataRecords(): Array<DataRecord<TData>>;
+    get renderDataRecords(): DataRecord<TData>[];
+    protected get dataSkip(): number;
+    protected get dataTake(): number;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAqC,KAAK,cAAc,EAAqC,KAAK,kBAAkB,EAAwD,MAAM,WAAW,CAAA;AAEpO,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;AAGhE,OAAO,EAAE,2BAA2B,EAAE,qBAAqB,EAAE,qCAAqC,EAAE,MAAM,kCAAkC,CAAA;AAC5I,OAAO,EAAE,yBAAyB,EAAE,KAAK,4BAA4B,EAAE,KAAK,eAAe,EAAE,MAAM,gCAAgC,CAAA;AACnI,OAAO,EAAyC,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAA4C,KAAK,WAAW,EAA0B,MAAM,YAAY,CAAA;AAqBpN,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAA;AAEhD,oBAAY,mBAAmB;IAC9B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,MAAM,WAAW;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;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,oBAAoB,uBAAiE;IACrG,MAAM,CAAC,QAAQ,CAAC,QAAQ,uBAAiF;IACzG,MAAM,CAAC,QAAQ,CAAC,wBAAwB,wBAA8D;IAE7F,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,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACtE,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,oBAAoB,CAAC,CAAA;IAC9D,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAA;IACzC,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,KAAK,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACpF,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9E,QAAQ,CAAC,eAAe,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC/E,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,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;IAMjD,OAAO,mCAAqC;IAEH,YAAY,UAAQ;IACpB,4BAA4B,UAAQ;IACpD,IAAI,SAAI;IACmJ,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAE1L,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAA;IAE/B,aAAa,wBAA6B;IAC3C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAA;IAClB,YAAY,UAAqB;IACzD,aAAa,UAAQ;IACrB,yBAAyB,UAAQ;IAClD,6BAA6B,wCAA8C;IAE3D,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,kBAAkB,CAAA;IAC1D,eAAe,UAAQ;IACxC,uBAAuB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IAC1B,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;IAEjD,UAAU,UAAQ;IAQ5C,YAAY,SAAsC;IAQlD,SAAS,SAA2B;IAET,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAuB;IACvD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAU;IAC1B,QAAQ,CAAC,IAAI,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAuB;IAC3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAA0B;IAC3D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAiB;IAE1E,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;IAMlF,IAAI,YAAY,YAEf;IAED,SAAS,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC;IAI9E,WAAW,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC;IAIlF,MAAM,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC;IAIxE,YAAY,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC;IAIpF,IAAI,YAAY,YAEf;IAED,IAAI,UAAU,YAGb;IAED,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,SAAS;IAUjD,SAAS,CAAC,IAAI,EAAE,KAAK;IAOrB,IAAI,iBAAiB,YAEpB;IAED,cAAc;IAId,eAAe;IAIf,gBAAgB;IAQhB,IAAI,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC;IAIjE,MAAM,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;IAIrE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAMhD,gCAAgC;IAMhC,cAAc;IAOd,MAAM,CAAC,IAAI,EAAE,KAAK;IAIlB,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC;IAK3D,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS;IAU1H,sBAAsB,CAAC,GAAG,CAAC,EAAE,oBAAoB;IAKjD,eAAe;IAUf,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,YAIZ;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;IAEpD,QAAQ,CAAC,mBAAmB,qCAAwC;IACpE,QAAQ,CAAC,iBAAiB,mCAAsC;IAEhE,QAAQ,CAAC,uBAAuB,CAAC,EAAE,oBAAoB,CAAA;cAEpC,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;cAoBvD,YAAY,CAAC,KAAK,EAAE,cAAc;IAOrD,WAAoB,MAAM,kCAoKzB;IAED,cAAuB,QAAQ,uBAM9B;IAED,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAEvC;IAED,OAAO,KAAK,oBAAoB,GAc/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,uBAOxB;IAED,SAAS,KAAK,eAAe,uBAE5B;IAED,SAAS,KAAK,iBAAiB,uBAM9B;IAED,SAAS,KAAK,gBAAgB,uBAiB7B;IAED,SAAS,KAAK,cAAc,uBAI3B;IAED,OAAO,KAAK,YAAY,GAIvB;IAED,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,SAAI;IAerD,OAAO,CAAC,0BAA0B;IAclC,SAAS,KAAK,cAAc,uBAa3B;IAED,IAAI,QAAQ,YAEX;IAED,IAAI,YAAY,uBAIf;IAED,SAAS,KAAK,eAAe,uBAa5B;IAED,SAAS,KAAK,sBAAsB,uBAEnC;IAED,SAAS,KAAK,4BAA4B,uBAEzC;IAED,SAAS,KAAK,kBAAkB,uBAE/B;IAED,SAAS,KAAK,wBAAwB,uBA2BrC;IAED,SAAS,KAAK,sBAAsB,uBAgBnC;IAID,OAAO,CAAC,2BAA2B;IAKnC,QAAQ,CAAC,0BAA0B,KAAI;IACvC,QAAQ,CAAC,4BAA4B,KAAI;IACzC,QAAQ,CAAC,uBAAuB,KAAI;IAEpC,IAAI,aAAa,aAQhB;IAED,IAAI,kBAAkB,uBAErB;IAED,IAAI,oBAAoB,uBAEvB;IAED,IAAI,iBAAiB,aAIpB;IAED,IAAI,eAAe,uBAElB;IAGD,OAAO,CAAC,oBAAoB,CAAI;IAEhC,OAAO,CAAC,YAAY;IAkBpB,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAI/C,UAAU;IAIV,OAAO,CAAE,gBAAgB;IAuBzB,IAAI,aAAa,YAEhB;IAED,SAAS,KAAK,UAAU,YAEvB;IAED,IAAI,UAAU,YAOb;IAED,OAAO,KAAK,uBAAuB,GAelC;IAED,OAAO,KAAK,oBAAoB,GA4B/B;IAED,IAAI,cAAc,qCAEjB;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;KAC5C;CACD"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"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"}

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, style, literal, staticHtml, cache, eventOptions, queryAll, repeat, eventListener } from '@a11d/lit';
+import { property, component, Component, html, css, query, ifDefined, event, style, literal, staticHtml, cache, eventOptions, queryAll, repeat, eventListener } from '@a11d/lit';
 import { NotificationComponent } from '@a11d/lit-application';
 import { LocalStorage } from '@a11d/local-storage';
 import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
@@ -10,9 +10,12 @@ import { ThemeController } from '@3mo/theme';
 import { observeMutation } from '@3mo/mutation-observer';
 import { MediaQueryController } from '@3mo/media-query-observer';
 import { Localizer } from '@3mo/localization';
-import { DataGridSelectionController, DataGridSelectionMode, DataGridSelectionBehaviorOnDataChange } from './DataGridSelectionController.js';
+import { DataGridColumnsController } from './DataGridColumnsController.js';
+import { DataGridSelectionBehaviorOnDataChange, DataGridSelectionController, DataGridSelectionMode } from './DataGridSelectionController.js';
 import { DataGridSortingController } from './DataGridSortingController.js';
-import { CsvGenerator, DataGridColumnComponent, DataGridSidePanelTab } from './index.js';
+import { DataGridDetailsController } from './DataGridDetailsController.js';
+import { CsvGenerator, DataGridSidePanelTab } from './index.js';
+import { DataRecord } from './DataRecord.js';
 Localizer.register('en', {
     '${count:pluralityNumber} entries selected': [
         '1 entry selected',
@@ -112,7 +115,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         this.selectionBehaviorOnDataChange = DataGridSelectionBehaviorOnDataChange.Reset;
         this.multipleDetails = false;
         this.detailsOnClick = false;
-        this.openDetailedData = new Array();
         this.primaryContextMenuItemOnDoubleClick = false;
         this.editability = DataGridEditability.Never;
         this.sidePanelHidden = false;
@@ -127,19 +129,18 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
             this.hasSums;
             this.hasFabs;
             await new Promise(r => requestIdleCallback(r));
-            this.style.setProperty('--mo-data-grid-fab-slot-width', `${this.renderRoot.querySelector('slot[name=fab]')?.getBoundingClientRect().width || 75}px`);
+            this.style.setProperty('--mo-data-grid-fab-slot-width', `${this.renderRoot?.querySelector('slot[name=fab]')?.getBoundingClientRect().width || 75}px`);
         });
         this.instanceofAttributeController = new InstanceofAttributeController(this);
         this.smallScreenObserverController = new MediaQueryController(this, '(max-width: 768px)');
         this.themeController = new ThemeController(this);
+        this.columnsController = new DataGridColumnsController(this);
         this.selectionController = new DataGridSelectionController(this);
         this.sortingController = new DataGridSortingController(this);
+        this.detailsController = new DataGridDetailsController(this);
         this.splitterResizerTemplate = 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>
 	`;
-        this.detailsColumnWidthInPixels = 0;
-        this.selectionColumnWidthInPixels = 0;
-        this.moreColumnWidthInPixels = 0;
         // eslint-disable-next-line @typescript-eslint/member-ordering
         this.lastScrollElementTop = 0;
     }
@@ -147,16 +148,10 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         this.page = page;
         this.pageChange.dispatch(page);
     }
-    handlePageChange(page) {
-        this.setPage(page);
-    }
     setPagination(pagination) {
         this.pagination = pagination;
         this.paginationChange.dispatch(pagination);
     }
-    handlePaginationChange(pagination) {
-        this.setPagination(pagination);
-    }
     setData(data, selectionBehavior = this.selectionBehaviorOnDataChange) {
         this.data = data;
         this.selectionController.handleDataChange(selectionBehavior);
@@ -177,64 +172,38 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     isSelectable(...parameters) {
         return this.selectionController.isSelectable(...parameters);
     }
-    get detailedData() {
-        return this.data.filter(data => this.hasDetail(data));
-    }
     get hasDetails() {
-        return !!this.getRowDetailsTemplate && this.detailedData.length > 0
-            || this.data.some(d => !!this.getSubData(d));
-    }
-    getSubData(data) {
-        if (!this.subDataGridDataSelector) {
-            return undefined;
-        }
-        const subValue = getValueByKeyPath(data, this.subDataGridDataSelector);
-        return !Array.isArray(subValue) || !subValue.length
-            ? undefined
-            : this.sortingController.toSorted(subValue);
-    }
-    hasDetail(data) {
-        return !!this.getSubData(data) || (this.hasDataDetail?.(data) ??
-            [undefined, html.nothing].includes(this.getRowDetailsTemplate?.(data)) === false);
+        return this.detailsController.hasDetails;
     }
     get allRowDetailsOpen() {
-        return this.openDetailedData.length === this.detailedData.length;
+        return this.detailsController.areAllOpen;
     }
-    openRowDetails() {
-        this.openDetailedData = this.detailedData;
+    openRowDetails(...parameters) {
+        return this.detailsController.openAll(...parameters);
     }
-    closeRowDetails() {
-        this.openDetailedData = [];
+    closeRowDetails(...parameters) {
+        return this.detailsController.closeAll(...parameters);
     }
-    toggleRowDetails() {
-        if (this.allRowDetailsOpen) {
-            this.closeRowDetails();
-        }
-        else {
-            this.openRowDetails();
-        }
+    toggleRowDetails(...parameters) {
+        return this.detailsController.toggleAll(...parameters);
+    }
+    getSorting(...parameters) {
+        return this.sortingController.get(...parameters);
     }
     sort(...parameters) {
-        this.sortingController.set(...parameters);
+        return this.sortingController.set(...parameters);
     }
     unsort(...parameters) {
-        this.sortingController.reset(...parameters);
+        return this.sortingController.reset(...parameters);
     }
-    setColumns(columns) {
-        this.columns = columns;
-        this.columnsChange.dispatch(columns);
-        this.requestUpdate();
+    setColumns(...parameters) {
+        return this.columnsController.setColumns(...parameters);
     }
-    extractColumnsIfNotSetExplicitly() {
-        if (this.columns.length === 0) {
-            this.extractColumns();
-        }
+    extractColumns(...parameters) {
+        return this.columnsController.extractColumns(...parameters);
     }
-    extractColumns() {
-        const extractedColumns = this.elementExtractedColumns.length > 0
-            ? this.elementExtractedColumns
-            : this.autoGeneratedColumns;
-        this.setColumns(extractedColumns);
+    get visibleColumns() {
+        return this.columnsController.visibleColumns;
     }
     getRow(data) {
         return this.rows.find(r => r.data === data);
@@ -316,7 +285,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return value;
     }
     get dataLength() {
-        return this.flattenedData.length;
+        return this.renderDataRecords.length;
     }
     get maxPage() {
         return Math.ceil(this.dataLength / this.pageSize);
@@ -345,7 +314,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this.extractColumnsIfNotSetExplicitly();
         this.cellEdit.subscribe(() => this.requestUpdate());
         this.setPage(1);
     }
@@ -366,6 +334,8 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
 
 				--mo-data-grid-sticky-part-color: var(--mo-color-surface);
 
+				--mo-data-grid-alternating-background: color-mix(in srgb, black var(--mo-data-grid-alternating-background-transparency), transparent 0%);
+
 				--mo-data-grid-selection-background: color-mix(in srgb, var(--mo-color-accent), transparent 50%);
 				display: flex;
 				flex-direction: column;
@@ -374,11 +344,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
 			}
 
 			:host([data-theme=light]) {
-				--mo-data-grid-alternating-background: color-mix(in srgb, black, transparent 95%);
+				--mo-data-grid-alternating-background-transparency : 5%;
 			}
 
 			:host([data-theme=dark]) {
-				--mo-data-grid-alternating-background: color-mix(in srgb, black, transparent 80%);
+				--mo-data-grid-alternating-background-transparency: 20%;
 			}
 
 			:host([preventVerticalContentScroll]) mo-scroller {
@@ -586,7 +556,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
 		`;
     }
     get dataGridTemplate() {
-        this.provideCssColumnsProperties();
         this.toggleAttribute('hasDetails', this.hasDetails);
         return html `
 			<mo-grid rows='* auto' ${style({ position: 'relative', height: '100%' })}>
@@ -610,34 +579,17 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     }
     get rowsTemplate() {
         return html `
-			${repeat(this.renderData, data => data, (data, index) => this.getRowTemplate(data, index))}
+			${repeat(this.renderDataRecords, record => record.data, (record, index) => this.getRowTemplate(record, index))}
 		`;
     }
-    getRowTemplate(data, index, level = 0) {
+    getRowTemplate(dataRecord, index = 0) {
         return staticHtml `
 			<${this.rowElementTag} part='row'
-				.level=${level}
-				.dataGrid=${this}
-				.data=${data}
-				index=${ifDefined(index)}
-				?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)}
+				.dataRecord=${dataRecord}
+				?data-has-alternating-background=${this.hasAlternatingBackground && index % 2 === 1}
 			></${this.rowElementTag}>
 		`;
     }
-    handleRowDetailsOpenChange(data, open) {
-        if (this.hasDetail(data) === false) {
-            return;
-        }
-        if (open && this.multipleDetails === false) {
-            this.closeRowDetails();
-        }
-        this.openDetailedData = open
-            ? [...this.openDetailedData, data]
-            : this.openDetailedData.filter(d => d !== data);
-    }
     get footerTemplate() {
         return html `
 			<mo-flex ${style({ position: 'relative' })}>
@@ -652,9 +604,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
 			</mo-flex>
 		`;
     }
-    get sumsData() {
-        return this.selectedData.length > 0 ? this.selectedData : this.renderData;
-    }
     get sumsTemplate() {
         return html `
 			${this.columns.map(c => c.sumTemplate)}
@@ -728,35 +677,6 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
 			></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
-    // because the 'grid column gap' renders a gap no matter if the column is 0px or not
-    provideCssColumnsProperties() {
-        this.style.setProperty('--mo-data-grid-content-width', this.dataColumnsWidths.join(' '));
-        this.style.setProperty('--mo-data-grid-columns', this.columnsWidths.join(' '));
-    }
-    get columnsWidths() {
-        return [
-            this.detailsColumnWidth,
-            this.selectionColumnWidth,
-            ...this.dataColumnsWidths,
-            '1fr',
-            this.moreColumnWidth
-        ].filter((c) => c !== undefined);
-    }
-    get detailsColumnWidth() {
-        return !this.hasDetails ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-details-width');
-    }
-    get selectionColumnWidth() {
-        return !this.hasSelection || this.selectionCheckboxesHidden ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-selection-width');
-    }
-    get dataColumnsWidths() {
-        return this.visibleColumns
-            .map(c => c.width)
-            .filter((c) => c !== undefined);
-    }
-    get moreColumnWidth() {
-        return this.sidePanelHidden && !this.hasContextMenu ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-more-width');
-    }
     handleScroll(e) {
         if (this.preventFabCollapse === false) {
             if (!e.composed) {
@@ -775,88 +695,50 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     handlePointerDown(event) {
         this.rows.forEach(row => row.cells.forEach(cell => cell.handlePointerDown(event)));
     }
-    getSorting() {
-        return this.sortingController.get();
-    }
     *getFlattenedData() {
         if (!this.subDataGridDataSelector) {
-            yield* this.data.map(d => ({ level: 0, data: d }));
+            yield* this.sortingController.toSortedBy(this.data.map((data, index) => new DataRecord(this, { level: 0, index, data })), ({ data }) => data);
             return;
         }
         const flatten = (data, level = 0) => {
             const subData = getValueByKeyPath(data, this.subDataGridDataSelector);
+            const subDataRecords = !Array.isArray(subData)
+                ? undefined
+                : this.sortingController
+                    .toSortedBy(subData.map(data => new DataRecord(this, { level, data })), ({ data }) => data)
+                    .flatMap(({ data }) => flatten(data, level + 1));
             return [
-                { data, level },
-                ...!Array.isArray(subData)
-                    ? []
-                    : subData.flatMap(d => flatten(d, level + 1))
+                new DataRecord(this, { data, level, subData: subDataRecords }),
+                ...(subDataRecords ?? [])
             ];
         };
-        for (const data of this.data) {
+        for (const data of this.sortingController.toSorted(this.data)) {
             yield* flatten(data);
         }
         return;
     }
-    get flattenedData() {
-        return [...this.getFlattenedData()].map(({ data }) => data);
-    }
-    get sortedData() {
-        return this.sortingController.toSorted([...this.data]);
+    get dataRecords() {
+        return [...this.getFlattenedData()]
+            .map((record, index) => {
+            // @ts-expect-error index is initialized here
+            record.index = index;
+            return record;
+        });
     }
-    get renderData() {
+    get renderDataRecords() {
+        const rootRecords = this.dataRecords.filter(r => r.level === 0);
         if (this.hasPagination === false) {
-            return this.sortedData;
+            return rootRecords;
         }
-        const from = (this.page - 1) * this.pageSize;
-        const to = this.page * this.pageSize;
-        return this.sortedData.slice(from, to);
+        const from = this.dataSkip;
+        const to = this.dataSkip + this.dataTake;
+        return rootRecords.slice(from, to);
     }
-    get elementExtractedColumns() {
-        if (!this.columnsSlot) {
-            return [];
-        }
-        const children = this.columnsSlot.children.length > 0 ? Array.from(this.columnsSlot.children) : undefined;
-        const assigned = this.columnsSlot.assignedElements().length > 0 ? Array.from(this.columnsSlot.assignedElements()) : undefined;
-        return Array.from(assigned ?? children ?? [])
-            .filter((c) => {
-            const isColumn = c instanceof DataGridColumnComponent;
-            if (isColumn) {
-                c.dataGrid = this;
-            }
-            return isColumn;
-        })
-            .map(c => c.column);
-    }
-    get autoGeneratedColumns() {
-        if (!this.dataLength) {
-            return [];
-        }
-        const getDefaultColumnElement = (value) => {
-            switch (typeof value) {
-                case 'number':
-                case 'bigint':
-                    return 'mo-data-grid-column-number';
-                case 'boolean':
-                    return 'mo-data-grid-column-boolean';
-                default:
-                    return 'mo-data-grid-column-text';
-            }
-        };
-        const sampleData = this.data[0];
-        return Object.keys(sampleData || {})
-            .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.dataSelector = key;
-            columnElement.dataGrid = this;
-            const column = columnElement.column;
-            columnElement.remove();
-            return column;
-        });
+    get dataSkip() {
+        return (this.page - 1) * this.pageSize;
     }
-    get visibleColumns() {
-        return this.columns.filter(c => c.hidden === false);
+    get dataTake() {
+        return this.pageSize;
     }
 };
 DataGrid.rowHeight = new LocalStorage('DataGrid.RowHeight', 35);
@@ -909,12 +791,7 @@ __decorate([
     property({ type: Array })
 ], DataGrid.prototype, "data", void 0);
 __decorate([
-    property({
-        type: Array,
-        updated() {
-            this.columns.forEach(column => column.dataGrid = this);
-        }
-    })
+    property({ type: Array })
 ], DataGrid.prototype, "columns", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -964,9 +841,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], DataGrid.prototype, "detailsOnClick", void 0);
-__decorate([
-    property({ type: Array })
-], DataGrid.prototype, "openDetailedData", void 0);
 __decorate([
     property({ type: Object })
 ], DataGrid.prototype, "getRowContextMenuTemplate", void 0);
@@ -1030,9 +904,6 @@ __decorate([
 __decorate([
     query('mo-data-grid-side-panel')
 ], DataGrid.prototype, "sidePanel", void 0);
-__decorate([
-    query('slot[name=column]')
-], DataGrid.prototype, "columnsSlot", void 0);
 __decorate([
     eventOptions({ passive: true })
 ], DataGrid.prototype, "handleScroll", null);

package/dist/DataGridCell.d.ts

@@ -12,7 +12,7 @@ export declare class DataGridCell<TValue extends KeyPathValueOf<TData>, TData =
     column: DataGridColumn<TData, TValue>;
     row: DataGridRow<TData, TDetailsElement>;
     private editing;
-    get dataGrid(): import("./DataGrid.js").DataGrid<TData, TDetailsElement>;
+    get dataGrid(): import("./DataGrid.js").DataGrid<TData, any>;
     get data(): TData;
     get dataSelector(): object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | (Extract<keyof TData, `${number}`> extends infer T ? T extends Extract<keyof TData, `${number}`> ? T extends keyof TData ? `${T}.${object extends TData[T] ? string : TData[T] extends infer T_1 ? T_1 extends TData[T] ? T_1 extends readonly any[] ? Extract<keyof T_1, `${number}`> | (Extract<keyof T_1, `${number}`> extends infer T_2 ? T_2 extends Extract<keyof T_1, `${number}`> ? T_2 extends keyof T_1 ? never : never : never : never) : T_1 extends object ? Extract<keyof T_1, string> | (Extract<keyof T_1, string> extends infer T_3 ? T_3 extends Extract<keyof T_1, string> ? T_3 extends keyof T_1 ? never : never : never : never) : never : never : never}` : never : never : never) : TData extends object ? Extract<keyof TData, string> | (Extract<keyof TData, string> extends infer T_4 ? T_4 extends Extract<keyof TData, string> ? T_4 extends keyof TData ? `${T_4}.${object extends TData[T_4] ? string : TData[T_4] extends infer T_5 ? T_5 extends TData[T_4] ? T_5 extends readonly any[] ? Extract<keyof T_5, `${number}`> | (Extract<keyof T_5, `${number}`> extends infer T_6 ? T_6 extends Extract<keyof T_5, `${number}`> ? T_6 extends keyof T_5 ? never : never : never : never) : T_5 extends object ? Extract<keyof T_5, string> | (Extract<keyof T_5, string> extends infer T_7 ? T_7 extends Extract<keyof T_5, string> ? T_7 extends keyof T_5 ? never : never : never : never) : never : never : never}` : never : never : never) : never;
     private get cellIndex();

package/dist/DataGridCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA8B,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGrG,OAAO,EAAE,KAAK,cAAc,EAAuB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAOvF;;;;;;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,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACtC,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,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAED,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAMrC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAO7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2CxC,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCAgDzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAa9B;IAED,OAAO,KAAK,eAAe,GAI1B;IAQD,OAAO,KAAK,mBAAmB,GAE9B;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,EAA8B,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGrG,OAAO,EAAE,KAAK,cAAc,EAAuB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAOvF;;;;;;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,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACtC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,iDAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAED,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAMrC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAO7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2CxC,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCAoDzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAa9B;IAED,OAAO,KAAK,eAAe,GAI1B;IAQD,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

@@ -109,7 +109,11 @@ let DataGridCell = class DataGridCell extends Component {
 				text-overflow: ellipsis;
 				font-size: var(--mo-data-grid-cell-font-size);
 				outline: none;
-				margin-block: auto;
+				min-height: var(--mo-data-grid-row-height);
+			}
+
+			:host(:not([isEditing])) {
+				line-height: var(--mo-data-grid-row-height);
 			}
 
 			:host(:not([isEditing]):focus) {

package/dist/DataGridColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAChE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAA;AAEnC,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEhE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAE3D,qBAAa,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAClD,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/B,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAE/B,OAAO,EAAG,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IAGpB,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAgB;IAEnE,SAAS,EAAE,uBAAuB,CAAU;IAC5C,MAAM,UAAQ;IAEd,QAAQ,UAAO;IAEf,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAE7B,OAAO,CAAC,iBAAiB,CAAC,CAAkB;IAC5C,IAAI,gBAAgB,+/CAAyD;IAC7E,IAAI,gBAAgB,CAAC,KAAK,4/CAAA,EAAoC;IAE9D,kBAAkB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEnE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAC5C,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;gBAEpC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAI1D,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,OAAO;IAMlD,OAAO,CAAC,cAAc,CAAC,CAAQ;IAC/B,IAAI,aAAa,WAAsC;IACvD,IAAI,aAAa,CAAC,KAAK,QAAA,EAGtB;IAED,OAAO,CAAC,aAAa,CAAQ;IAC7B,IAAI,YAAY,YAAgC;IAChD,IAAI,YAAY,CAAC,KAAK,SAAA,EAGrB;IAED,IAAI,iBAAiB,6FAIpB;IAED,IAAI,WAAW,mCAgBd;IAED,IAAI,uBAAuB,WA2B1B;CACD"}
+{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAChE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAA;AAEnC,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEhE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAE3D,qBAAa,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAClD,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/B,YAAY,EAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAE/B,OAAO,EAAG,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IAGpB,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAgB;IAEnE,SAAS,EAAE,uBAAuB,CAAU;IAC5C,MAAM,UAAQ;IAEd,QAAQ,UAAO;IAEf,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAE7B,OAAO,CAAC,iBAAiB,CAAC,CAAkB;IAC5C,IAAI,gBAAgB,+/CAAyD;IAC7E,IAAI,gBAAgB,CAAC,KAAK,4/CAAA,EAAoC;IAE9D,kBAAkB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEnE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAC5C,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;gBAEpC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAI1D,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,OAAO;IAMlD,OAAO,CAAC,cAAc,CAAC,CAAQ;IAC/B,IAAI,aAAa,WAAsC;IACvD,IAAI,aAAa,CAAC,KAAK,QAAA,EAGtB;IAED,OAAO,CAAC,aAAa,CAAQ;IAC7B,IAAI,YAAY,YAAgC;IAChD,IAAI,YAAY,CAAC,KAAK,SAAA,EAGrB;IAED,IAAI,iBAAiB,6FAIpB;IAED,IAAI,WAAW,mCAkBd;IAED,IAAI,uBAAuB,WA2B1B;CACD"}

package/dist/DataGridColumn.js

@@ -36,7 +36,8 @@ export class DataGridColumn {
         if (!this.dataGrid || this.sumHeading === undefined || this.getSumTemplate === undefined) {
             return;
         }
-        const sum = this.dataGrid.sumsData
+        const sumsData = this.dataGrid.selectedData.length ? this.dataGrid.selectedData : this.dataGrid.renderDataRecords.map(r => r.data);
+        const sum = sumsData
             .map(data => parseFloat(getValueByKeyPath(data, this.dataSelector)))
             .filter(n => isNaN(n) === false)
             .reduce(((a, b) => a + b), 0)
@@ -58,8 +59,8 @@ export class DataGridColumn {
             .map(c => c.widthInPixels)
             .filter(x => x !== undefined)
             .reduce((a, b) => a + b, 0);
-        const start = `${dataGrid.selectionColumnWidthInPixels + dataGrid.detailsColumnWidthInPixels + calculate('start')}px`;
-        const end = `${calculate('end') + dataGrid.moreColumnWidthInPixels}px`;
+        const start = `${dataGrid.columnsController.selectionColumnWidthInPixels + dataGrid.columnsController.detailsColumnWidthInPixels + calculate('start')}px`;
+        const end = `${calculate('end') + dataGrid.columnsController.moreColumnWidthInPixels}px`;
         switch (this.sticky) {
             case 'start':
                 return `${start} auto`;