@3mo/data-grid 0.8.20 → 0.8.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DataGrid.d.ts +7 -20
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +12 -46
- package/dist/DataGridColumn.d.ts +2 -5
- package/dist/DataGridColumn.d.ts.map +1 -1
- package/dist/DataGridColumn.js +3 -9
- package/dist/DataGridHeader.d.ts.map +1 -1
- package/dist/DataGridHeader.js +6 -35
- package/dist/DataGridSelectionController.d.ts +17 -5
- package/dist/DataGridSelectionController.d.ts.map +1 -1
- package/dist/DataGridSelectionController.js +16 -13
- package/dist/DataGridSortingController.d.ts +40 -0
- package/dist/DataGridSortingController.d.ts.map +1 -0
- package/dist/DataGridSortingController.js +94 -0
- package/dist/custom-elements.json +13 -4
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/DataGrid.d.ts
CHANGED
|
@@ -4,18 +4,10 @@ import { InstanceofAttributeController } from '@3mo/instanceof-attribute-control
|
|
|
4
4
|
import { SlotController } from '@3mo/slot-controller';
|
|
5
5
|
import { ThemeController } from '@3mo/theme';
|
|
6
6
|
import { MediaQueryController } from '@3mo/media-query-observer';
|
|
7
|
+
import { DataGridSelectionController, DataGridSelectionMode } from './DataGridSelectionController.js';
|
|
8
|
+
import { DataGridSortingController, type DataGridRankedSortDefinition, type DataGridSorting } from './DataGridSortingController.js';
|
|
7
9
|
import { DataGridSidePanelTab, type DataGridColumn, type DataGridCell, type DataGridRow } from './index.js';
|
|
8
|
-
import { DataGridSelectionController } from './DataGridSelectionController.js';
|
|
9
10
|
export type DataGridPagination = 'auto' | number;
|
|
10
|
-
export declare enum DataGridSelectionMode {
|
|
11
|
-
None = "none",
|
|
12
|
-
Single = "single",
|
|
13
|
-
Multiple = "multiple"
|
|
14
|
-
}
|
|
15
|
-
export declare enum DataGridSortingStrategy {
|
|
16
|
-
Descending = "descending",
|
|
17
|
-
Ascending = "ascending"
|
|
18
|
-
}
|
|
19
11
|
export declare enum DataGridSelectionBehaviorOnDataChange {
|
|
20
12
|
Reset = "reset",
|
|
21
13
|
Prevent = "prevent",
|
|
@@ -26,11 +18,6 @@ export declare enum DataGridEditability {
|
|
|
26
18
|
Cell = "cell",
|
|
27
19
|
Always = "always"
|
|
28
20
|
}
|
|
29
|
-
export type DataGridSortingDefinition<TData> = {
|
|
30
|
-
selector: KeyPathOf<TData>;
|
|
31
|
-
strategy: DataGridSortingStrategy;
|
|
32
|
-
};
|
|
33
|
-
export type DataGridSorting<TData> = DataGridSortingDefinition<TData> | Array<DataGridSortingDefinition<TData>>;
|
|
34
21
|
/**
|
|
35
22
|
* @element mo-data-grid
|
|
36
23
|
*
|
|
@@ -104,7 +91,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
104
91
|
readonly columnsChange: EventDispatcher<Array<DataGridColumn<TData>>>;
|
|
105
92
|
readonly sidePanelOpen: EventDispatcher<DataGridSidePanelTab>;
|
|
106
93
|
readonly sidePanelClose: EventDispatcher;
|
|
107
|
-
readonly sortingChange: EventDispatcher<
|
|
94
|
+
readonly sortingChange: EventDispatcher<Array<DataGridRankedSortDefinition<TData>>>;
|
|
108
95
|
readonly rowDetailsOpen: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
109
96
|
readonly rowDetailsClose: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
110
97
|
readonly rowClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
|
|
@@ -166,9 +153,8 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
166
153
|
openRowDetails(): void;
|
|
167
154
|
closeRowDetails(): void;
|
|
168
155
|
toggleRowDetails(): void;
|
|
169
|
-
sort(
|
|
170
|
-
unsort(): void;
|
|
171
|
-
handleSortChange(sorting?: DataGridSorting<TData>): void;
|
|
156
|
+
sort(...parameters: Parameters<typeof this.sortingController.set>): void;
|
|
157
|
+
unsort(...parameters: Parameters<typeof this.sortingController.reset>): void;
|
|
172
158
|
setColumns(columns: Array<DataGridColumn<TData>>): void;
|
|
173
159
|
extractColumnsIfNotSetExplicitly(): void;
|
|
174
160
|
extractColumns(): void;
|
|
@@ -196,6 +182,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
196
182
|
protected readonly smallScreenObserverController: MediaQueryController;
|
|
197
183
|
readonly themeController: ThemeController;
|
|
198
184
|
readonly selectionController: DataGridSelectionController<TData>;
|
|
185
|
+
readonly sortingController: DataGridSortingController<TData>;
|
|
199
186
|
readonly rowIntersectionObserver?: IntersectionObserver;
|
|
200
187
|
protected updated(...parameters: Parameters<Component['updated']>): void;
|
|
201
188
|
protected firstUpdated(props: PropertyValues): void;
|
|
@@ -238,7 +225,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
238
225
|
private lastScrollElementTop;
|
|
239
226
|
private handleScroll;
|
|
240
227
|
protected handlePointerDown(event: PointerEvent): void;
|
|
241
|
-
getSorting():
|
|
228
|
+
getSorting(): DataGridRankedSortDefinition<TData>[];
|
|
242
229
|
private getFlattenedData;
|
|
243
230
|
get flattenedData(): TData[];
|
|
244
231
|
protected get sortedData(): TData[];
|
package/dist/DataGrid.d.ts.map
CHANGED
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"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"}
|
package/dist/DataGrid.js
CHANGED
|
@@ -10,8 +10,9 @@ import { ThemeController } from '@3mo/theme';
|
|
|
10
10
|
import { observeMutation } from '@3mo/mutation-observer';
|
|
11
11
|
import { MediaQueryController } from '@3mo/media-query-observer';
|
|
12
12
|
import { Localizer } from '@3mo/localization';
|
|
13
|
+
import { DataGridSelectionController, DataGridSelectionMode } from './DataGridSelectionController.js';
|
|
14
|
+
import { DataGridSortingController } from './DataGridSortingController.js';
|
|
13
15
|
import { CsvGenerator, DataGridColumnComponent, DataGridSidePanelTab } from './index.js';
|
|
14
|
-
import { DataGridSelectionController } from './DataGridSelectionController.js';
|
|
15
16
|
Localizer.register('en', {
|
|
16
17
|
'${count:pluralityNumber} entries selected': [
|
|
17
18
|
'1 entry selected',
|
|
@@ -29,17 +30,6 @@ Localizer.register('de', {
|
|
|
29
30
|
'More Filters': 'Weitere Filter',
|
|
30
31
|
'Deselect All': 'Alle deselektieren',
|
|
31
32
|
});
|
|
32
|
-
export var DataGridSelectionMode;
|
|
33
|
-
(function (DataGridSelectionMode) {
|
|
34
|
-
DataGridSelectionMode["None"] = "none";
|
|
35
|
-
DataGridSelectionMode["Single"] = "single";
|
|
36
|
-
DataGridSelectionMode["Multiple"] = "multiple";
|
|
37
|
-
})(DataGridSelectionMode || (DataGridSelectionMode = {}));
|
|
38
|
-
export var DataGridSortingStrategy;
|
|
39
|
-
(function (DataGridSortingStrategy) {
|
|
40
|
-
DataGridSortingStrategy["Descending"] = "descending";
|
|
41
|
-
DataGridSortingStrategy["Ascending"] = "ascending";
|
|
42
|
-
})(DataGridSortingStrategy || (DataGridSortingStrategy = {}));
|
|
43
33
|
export var DataGridSelectionBehaviorOnDataChange;
|
|
44
34
|
(function (DataGridSelectionBehaviorOnDataChange) {
|
|
45
35
|
DataGridSelectionBehaviorOnDataChange["Reset"] = "reset";
|
|
@@ -149,6 +139,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
149
139
|
this.smallScreenObserverController = new MediaQueryController(this, '(max-width: 768px)');
|
|
150
140
|
this.themeController = new ThemeController(this);
|
|
151
141
|
this.selectionController = new DataGridSelectionController(this);
|
|
142
|
+
this.sortingController = new DataGridSortingController(this);
|
|
152
143
|
this.splitterResizerTemplate = html `
|
|
153
144
|
<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>
|
|
154
145
|
`;
|
|
@@ -211,7 +202,9 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
211
202
|
return undefined;
|
|
212
203
|
}
|
|
213
204
|
const subValue = getValueByKeyPath(data, this.subDataGridDataSelector);
|
|
214
|
-
return Array.isArray(subValue)
|
|
205
|
+
return !Array.isArray(subValue) || !subValue.length
|
|
206
|
+
? undefined
|
|
207
|
+
: this.sortingController.toSorted(subValue);
|
|
215
208
|
}
|
|
216
209
|
hasDetail(data) {
|
|
217
210
|
return !!this.getSubData(data) || (this.hasDataDetail?.(data) ??
|
|
@@ -234,15 +227,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
234
227
|
this.openRowDetails();
|
|
235
228
|
}
|
|
236
229
|
}
|
|
237
|
-
sort(
|
|
238
|
-
this.
|
|
239
|
-
this.sortingChange.dispatch(sorting);
|
|
230
|
+
sort(...parameters) {
|
|
231
|
+
this.sortingController.set(...parameters);
|
|
240
232
|
}
|
|
241
|
-
unsort() {
|
|
242
|
-
this.
|
|
243
|
-
}
|
|
244
|
-
handleSortChange(sorting) {
|
|
245
|
-
this.sort(sorting);
|
|
233
|
+
unsort(...parameters) {
|
|
234
|
+
this.sortingController.reset(...parameters);
|
|
246
235
|
}
|
|
247
236
|
setColumns(columns) {
|
|
248
237
|
this.columns = columns;
|
|
@@ -800,11 +789,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
800
789
|
this.rows.forEach(row => row.cells.forEach(cell => cell.handlePointerDown(event)));
|
|
801
790
|
}
|
|
802
791
|
getSorting() {
|
|
803
|
-
return
|
|
804
|
-
? []
|
|
805
|
-
: Array.isArray(this.sorting)
|
|
806
|
-
? this.sorting
|
|
807
|
-
: [this.sorting];
|
|
792
|
+
return this.sortingController.get();
|
|
808
793
|
}
|
|
809
794
|
*getFlattenedData() {
|
|
810
795
|
if (!this.subDataGridDataSelector) {
|
|
@@ -829,26 +814,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
|
|
|
829
814
|
return [...this.getFlattenedData()].map(({ data }) => data);
|
|
830
815
|
}
|
|
831
816
|
get sortedData() {
|
|
832
|
-
|
|
833
|
-
const sortedData = [...this.data];
|
|
834
|
-
if (!sorting?.length) {
|
|
835
|
-
return sortedData;
|
|
836
|
-
}
|
|
837
|
-
return sortedData.sort((a, b) => {
|
|
838
|
-
for (const sortCriteria of sorting) {
|
|
839
|
-
const { selector, strategy } = sortCriteria;
|
|
840
|
-
const aValue = getValueByKeyPath(a, selector) ?? Infinity;
|
|
841
|
-
const bValue = getValueByKeyPath(b, selector) ?? Infinity;
|
|
842
|
-
if (aValue < bValue) {
|
|
843
|
-
return strategy === DataGridSortingStrategy.Ascending ? -1 : 1;
|
|
844
|
-
}
|
|
845
|
-
else if (aValue > bValue) {
|
|
846
|
-
return strategy === DataGridSortingStrategy.Ascending ? 1 : -1;
|
|
847
|
-
}
|
|
848
|
-
// If values are equal, continue to the next level of sorting
|
|
849
|
-
}
|
|
850
|
-
return 0; // Items are equal in all sorting criteria
|
|
851
|
-
});
|
|
817
|
+
return this.sortingController.toSorted([...this.data]);
|
|
852
818
|
}
|
|
853
819
|
get renderData() {
|
|
854
820
|
if (this.hasPagination === false) {
|
package/dist/DataGridColumn.d.ts
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import { type HTMLTemplateResult } from '@a11d/lit';
|
|
2
|
-
import type { DataGrid
|
|
2
|
+
import type { DataGrid } from './index.js';
|
|
3
3
|
import type * as CSS from 'csstype';
|
|
4
4
|
export type DataGridColumnAlignment = 'start' | 'center' | 'end';
|
|
5
5
|
export type DataGridColumnSticky = 'start' | 'both' | 'end';
|
|
6
|
-
export type DataGridRankedSortDefinition<TData> = DataGridSortingDefinition<TData> & {
|
|
7
|
-
rank: number;
|
|
8
|
-
};
|
|
9
6
|
export declare class DataGridColumn<TData, TValue = unknown> {
|
|
10
7
|
dataGrid?: DataGrid<TData, any>;
|
|
11
8
|
dataSelector: KeyPathOf<TData>;
|
|
@@ -32,7 +29,7 @@ export declare class DataGridColumn<TData, TValue = unknown> {
|
|
|
32
29
|
private _intersecting;
|
|
33
30
|
get intersecting(): boolean;
|
|
34
31
|
set intersecting(value: boolean);
|
|
35
|
-
get sortingDefinition(): DataGridRankedSortDefinition<TData> | undefined;
|
|
32
|
+
get sortingDefinition(): import("./DataGridSortingController.js").DataGridRankedSortDefinition<TData> | undefined;
|
|
36
33
|
get sumTemplate(): HTMLTemplateResult | undefined;
|
|
37
34
|
get stickyColumnInsetInline(): string;
|
|
38
35
|
}
|
|
@@ -1 +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,
|
|
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"}
|
package/dist/DataGridColumn.js
CHANGED
|
@@ -28,15 +28,9 @@ export class DataGridColumn {
|
|
|
28
28
|
this.dataGrid?.requestUpdate();
|
|
29
29
|
}
|
|
30
30
|
get sortingDefinition() {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const sorting = this.dataGrid.getSorting();
|
|
35
|
-
const definition = sorting.find(s => s.selector === this.sortDataSelector);
|
|
36
|
-
return !definition ? undefined : {
|
|
37
|
-
...definition,
|
|
38
|
-
rank: sorting.indexOf(definition) + 1
|
|
39
|
-
};
|
|
31
|
+
return this.dataGrid
|
|
32
|
+
?.getSorting()
|
|
33
|
+
.find(s => s.selector === this.sortDataSelector);
|
|
40
34
|
}
|
|
41
35
|
get sumTemplate() {
|
|
42
36
|
if (!this.dataGrid || this.sumHeading === undefined || this.getSumTemplate === undefined) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAgD,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAgD,MAAM,WAAW,CAAA;AAI9F,OAAO,EAAuE,KAAK,QAAQ,EAAwB,MAAM,YAAY,CAAA;AAErI,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1C,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,mBAAmB,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEnC,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/C,SAAS,EAAE,iBAAiB,CAAQ;IACJ,WAAW,UAAQ;cAE5C,SAAS;cAKT,YAAY;IAK/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;IAED,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAQ7C;IAED,WAAoB,MAAM,kCAmFzB;IAED,cAAuB,QAAQ,0CAQ9B;IAED,OAAO,KAAK,uBAAuB,GAYlC;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAqCrC;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,YAAY,GAQvB;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAOrC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}
|
package/dist/DataGridHeader.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { component, Component, css, html, ifDefined, property, event, style } from '@a11d/lit';
|
|
3
|
-
import { KeyboardController } from '@3mo/keyboard-controller';
|
|
4
3
|
import { tooltip } from '@3mo/tooltip';
|
|
5
4
|
import { observeResize } from '@3mo/resize-observer';
|
|
6
5
|
import { DataGridSelectionMode, DataGridSortingStrategy, DataGridSidePanelTab } from './index.js';
|
|
@@ -50,7 +49,7 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
50
49
|
|
|
51
50
|
${sortIcon === undefined ? html.nothing : html `
|
|
52
51
|
${!sortingRank ? html.nothing : html `<span class='sort-rank'>${sortingRank}</span>`}
|
|
53
|
-
<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
|
|
52
|
+
<mo-icon ${style({ color: 'var(--mo-color-accent)', marginInline: '3px' })} icon=${ifDefined(sortIcon)}></mo-icon>
|
|
54
53
|
`}
|
|
55
54
|
</mo-flex>
|
|
56
55
|
<mo-data-grid-header-separator
|
|
@@ -113,7 +112,8 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
113
112
|
color: var(--mo-color-foreground);
|
|
114
113
|
border: 1px solid var(--mo-color-gray-transparent);
|
|
115
114
|
border-radius: 50%;
|
|
116
|
-
width:
|
|
115
|
+
width: fit-content;
|
|
116
|
+
user-select: none;
|
|
117
117
|
height: 20px;
|
|
118
118
|
aspect-ratio: 1 / 1;
|
|
119
119
|
display: flex;
|
|
@@ -215,39 +215,10 @@ let DataGridHeader = class DataGridHeader extends Component {
|
|
|
215
215
|
return observeResize(([entry]) => this.dataGrid[property] = entry?.contentRect.width ?? 0);
|
|
216
216
|
}
|
|
217
217
|
sort(column) {
|
|
218
|
-
if (column.sortable
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
const defaultSortingStrategy = DataGridSortingStrategy.Descending;
|
|
222
|
-
const sortDataSelector = column.sortDataSelector;
|
|
223
|
-
const sortingDefinition = column.sortingDefinition;
|
|
224
|
-
if (KeyboardController.shift || KeyboardController.meta || KeyboardController.ctrl) {
|
|
225
|
-
const sortings = this.dataGrid.getSorting();
|
|
226
|
-
if (sortingDefinition?.selector !== sortDataSelector) {
|
|
227
|
-
this.dataGrid.handleSortChange([...sortings, { selector: sortDataSelector, strategy: defaultSortingStrategy }]);
|
|
228
|
-
}
|
|
229
|
-
else if (sortingDefinition.strategy === DataGridSortingStrategy.Descending) {
|
|
230
|
-
this.dataGrid.handleSortChange(sortings.map(x => x.selector !== sortDataSelector ? x : {
|
|
231
|
-
selector: sortDataSelector,
|
|
232
|
-
strategy: DataGridSortingStrategy.Ascending,
|
|
233
|
-
}));
|
|
234
|
-
}
|
|
235
|
-
else {
|
|
236
|
-
this.dataGrid.handleSortChange(this.dataGrid.getSorting().filter(x => x.selector !== sortDataSelector));
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
|
-
else {
|
|
240
|
-
if (sortingDefinition?.selector !== sortDataSelector) {
|
|
241
|
-
this.dataGrid.handleSortChange({ selector: sortDataSelector, strategy: defaultSortingStrategy });
|
|
242
|
-
}
|
|
243
|
-
else if (sortingDefinition.strategy === DataGridSortingStrategy.Descending) {
|
|
244
|
-
this.dataGrid.handleSortChange({ selector: sortDataSelector, strategy: DataGridSortingStrategy.Ascending });
|
|
245
|
-
}
|
|
246
|
-
else {
|
|
247
|
-
this.dataGrid.handleSortChange(undefined);
|
|
248
|
-
}
|
|
218
|
+
if (column.sortable) {
|
|
219
|
+
this.dataGrid.sortingController.toggle(column.sortDataSelector);
|
|
220
|
+
this.requestUpdate();
|
|
249
221
|
}
|
|
250
|
-
this.requestUpdate();
|
|
251
222
|
}
|
|
252
223
|
toggleAllDetails() {
|
|
253
224
|
this.dataGrid.toggleRowDetails();
|
|
@@ -1,9 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
export declare enum DataGridSelectionMode {
|
|
2
|
+
None = "none",
|
|
3
|
+
Single = "single",
|
|
4
|
+
Multiple = "multiple"
|
|
5
|
+
}
|
|
6
|
+
interface SelectableComponent<TData> {
|
|
7
|
+
selectionMode: DataGridSelectionMode;
|
|
8
|
+
readonly flattenedData: Array<TData>;
|
|
9
|
+
selectedData: Array<TData>;
|
|
10
|
+
isDataSelectable?(data: TData): boolean;
|
|
11
|
+
selectionCheckboxesHidden?: boolean;
|
|
12
|
+
readonly selectionChange?: EventDispatcher<Array<TData>>;
|
|
13
|
+
}
|
|
14
|
+
export declare class DataGridSelectionController<TData> {
|
|
15
|
+
readonly host: SelectableComponent<TData>;
|
|
5
16
|
private lastActiveSelection?;
|
|
6
|
-
constructor(
|
|
17
|
+
constructor(host: SelectableComponent<TData>);
|
|
7
18
|
get hasSelection(): boolean;
|
|
8
19
|
private get mode();
|
|
9
20
|
private get data();
|
|
@@ -18,4 +29,5 @@ export declare class DataGridSelectionController<TData> extends Controller {
|
|
|
18
29
|
selectPreviouslySelectedData(): void;
|
|
19
30
|
setSelection(data: TData, selected: boolean): void;
|
|
20
31
|
}
|
|
32
|
+
export {};
|
|
21
33
|
//# sourceMappingURL=DataGridSelectionController.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridSelectionController.d.ts","sourceRoot":"","sources":["../DataGridSelectionController.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DataGridSelectionController.d.ts","sourceRoot":"","sources":["../DataGridSelectionController.ts"],"names":[],"mappings":"AAEA,oBAAY,qBAAqB;IAChC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACrB;AASD,UAAU,mBAAmB,CAAC,KAAK;IAClC,aAAa,EAAE,qBAAqB,CAAA;IACpC,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACpC,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IAC1B,gBAAgB,CAAC,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,CAAA;IACvC,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;CACxD;AAED,qBAAa,2BAA2B,CAAC,KAAK;IAMjC,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC,KAAK,CAAC;IALrD,OAAO,CAAC,mBAAmB,CAAC,CAG3B;gBAEoB,IAAI,EAAE,mBAAmB,CAAC,KAAK,CAAC;IAErD,IAAI,YAAY,YAEf;IAED,OAAO,KAAK,IAAI,GAAqC;IAErD,OAAO,KAAK,IAAI,GAAqC;IACrD,OAAO,KAAK,cAAc,GAAyD;IAEnF,OAAO,KAAK,YAAY,GAAoC;IAC5D,OAAO,KAAK,YAAY,QAAwC;IAEhE,OAAO,KAAK,sBAAsB,GASjC;IAED,YAAY,CAAC,IAAI,EAAE,KAAK;IAIxB,SAAS;IAMT,WAAW;IAIX,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;IAQzB,4BAA4B;IAI5B,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO;CAqC3C"}
|
|
@@ -1,19 +1,22 @@
|
|
|
1
1
|
import { KeyboardController } from '@3mo/keyboard-controller';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
export var DataGridSelectionMode;
|
|
3
|
+
(function (DataGridSelectionMode) {
|
|
4
|
+
DataGridSelectionMode["None"] = "none";
|
|
5
|
+
DataGridSelectionMode["Single"] = "single";
|
|
6
|
+
DataGridSelectionMode["Multiple"] = "multiple";
|
|
7
|
+
})(DataGridSelectionMode || (DataGridSelectionMode = {}));
|
|
8
|
+
export class DataGridSelectionController {
|
|
9
|
+
constructor(host) {
|
|
10
|
+
this.host = host;
|
|
8
11
|
}
|
|
9
12
|
get hasSelection() {
|
|
10
13
|
return this.mode !== DataGridSelectionMode.None;
|
|
11
14
|
}
|
|
12
|
-
get mode() { return this.
|
|
13
|
-
get data() { return this.
|
|
15
|
+
get mode() { return this.host.selectionMode; }
|
|
16
|
+
get data() { return this.host.flattenedData; }
|
|
14
17
|
get selectableData() { return this.data.filter(d => this.isSelectable(d)); }
|
|
15
|
-
get selectedData() { return this.
|
|
16
|
-
set selectedData(data) { this.
|
|
18
|
+
get selectedData() { return this.host.selectedData; }
|
|
19
|
+
set selectedData(data) { this.host.selectedData = data; }
|
|
17
20
|
get previouslySelectedData() {
|
|
18
21
|
const hasId = this.selectedData.every(d => Object.keys(d).includes('id'));
|
|
19
22
|
if (hasId) {
|
|
@@ -26,7 +29,7 @@ export class DataGridSelectionController extends Controller {
|
|
|
26
29
|
}
|
|
27
30
|
}
|
|
28
31
|
isSelectable(data) {
|
|
29
|
-
return this.
|
|
32
|
+
return this.host.isDataSelectable?.(data) ?? true;
|
|
30
33
|
}
|
|
31
34
|
selectAll() {
|
|
32
35
|
if (this.mode === DataGridSelectionMode.Multiple) {
|
|
@@ -40,7 +43,7 @@ export class DataGridSelectionController extends Controller {
|
|
|
40
43
|
if (this.hasSelection) {
|
|
41
44
|
const selectableData = data.filter(d => this.isSelectable(d));
|
|
42
45
|
this.selectedData = selectableData;
|
|
43
|
-
this.
|
|
46
|
+
this.host.selectionChange?.dispatch(selectableData);
|
|
44
47
|
}
|
|
45
48
|
}
|
|
46
49
|
selectPreviouslySelectedData() {
|
|
@@ -67,7 +70,7 @@ export class DataGridSelectionController extends Controller {
|
|
|
67
70
|
else {
|
|
68
71
|
if (selected) {
|
|
69
72
|
if (this.mode === DataGridSelectionMode.Multiple) {
|
|
70
|
-
dataToSelect = this.
|
|
73
|
+
dataToSelect = this.host.selectionCheckboxesHidden
|
|
71
74
|
? [data]
|
|
72
75
|
: [...dataToSelect, data];
|
|
73
76
|
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export declare enum DataGridSortingStrategy {
|
|
2
|
+
Descending = "descending",
|
|
3
|
+
Ascending = "ascending"
|
|
4
|
+
}
|
|
5
|
+
export type DataGridSortingDefinition<TData> = {
|
|
6
|
+
readonly selector: KeyPathOf<TData>;
|
|
7
|
+
readonly strategy: DataGridSortingStrategy;
|
|
8
|
+
};
|
|
9
|
+
export type DataGridRankedSortDefinition<TData> = DataGridSortingDefinition<TData> & {
|
|
10
|
+
readonly rank: number;
|
|
11
|
+
};
|
|
12
|
+
export type DataGridSorting<TData> = DataGridSortingDefinition<TData> | Array<DataGridSortingDefinition<TData>>;
|
|
13
|
+
interface SortableComponent<TData> {
|
|
14
|
+
sorting?: DataGridSorting<TData> | undefined;
|
|
15
|
+
readonly sortingChange?: EventDispatcher<Array<DataGridRankedSortDefinition<TData>>>;
|
|
16
|
+
}
|
|
17
|
+
export declare class DataGridSortingController<TData> {
|
|
18
|
+
readonly host: SortableComponent<TData>;
|
|
19
|
+
constructor(host: SortableComponent<TData>);
|
|
20
|
+
get(): DataGridRankedSortDefinition<TData>[];
|
|
21
|
+
set(sorting: DataGridSorting<TData>): void;
|
|
22
|
+
private toNormalizedRanked;
|
|
23
|
+
reset(): void;
|
|
24
|
+
/**
|
|
25
|
+
* Toggles the sorting strategy of the provided key path.
|
|
26
|
+
* If a modifier key is pressed, the sorting will be added to the existing sorting definitions.
|
|
27
|
+
*
|
|
28
|
+
* @param selector - The key path of the data to sort by
|
|
29
|
+
* @param strategy - The sorting strategy to use forcefully. If not provided, the strategy will be toggled between ascending, descending, and unsorted
|
|
30
|
+
*/
|
|
31
|
+
toggle(selector: KeyPathOf<TData>, strategy?: DataGridSortingStrategy): void;
|
|
32
|
+
/**
|
|
33
|
+
* Sorts the provided data based on the current sorting definitions
|
|
34
|
+
* @param data - The data to sort
|
|
35
|
+
* @returns - The sorted data
|
|
36
|
+
*/
|
|
37
|
+
toSorted(data: Array<TData>): TData[];
|
|
38
|
+
}
|
|
39
|
+
export {};
|
|
40
|
+
//# sourceMappingURL=DataGridSortingController.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataGridSortingController.d.ts","sourceRoot":"","sources":["../DataGridSortingController.ts"],"names":[],"mappings":"AAEA,oBAAY,uBAAuB;IAClC,UAAU,eAAe;IACzB,SAAS,cAAc;CACvB;AAED,MAAM,MAAM,yBAAyB,CAAC,KAAK,IAAI;IAC9C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,uBAAuB,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,4BAA4B,CAAC,KAAK,IAAI,yBAAyB,CAAC,KAAK,CAAC,GAAG;IACpF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,KAAK,IAC9B,yBAAyB,CAAC,KAAK,CAAC,GAChC,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAA;AAE1C,UAAU,iBAAiB,CAAC,KAAK;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG,SAAS,CAAA;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;CACpF;AAED,qBAAa,yBAAyB,CAAC,KAAK;IAC/B,QAAQ,CAAC,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC;gBAA9B,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAAC;IAEnD,GAAG;IAIH,GAAG,CAAC,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC;IAMnC,OAAO,CAAC,kBAAkB;IAK1B,KAAK;IAIL;;;;;;OAMG;IACH,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,EAAE,uBAAuB;IAyCrE;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAwB3B"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { KeyboardController } from '@3mo/keyboard-controller';
|
|
2
|
+
export var DataGridSortingStrategy;
|
|
3
|
+
(function (DataGridSortingStrategy) {
|
|
4
|
+
DataGridSortingStrategy["Descending"] = "descending";
|
|
5
|
+
DataGridSortingStrategy["Ascending"] = "ascending";
|
|
6
|
+
})(DataGridSortingStrategy || (DataGridSortingStrategy = {}));
|
|
7
|
+
export class DataGridSortingController {
|
|
8
|
+
constructor(host) {
|
|
9
|
+
this.host = host;
|
|
10
|
+
}
|
|
11
|
+
get() {
|
|
12
|
+
return this.toNormalizedRanked(this.host.sorting ?? []);
|
|
13
|
+
}
|
|
14
|
+
set(sorting) {
|
|
15
|
+
const normalized = this.toNormalizedRanked(sorting ?? []);
|
|
16
|
+
this.host.sorting = normalized;
|
|
17
|
+
this.host.sortingChange?.dispatch(normalized);
|
|
18
|
+
}
|
|
19
|
+
toNormalizedRanked(sorting) {
|
|
20
|
+
return (Array.isArray(sorting) ? sorting : [sorting])
|
|
21
|
+
.map((d, i) => ({ ...d, rank: i + 1 }));
|
|
22
|
+
}
|
|
23
|
+
reset() {
|
|
24
|
+
this.set([]);
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Toggles the sorting strategy of the provided key path.
|
|
28
|
+
* If a modifier key is pressed, the sorting will be added to the existing sorting definitions.
|
|
29
|
+
*
|
|
30
|
+
* @param selector - The key path of the data to sort by
|
|
31
|
+
* @param strategy - The sorting strategy to use forcefully. If not provided, the strategy will be toggled between ascending, descending, and unsorted
|
|
32
|
+
*/
|
|
33
|
+
toggle(selector, strategy) {
|
|
34
|
+
const defaultSortingStrategy = DataGridSortingStrategy.Descending;
|
|
35
|
+
const sortings = this.get();
|
|
36
|
+
const existing = sortings.find(x => x.selector === selector);
|
|
37
|
+
const allowMultiple = KeyboardController.shift || KeyboardController.meta || KeyboardController.ctrl;
|
|
38
|
+
switch (true) {
|
|
39
|
+
case allowMultiple && !!strategy:
|
|
40
|
+
this.set([...sortings, { selector, strategy }]);
|
|
41
|
+
break;
|
|
42
|
+
case allowMultiple && existing?.selector !== selector:
|
|
43
|
+
this.set([...sortings, { selector, strategy: defaultSortingStrategy }]);
|
|
44
|
+
break;
|
|
45
|
+
case allowMultiple && existing?.strategy === DataGridSortingStrategy.Descending:
|
|
46
|
+
this.set(sortings.map(x => x.selector !== selector ? x : {
|
|
47
|
+
selector,
|
|
48
|
+
strategy: DataGridSortingStrategy.Ascending,
|
|
49
|
+
}));
|
|
50
|
+
break;
|
|
51
|
+
case allowMultiple:
|
|
52
|
+
this.set(sortings.filter(x => x.selector !== selector));
|
|
53
|
+
break;
|
|
54
|
+
case !!strategy:
|
|
55
|
+
this.set({ selector, strategy });
|
|
56
|
+
break;
|
|
57
|
+
case existing?.selector !== selector:
|
|
58
|
+
this.set({ selector, strategy: defaultSortingStrategy });
|
|
59
|
+
break;
|
|
60
|
+
case existing?.strategy === DataGridSortingStrategy.Descending:
|
|
61
|
+
this.set({ selector, strategy: DataGridSortingStrategy.Ascending });
|
|
62
|
+
break;
|
|
63
|
+
default:
|
|
64
|
+
this.reset();
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Sorts the provided data based on the current sorting definitions
|
|
70
|
+
* @param data - The data to sort
|
|
71
|
+
* @returns - The sorted data
|
|
72
|
+
*/
|
|
73
|
+
toSorted(data) {
|
|
74
|
+
const sorting = this.get();
|
|
75
|
+
if (!sorting?.length) {
|
|
76
|
+
return data;
|
|
77
|
+
}
|
|
78
|
+
return data.sort((a, b) => {
|
|
79
|
+
for (const definition of sorting) {
|
|
80
|
+
const { selector, strategy } = definition;
|
|
81
|
+
const aValue = getValueByKeyPath(a, selector) ?? Infinity;
|
|
82
|
+
const bValue = getValueByKeyPath(b, selector) ?? Infinity;
|
|
83
|
+
if (aValue < bValue) {
|
|
84
|
+
return strategy === DataGridSortingStrategy.Ascending ? -1 : 1;
|
|
85
|
+
}
|
|
86
|
+
else if (aValue > bValue) {
|
|
87
|
+
return strategy === DataGridSortingStrategy.Ascending ? 1 : -1;
|
|
88
|
+
}
|
|
89
|
+
// If values are equal, continue to the next level of sorting
|
|
90
|
+
}
|
|
91
|
+
return 0; // Items are equal in all sorting criteria
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
},
|
|
209
209
|
{
|
|
210
210
|
"name": "sortingChange",
|
|
211
|
-
"type": "EventDispatcher<
|
|
211
|
+
"type": "EventDispatcher<DataGridRankedSortDefinition<TData>[]>"
|
|
212
212
|
},
|
|
213
213
|
{
|
|
214
214
|
"name": "rowDetailsOpen",
|
|
@@ -321,6 +321,11 @@
|
|
|
321
321
|
"type": "DataGridSelectionController<TData>",
|
|
322
322
|
"default": "\"new DataGridSelectionController(this)\""
|
|
323
323
|
},
|
|
324
|
+
{
|
|
325
|
+
"name": "sortingController",
|
|
326
|
+
"type": "DataGridSortingController<TData>",
|
|
327
|
+
"default": "\"new DataGridSortingController(this)\""
|
|
328
|
+
},
|
|
324
329
|
{
|
|
325
330
|
"name": "rowIntersectionObserver",
|
|
326
331
|
"type": "IntersectionObserver | undefined"
|
|
@@ -607,7 +612,7 @@
|
|
|
607
612
|
},
|
|
608
613
|
{
|
|
609
614
|
"name": "sortingChange",
|
|
610
|
-
"type": "CustomEvent<
|
|
615
|
+
"type": "CustomEvent<DataGridRankedSortDefinition<TData>[]>"
|
|
611
616
|
},
|
|
612
617
|
{
|
|
613
618
|
"name": "rowDetailsOpen",
|
|
@@ -3337,7 +3342,7 @@
|
|
|
3337
3342
|
},
|
|
3338
3343
|
{
|
|
3339
3344
|
"name": "sortingChange",
|
|
3340
|
-
"type": "EventDispatcher<
|
|
3345
|
+
"type": "EventDispatcher<DataGridRankedSortDefinition<TData>[]>"
|
|
3341
3346
|
},
|
|
3342
3347
|
{
|
|
3343
3348
|
"name": "rowDetailsOpen",
|
|
@@ -3447,6 +3452,10 @@
|
|
|
3447
3452
|
"name": "selectionController",
|
|
3448
3453
|
"type": "DataGridSelectionController<TData>"
|
|
3449
3454
|
},
|
|
3455
|
+
{
|
|
3456
|
+
"name": "sortingController",
|
|
3457
|
+
"type": "DataGridSortingController<TData>"
|
|
3458
|
+
},
|
|
3450
3459
|
{
|
|
3451
3460
|
"name": "rowIntersectionObserver",
|
|
3452
3461
|
"type": "IntersectionObserver | undefined"
|
|
@@ -3712,7 +3721,7 @@
|
|
|
3712
3721
|
},
|
|
3713
3722
|
{
|
|
3714
3723
|
"name": "sortingChange",
|
|
3715
|
-
"type": "CustomEvent<
|
|
3724
|
+
"type": "CustomEvent<DataGridRankedSortDefinition<TData>[]>"
|
|
3716
3725
|
},
|
|
3717
3726
|
{
|
|
3718
3727
|
"name": "rowDetailsOpen",
|
package/dist/index.d.ts
CHANGED
|
@@ -19,6 +19,8 @@ import '@3mo/focus-ring';
|
|
|
19
19
|
import './types.js';
|
|
20
20
|
export * from './DataGridColumn.js';
|
|
21
21
|
export * from './columns/index.js';
|
|
22
|
+
export * from './DataGridSelectionController.js';
|
|
23
|
+
export * from './DataGridSortingController.js';
|
|
22
24
|
export * from './DataGrid.js';
|
|
23
25
|
export * from './DataGridHeader.js';
|
|
24
26
|
export * from './DataGridHeaderSeparator.js';
|