@mui/x-data-grid-premium 8.13.1 → 8.14.1
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/CHANGELOG.md +204 -1
- package/DataGridPremium/DataGridPremium.js +7 -5
- package/DataGridPremium/useDataGridPremiumProps.js +3 -2
- package/components/GridDataSourceGroupingCriteriaCell.js +8 -2
- package/components/GridPremiumToolbar.js +1 -2
- package/components/pivotPanel/GridPivotPanelField.js +4 -4
- package/esm/DataGridPremium/DataGridPremium.js +7 -5
- package/esm/DataGridPremium/useDataGridPremiumProps.js +3 -2
- package/esm/components/GridDataSourceGroupingCriteriaCell.js +9 -3
- package/esm/components/GridPremiumToolbar.js +1 -2
- package/esm/components/pivotPanel/GridPivotPanelField.js +4 -4
- package/esm/hooks/features/aggregation/useGridAggregation.js +3 -2
- package/esm/hooks/features/dataSource/models.d.ts +52 -1
- package/esm/hooks/features/dataSource/useGridDataSourcePremium.js +30 -5
- package/esm/hooks/features/dataSource/utils.d.ts +6 -0
- package/esm/hooks/features/dataSource/utils.js +140 -0
- package/esm/hooks/features/index.d.ts +2 -1
- package/esm/hooks/features/index.js +2 -1
- package/esm/hooks/features/pivoting/gridPivotingInterfaces.d.ts +23 -13
- package/esm/hooks/features/pivoting/gridPivotingSelectors.d.ts +1 -1
- package/esm/hooks/features/pivoting/index.d.ts +1 -0
- package/esm/hooks/features/pivoting/index.js +1 -0
- package/esm/hooks/features/pivoting/useGridPivoting.d.ts +1 -1
- package/esm/hooks/features/pivoting/useGridPivoting.js +83 -32
- package/esm/hooks/features/pivoting/utils.d.ts +7 -9
- package/esm/hooks/features/pivoting/utils.js +39 -24
- package/esm/hooks/features/rowGrouping/createGroupingColDef.js +1 -1
- package/esm/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js +7 -3
- package/esm/hooks/features/rowGrouping/useGridRowGrouping.d.ts +1 -1
- package/esm/index.js +1 -1
- package/esm/models/dataGridPremiumProps.d.ts +15 -14
- package/hooks/features/aggregation/useGridAggregation.js +2 -1
- package/hooks/features/dataSource/models.d.ts +52 -1
- package/hooks/features/dataSource/useGridDataSourcePremium.js +29 -4
- package/hooks/features/dataSource/utils.d.ts +6 -0
- package/hooks/features/dataSource/utils.js +148 -0
- package/hooks/features/index.d.ts +2 -1
- package/hooks/features/index.js +11 -0
- package/hooks/features/pivoting/gridPivotingInterfaces.d.ts +23 -13
- package/hooks/features/pivoting/gridPivotingSelectors.d.ts +1 -1
- package/hooks/features/pivoting/index.d.ts +1 -0
- package/hooks/features/pivoting/index.js +12 -0
- package/hooks/features/pivoting/useGridPivoting.d.ts +1 -1
- package/hooks/features/pivoting/useGridPivoting.js +82 -31
- package/hooks/features/pivoting/utils.d.ts +7 -9
- package/hooks/features/pivoting/utils.js +42 -27
- package/hooks/features/rowGrouping/createGroupingColDef.js +1 -1
- package/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js +6 -2
- package/hooks/features/rowGrouping/useGridRowGrouping.d.ts +1 -1
- package/index.js +1 -1
- package/models/dataGridPremiumProps.d.ts +15 -14
- package/package.json +6 -7
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "gridPivotModelSelector", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _gridPivotingSelectors.gridPivotModelSelector;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _gridPivotingSelectors = require("./gridPivotingSelectors");
|
|
@@ -4,5 +4,5 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
|
|
|
4
4
|
import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
|
|
5
5
|
import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
|
|
6
6
|
export declare const pivotingStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'pivotActive' | 'pivotModel' | 'pivotPanelOpen' | 'initialState' | 'disablePivoting' | 'getPivotDerivedColumns' | 'columns'>, GridPrivateApiPremium>;
|
|
7
|
-
export declare const useGridPivoting: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pivotActive" | "onPivotActiveChange" | "pivotModel" | "onPivotModelChange" | "pivotPanelOpen" | "onPivotPanelOpenChange" | "disablePivoting" | "getPivotDerivedColumns" | "pivotingColDef" | "groupingColDef" | "aggregationFunctions">, originalColumnsProp: readonly GridColDef[], originalRowsProp: readonly GridRowModel[]) => void;
|
|
7
|
+
export declare const useGridPivoting: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pivotActive" | "onPivotActiveChange" | "pivotModel" | "onPivotModelChange" | "pivotPanelOpen" | "onPivotPanelOpenChange" | "disablePivoting" | "getPivotDerivedColumns" | "pivotingColDef" | "groupingColDef" | "aggregationFunctions" | "loading" | "dataSource">, originalColumnsProp: readonly GridColDef[], originalRowsProp: readonly GridRowModel[]) => void;
|
|
8
8
|
export declare const useGridPivotingExportState: (apiRef: RefObject<GridPrivateApiPremium>) => void;
|
|
@@ -32,7 +32,7 @@ const pivotingStateInitializer = (state, props, apiRef) => {
|
|
|
32
32
|
current: undefined
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
|
-
if (
|
|
35
|
+
if (props.disablePivoting) {
|
|
36
36
|
return (0, _extends2.default)({}, state, {
|
|
37
37
|
pivoting: {
|
|
38
38
|
active: false,
|
|
@@ -58,11 +58,12 @@ const pivotingStateInitializer = (state, props, apiRef) => {
|
|
|
58
58
|
exports.pivotingStateInitializer = pivotingStateInitializer;
|
|
59
59
|
const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) => {
|
|
60
60
|
const isPivotActive = (0, _internals.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotActiveSelector);
|
|
61
|
+
const isLoading = props.loading ?? (0, _xDataGridPro.gridRowsLoadingSelector)(apiRef);
|
|
61
62
|
const {
|
|
62
63
|
exportedStateRef,
|
|
63
64
|
nonPivotDataRef
|
|
64
65
|
} = apiRef.current.caches.pivoting;
|
|
65
|
-
const isPivotingAvailable =
|
|
66
|
+
const isPivotingAvailable = !props.disablePivoting;
|
|
66
67
|
apiRef.current.registerControlState({
|
|
67
68
|
stateId: 'pivotModel',
|
|
68
69
|
propModel: props.pivotModel,
|
|
@@ -88,16 +89,19 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
|
|
|
88
89
|
if (!exportedStateRef.current) {
|
|
89
90
|
exportedStateRef.current = apiRef.current.exportState();
|
|
90
91
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
let rows = [];
|
|
93
|
+
if (!props.dataSource) {
|
|
94
|
+
const rowIds = (0, _xDataGridPro.gridDataRowIdsSelector)(apiRef);
|
|
95
|
+
const rowsLookup = (0, _xDataGridPro.gridRowsLookupSelector)(apiRef);
|
|
96
|
+
rows = rowIds.map(id => rowsLookup[id]);
|
|
97
|
+
}
|
|
94
98
|
const initialColumns = (0, _utils.getInitialColumns)(originalColumnsProp, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
|
|
95
99
|
return {
|
|
96
100
|
rows,
|
|
97
101
|
columns: initialColumns,
|
|
98
102
|
originalRowsProp
|
|
99
103
|
};
|
|
100
|
-
}, [apiRef, props.getPivotDerivedColumns, originalColumnsProp, originalRowsProp, exportedStateRef]);
|
|
104
|
+
}, [apiRef, props.getPivotDerivedColumns, originalColumnsProp, originalRowsProp, exportedStateRef, props.dataSource]);
|
|
101
105
|
const computePivotingState = React.useCallback(({
|
|
102
106
|
active,
|
|
103
107
|
model: pivotModel
|
|
@@ -110,32 +114,39 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
|
|
|
110
114
|
rows: [],
|
|
111
115
|
columns: new Map()
|
|
112
116
|
};
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
+
let propsOverrides = (0, _utils.getPivotForcedProps)(pivotModel, columns, props.groupingColDef);
|
|
118
|
+
|
|
119
|
+
// without data source, add more props overrides based on the data
|
|
120
|
+
if (!isLoading && !props.dataSource) {
|
|
121
|
+
propsOverrides = (0, _extends2.default)({}, propsOverrides, (0, _utils.createPivotPropsFromRows)({
|
|
117
122
|
rows,
|
|
118
123
|
columns,
|
|
119
124
|
pivotModel,
|
|
120
|
-
apiRef: apiRef,
|
|
121
125
|
pivotingColDef: props.pivotingColDef,
|
|
122
|
-
|
|
123
|
-
})
|
|
126
|
+
apiRef
|
|
127
|
+
}));
|
|
128
|
+
}
|
|
129
|
+
return {
|
|
130
|
+
initialColumns: columns,
|
|
131
|
+
propsOverrides
|
|
124
132
|
};
|
|
125
133
|
}
|
|
126
|
-
return
|
|
127
|
-
}, [apiRef, props.pivotingColDef, props.groupingColDef, nonPivotDataRef]);
|
|
134
|
+
return {};
|
|
135
|
+
}, [apiRef, isLoading, props.dataSource, props.pivotingColDef, props.groupingColDef, nonPivotDataRef]);
|
|
128
136
|
(0, _useOnMount.default)(() => {
|
|
129
137
|
if (!isPivotingAvailable || !isPivotActive) {
|
|
130
138
|
return undefined;
|
|
131
139
|
}
|
|
132
140
|
nonPivotDataRef.current = getInitialData();
|
|
133
|
-
const isLoading = (0, _xDataGridPro.gridRowsLoadingSelector)(apiRef) ?? false;
|
|
134
|
-
if (isLoading) {
|
|
135
|
-
return undefined;
|
|
136
|
-
}
|
|
137
141
|
apiRef.current.setState(state => {
|
|
138
|
-
const
|
|
142
|
+
const {
|
|
143
|
+
initialColumns,
|
|
144
|
+
propsOverrides
|
|
145
|
+
} = computePivotingState(state.pivoting);
|
|
146
|
+
const pivotingState = (0, _extends2.default)({}, state.pivoting, {
|
|
147
|
+
initialColumns: initialColumns || state.pivoting.initialColumns,
|
|
148
|
+
propsOverrides: (0, _extends2.default)({}, state.pivoting.propsOverrides, propsOverrides)
|
|
149
|
+
});
|
|
139
150
|
return (0, _extends2.default)({}, state, {
|
|
140
151
|
pivoting: pivotingState
|
|
141
152
|
});
|
|
@@ -165,9 +176,15 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
|
|
|
165
176
|
if (state.pivoting?.model === newPivotModel) {
|
|
166
177
|
return state;
|
|
167
178
|
}
|
|
168
|
-
const
|
|
179
|
+
const {
|
|
180
|
+
initialColumns,
|
|
181
|
+
propsOverrides
|
|
182
|
+
} = computePivotingState((0, _extends2.default)({}, state.pivoting, {
|
|
169
183
|
model: newPivotModel
|
|
170
|
-
}))
|
|
184
|
+
}));
|
|
185
|
+
const newPivotingState = (0, _extends2.default)({}, state.pivoting, {
|
|
186
|
+
initialColumns: initialColumns || state.pivoting.initialColumns,
|
|
187
|
+
propsOverrides: (0, _extends2.default)({}, state.pivoting.propsOverrides, propsOverrides),
|
|
171
188
|
model: newPivotModel
|
|
172
189
|
});
|
|
173
190
|
return (0, _extends2.default)({}, state, {
|
|
@@ -207,7 +224,7 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
|
|
|
207
224
|
const aggFunc = isSameSection ? prev.values.find(item => item.field === field)?.aggFunc : (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
|
|
208
225
|
aggregationFunctions: props.aggregationFunctions,
|
|
209
226
|
colDef: initialColumns.get(field),
|
|
210
|
-
isDataSource:
|
|
227
|
+
isDataSource: !!props.dataSource
|
|
211
228
|
})[0];
|
|
212
229
|
newSectionArray.splice(toIndex, 0, {
|
|
213
230
|
field,
|
|
@@ -236,7 +253,7 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
|
|
|
236
253
|
}
|
|
237
254
|
return newModel;
|
|
238
255
|
});
|
|
239
|
-
}, [apiRef, props.aggregationFunctions]);
|
|
256
|
+
}, [apiRef, props.aggregationFunctions, props.dataSource]);
|
|
240
257
|
const setPivotActive = React.useCallback(callback => {
|
|
241
258
|
if (!isPivotingAvailable) {
|
|
242
259
|
return;
|
|
@@ -249,9 +266,15 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
|
|
|
249
266
|
if (newPivotMode) {
|
|
250
267
|
nonPivotDataRef.current = getInitialData();
|
|
251
268
|
}
|
|
252
|
-
const
|
|
269
|
+
const {
|
|
270
|
+
initialColumns,
|
|
271
|
+
propsOverrides
|
|
272
|
+
} = computePivotingState((0, _extends2.default)({}, state.pivoting, {
|
|
253
273
|
active: newPivotMode
|
|
254
|
-
}))
|
|
274
|
+
}));
|
|
275
|
+
const newPivotingState = (0, _extends2.default)({}, state.pivoting, {
|
|
276
|
+
initialColumns: initialColumns || state.pivoting.initialColumns,
|
|
277
|
+
propsOverrides: (0, _extends2.default)({}, state.pivoting.propsOverrides, propsOverrides),
|
|
255
278
|
active: newPivotMode
|
|
256
279
|
});
|
|
257
280
|
const newState = (0, _extends2.default)({}, state, {
|
|
@@ -295,15 +318,19 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
|
|
|
295
318
|
nonPivotDataRef.current.columns = (0, _utils.getInitialColumns)(columns, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
|
|
296
319
|
}
|
|
297
320
|
apiRef.current.setState(state => {
|
|
321
|
+
const {
|
|
322
|
+
propsOverrides
|
|
323
|
+
} = computePivotingState(state.pivoting);
|
|
298
324
|
return (0, _extends2.default)({}, state, {
|
|
299
|
-
pivoting: (0, _extends2.default)({}, state.pivoting,
|
|
300
|
-
initialColumns: nonPivotDataRef.current?.columns
|
|
325
|
+
pivoting: (0, _extends2.default)({}, state.pivoting, {
|
|
326
|
+
initialColumns: nonPivotDataRef.current?.columns,
|
|
327
|
+
propsOverrides: (0, _extends2.default)({}, state.pivoting.propsOverrides, propsOverrides)
|
|
301
328
|
})
|
|
302
329
|
});
|
|
303
330
|
});
|
|
304
331
|
}, [isPivotingAvailable, apiRef, props.getPivotDerivedColumns, computePivotingState, nonPivotDataRef]);
|
|
305
332
|
const updateNonPivotRows = React.useCallback((rows, keepPreviousRows = true) => {
|
|
306
|
-
if (!nonPivotDataRef.current || !isPivotingAvailable || !rows || rows.length === 0) {
|
|
333
|
+
if (!nonPivotDataRef.current || props.dataSource || !isPivotingAvailable || !rows || rows.length === 0) {
|
|
307
334
|
return;
|
|
308
335
|
}
|
|
309
336
|
if (keepPreviousRows) {
|
|
@@ -325,18 +352,42 @@ const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) =
|
|
|
325
352
|
nonPivotDataRef.current.rows = rows;
|
|
326
353
|
}
|
|
327
354
|
apiRef.current.setState(state => {
|
|
355
|
+
const {
|
|
356
|
+
initialColumns,
|
|
357
|
+
propsOverrides
|
|
358
|
+
} = computePivotingState(state.pivoting);
|
|
328
359
|
return (0, _extends2.default)({}, state, {
|
|
329
|
-
pivoting: (0, _extends2.default)({}, state.pivoting,
|
|
360
|
+
pivoting: (0, _extends2.default)({}, state.pivoting, {
|
|
361
|
+
initialColumns: initialColumns || state.pivoting.initialColumns,
|
|
362
|
+
propsOverrides: (0, _extends2.default)({}, state.pivoting.propsOverrides, propsOverrides)
|
|
363
|
+
})
|
|
330
364
|
});
|
|
331
365
|
});
|
|
332
|
-
}, [apiRef, computePivotingState, isPivotingAvailable, nonPivotDataRef]);
|
|
366
|
+
}, [apiRef, computePivotingState, isPivotingAvailable, nonPivotDataRef, props.dataSource]);
|
|
333
367
|
const addPivotingPanel = React.useCallback((initialValue, value) => {
|
|
334
368
|
if (isPivotingAvailable && value === _sidebar.GridSidebarValue.Pivot) {
|
|
335
369
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pivotPanel.GridPivotPanel, {});
|
|
336
370
|
}
|
|
337
371
|
return initialValue;
|
|
338
372
|
}, [isPivotingAvailable]);
|
|
373
|
+
const addGetRowsParams = React.useCallback(params => {
|
|
374
|
+
if (!isPivotingAvailable || !isPivotActive) {
|
|
375
|
+
return params;
|
|
376
|
+
}
|
|
377
|
+
const pivotModel = (0, _gridPivotingSelectors.gridPivotModelSelector)(apiRef);
|
|
378
|
+
const visibleColumns = pivotModel.columns.filter(column => !column.hidden);
|
|
379
|
+
const visibleRows = pivotModel.rows.filter(row => !row.hidden);
|
|
380
|
+
const visibleValues = pivotModel.values.filter(value => !value.hidden);
|
|
381
|
+
return (0, _extends2.default)({}, params, {
|
|
382
|
+
pivotModel: {
|
|
383
|
+
columns: visibleColumns,
|
|
384
|
+
rows: visibleRows,
|
|
385
|
+
values: visibleValues
|
|
386
|
+
}
|
|
387
|
+
});
|
|
388
|
+
}, [apiRef, isPivotingAvailable, isPivotActive]);
|
|
339
389
|
(0, _internals.useGridRegisterPipeProcessor)(apiRef, 'sidebar', addPivotingPanel);
|
|
390
|
+
(0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowsParams', addGetRowsParams);
|
|
340
391
|
(0, _internals.useGridApiMethod)(apiRef, {
|
|
341
392
|
setPivotModel,
|
|
342
393
|
setPivotActive,
|
|
@@ -2,22 +2,20 @@ import { GridColDef, GridRowModel, GridLocaleTextApi } from '@mui/x-data-grid-pr
|
|
|
2
2
|
import type { RefObject } from '@mui/x-internals/types';
|
|
3
3
|
import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
|
|
4
4
|
import type { GridApiPremium } from "../../../models/gridApiPremium.js";
|
|
5
|
-
import type {
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const defaultGetPivotDerivedColumns: DataGridPremiumProcessedProps['getPivotDerivedColumns'];
|
|
5
|
+
import type { GridPivotingStaticPropsOverrides, GridPivotingDynamicPropsOverrides, GridPivotModel } from "./gridPivotingInterfaces.js";
|
|
6
|
+
export declare const defaultGetPivotDerivedColumns: NonNullable<DataGridPremiumProcessedProps['getPivotDerivedColumns']>;
|
|
8
7
|
export declare const getInitialColumns: (originalColumns: DataGridPremiumProcessedProps["columns"], getPivotDerivedColumns: DataGridPremiumProcessedProps["getPivotDerivedColumns"], getLocaleText: GridLocaleTextApi["getLocaleText"]) => Map<string, GridColDef>;
|
|
9
|
-
export declare const
|
|
8
|
+
export declare const getPivotForcedProps: (pivotModel: GridPivotModel, columns: Map<string, GridColDef>, groupingColDef: DataGridPremiumProcessedProps["groupingColDef"]) => GridPivotingStaticPropsOverrides;
|
|
9
|
+
export declare const createPivotPropsFromRows: ({
|
|
10
10
|
rows,
|
|
11
11
|
columns,
|
|
12
12
|
pivotModel,
|
|
13
|
-
apiRef,
|
|
14
13
|
pivotingColDef,
|
|
15
|
-
|
|
14
|
+
apiRef
|
|
16
15
|
}: {
|
|
17
16
|
rows: GridRowModel[];
|
|
18
17
|
columns: Map<string, GridColDef>;
|
|
19
18
|
pivotModel: GridPivotModel;
|
|
20
|
-
apiRef: RefObject<GridApiPremium>;
|
|
21
19
|
pivotingColDef: DataGridPremiumProcessedProps["pivotingColDef"];
|
|
22
|
-
|
|
23
|
-
}) =>
|
|
20
|
+
apiRef: RefObject<GridApiPremium>;
|
|
21
|
+
}) => GridPivotingDynamicPropsOverrides;
|
|
@@ -4,17 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.getPivotForcedProps = exports.getInitialColumns = exports.defaultGetPivotDerivedColumns = exports.createPivotPropsFromRows = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var _xDataGridPro = require("@mui/x-data-grid-pro");
|
|
10
10
|
var _internals = require("@mui/x-data-grid-pro/internals");
|
|
11
11
|
var _columnGroups = require("../../../constants/columnGroups");
|
|
12
12
|
var _rowGrouping = require("../rowGrouping");
|
|
13
13
|
var _gridAggregationUtils = require("../aggregation/gridAggregationUtils");
|
|
14
|
-
const isPivotingAvailable = props => {
|
|
15
|
-
return !props.disablePivoting;
|
|
16
|
-
};
|
|
17
|
-
exports.isPivotingAvailable = isPivotingAvailable;
|
|
18
14
|
const defaultGetPivotDerivedColumns = (column, getLocaleText) => {
|
|
19
15
|
if (column.type === 'date') {
|
|
20
16
|
const field = column.field;
|
|
@@ -49,11 +45,17 @@ const getInitialColumns = (originalColumns, getPivotDerivedColumns, getLocaleTex
|
|
|
49
45
|
return initialColumns;
|
|
50
46
|
};
|
|
51
47
|
exports.getInitialColumns = getInitialColumns;
|
|
52
|
-
|
|
48
|
+
const sortColumnGroups = (columnGroups, pivotModelColumns, depth = 0) => {
|
|
53
49
|
if (depth > pivotModelColumns.length - 1) {
|
|
54
50
|
return;
|
|
55
51
|
}
|
|
56
52
|
const sort = pivotModelColumns[depth].sort;
|
|
53
|
+
if (columnGroups.length < 2) {
|
|
54
|
+
if (columnGroups[0]?.children) {
|
|
55
|
+
sortColumnGroups(columnGroups[0].children, pivotModelColumns, depth + 1);
|
|
56
|
+
}
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
57
59
|
columnGroups.sort((a, b) => {
|
|
58
60
|
if ((0, _xDataGridPro.isLeaf)(a) || (0, _xDataGridPro.isLeaf)(b)) {
|
|
59
61
|
return 0;
|
|
@@ -69,20 +71,47 @@ function sortColumnGroups(columnGroups, pivotModelColumns, depth = 0) {
|
|
|
69
71
|
}
|
|
70
72
|
return (sort === 'asc' ? 1 : -1) * (0, _xDataGridPro.gridStringOrNumberComparator)(a.rawHeaderName, b.rawHeaderName, {}, {});
|
|
71
73
|
});
|
|
72
|
-
}
|
|
73
|
-
const
|
|
74
|
+
};
|
|
75
|
+
const getPivotForcedProps = (pivotModel, columns, groupingColDef) => {
|
|
76
|
+
const visibleRows = pivotModel.rows.filter(row => !row.hidden);
|
|
77
|
+
const visibleColumns = pivotModel.columns.filter(column => !column.hidden);
|
|
78
|
+
const visibleValues = pivotModel.values.filter(value => !value.hidden);
|
|
79
|
+
const columnVisibilityModel = {};
|
|
80
|
+
for (const column of columns.values()) {
|
|
81
|
+
columnVisibilityModel[column.field] = false;
|
|
82
|
+
}
|
|
83
|
+
if (visibleColumns.length === 0) {
|
|
84
|
+
visibleValues.forEach(value => {
|
|
85
|
+
delete columnVisibilityModel[value.field];
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
const groupingColDefOverrides = params => (0, _extends2.default)({}, typeof groupingColDef === 'function' ? groupingColDef(params) : groupingColDef || {}, {
|
|
89
|
+
filterable: false,
|
|
90
|
+
aggregable: false,
|
|
91
|
+
hideable: false
|
|
92
|
+
});
|
|
93
|
+
return {
|
|
94
|
+
columnVisibilityModel,
|
|
95
|
+
rowGroupingModel: visibleRows.map(row => row.field),
|
|
96
|
+
getAggregationPosition: _gridAggregationUtils.defaultGetAggregationPosition,
|
|
97
|
+
groupingColDef: groupingColDefOverrides,
|
|
98
|
+
headerFilters: false,
|
|
99
|
+
disableAggregation: false,
|
|
100
|
+
disableRowGrouping: false
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
exports.getPivotForcedProps = getPivotForcedProps;
|
|
104
|
+
const createPivotPropsFromRows = ({
|
|
74
105
|
rows,
|
|
75
106
|
columns,
|
|
76
107
|
pivotModel,
|
|
77
|
-
apiRef,
|
|
78
108
|
pivotingColDef,
|
|
79
|
-
|
|
109
|
+
apiRef
|
|
80
110
|
}) => {
|
|
81
111
|
const visibleColumns = pivotModel.columns.filter(column => !column.hidden);
|
|
82
112
|
const visibleRows = pivotModel.rows.filter(row => !row.hidden);
|
|
83
113
|
const visibleValues = pivotModel.values.filter(value => !value.hidden);
|
|
84
114
|
let pivotColumns = [];
|
|
85
|
-
const columnVisibilityModel = {};
|
|
86
115
|
const pivotColumnsIncludedInPivotValues = [];
|
|
87
116
|
const initialColumns = new Map();
|
|
88
117
|
for (const column of columns.values()) {
|
|
@@ -106,7 +135,6 @@ const getPivotedData = ({
|
|
|
106
135
|
} else {
|
|
107
136
|
pivotColumns.push(columnToAdd);
|
|
108
137
|
}
|
|
109
|
-
columnVisibilityModel[column.field] = false;
|
|
110
138
|
}
|
|
111
139
|
}
|
|
112
140
|
pivotColumns = pivotColumns.concat(pivotColumnsIncludedInPivotValues);
|
|
@@ -134,7 +162,6 @@ const getPivotedData = ({
|
|
|
134
162
|
newRows = rows;
|
|
135
163
|
visibleValues.forEach(pivotValue => {
|
|
136
164
|
aggregationModel[pivotValue.field] = pivotValue.aggFunc;
|
|
137
|
-
delete columnVisibilityModel[pivotValue.field];
|
|
138
165
|
});
|
|
139
166
|
} else {
|
|
140
167
|
for (let i = 0; i < rows.length; i += 1) {
|
|
@@ -260,23 +287,11 @@ const getPivotedData = ({
|
|
|
260
287
|
}
|
|
261
288
|
}
|
|
262
289
|
createColumns(columnGroupingModel);
|
|
263
|
-
const groupingColDefOverrides = params => (0, _extends2.default)({}, typeof groupingColDef === 'function' ? groupingColDef(params) : groupingColDef || {}, {
|
|
264
|
-
filterable: false,
|
|
265
|
-
aggregable: false,
|
|
266
|
-
hideable: false
|
|
267
|
-
});
|
|
268
290
|
return {
|
|
269
291
|
rows: visibleRows.length > 0 ? newRows : [],
|
|
270
292
|
columns: pivotColumns,
|
|
271
|
-
rowGroupingModel: visibleRows.map(row => row.field),
|
|
272
|
-
aggregationModel,
|
|
273
|
-
getAggregationPosition: _gridAggregationUtils.defaultGetAggregationPosition,
|
|
274
|
-
columnVisibilityModel,
|
|
275
293
|
columnGroupingModel,
|
|
276
|
-
|
|
277
|
-
headerFilters: false,
|
|
278
|
-
disableAggregation: false,
|
|
279
|
-
disableRowGrouping: false
|
|
294
|
+
aggregationModel
|
|
280
295
|
};
|
|
281
296
|
};
|
|
282
|
-
exports.
|
|
297
|
+
exports.createPivotPropsFromRows = createPivotPropsFromRows;
|
|
@@ -91,7 +91,7 @@ function getGroupingCriteriaProperties(groupedByColDef, rowGroupingColumnMode, r
|
|
|
91
91
|
valueFormatter = (value, row, column, apiRef) => {
|
|
92
92
|
const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef, row);
|
|
93
93
|
const rowNode = (0, _xDataGridPro.gridRowNodeSelector)(apiRef, rowId);
|
|
94
|
-
if (rowNode
|
|
94
|
+
if (rowNode?.type === 'group') {
|
|
95
95
|
const originalColDef = columnsLookup[rowNode.groupingField];
|
|
96
96
|
if (originalColDef.type === 'singleSelect') {
|
|
97
97
|
// the default valueFormatter of a singleSelect colDef won't work with the grouping column values
|
|
@@ -20,7 +20,9 @@ const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
|
|
|
20
20
|
if (!getChildrenCount) {
|
|
21
21
|
throw new Error('MUI X: No `getChildrenCount` method provided with the dataSource.');
|
|
22
22
|
}
|
|
23
|
+
const pivotingActive = (0, _internals.gridPivotActiveSelector)(apiRef);
|
|
23
24
|
const sanitizedRowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
|
|
25
|
+
const maxDepth = pivotingActive ? sanitizedRowGroupingModel.length - 1 : undefined;
|
|
24
26
|
const columnsLookup = (0, _xDataGridPro.gridColumnLookupSelector)(apiRef);
|
|
25
27
|
const groupingRules = (0, _gridRowGroupingUtils.getGroupingRules)({
|
|
26
28
|
sanitizedRowGroupingModel,
|
|
@@ -45,7 +47,8 @@ const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
|
|
|
45
47
|
nodes: params.updates.rows.map(getRowTreeBuilderNode),
|
|
46
48
|
defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
|
|
47
49
|
isGroupExpandedByDefault: props.isGroupExpandedByDefault,
|
|
48
|
-
groupingName: _internals.RowGroupingStrategy.DataSource
|
|
50
|
+
groupingName: _internals.RowGroupingStrategy.DataSource,
|
|
51
|
+
maxDepth
|
|
49
52
|
});
|
|
50
53
|
}
|
|
51
54
|
return (0, _internals.updateRowTree)({
|
|
@@ -59,7 +62,8 @@ const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
|
|
|
59
62
|
previousTreeDepth: params.previousTreeDepths,
|
|
60
63
|
defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
|
|
61
64
|
isGroupExpandedByDefault: props.isGroupExpandedByDefault,
|
|
62
|
-
groupingName: _internals.RowGroupingStrategy.DataSource
|
|
65
|
+
groupingName: _internals.RowGroupingStrategy.DataSource,
|
|
66
|
+
maxDepth
|
|
63
67
|
});
|
|
64
68
|
}, [apiRef, props.dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
|
|
65
69
|
const filterRows = React.useCallback(() => {
|
|
@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
|
|
|
8
8
|
* @requires useGridRows (state, method) - can be after, async only
|
|
9
9
|
* @requires useGridParamsApi (method) - can be after, async only
|
|
10
10
|
*/
|
|
11
|
-
export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "
|
|
11
|
+
export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "treeData">) => void;
|
package/index.js
CHANGED
|
@@ -8,7 +8,7 @@ import { GridPremiumSlotProps } from "./gridPremiumSlotProps.js";
|
|
|
8
8
|
import { GridInitialStatePremium } from "./gridStatePremium.js";
|
|
9
9
|
import { GridApiPremium } from "./gridApiPremium.js";
|
|
10
10
|
import { GridCellSelectionModel } from "../hooks/features/cellSelection/index.js";
|
|
11
|
-
import type { GridPivotingColDefOverrides, GridPivotModel } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
|
|
11
|
+
import type { GridPivotingColDefOverrides, PivotingColDefCallback, GridPivotModel } from "../hooks/features/pivoting/gridPivotingInterfaces.js";
|
|
12
12
|
import { GridDataSourcePremium as GridDataSource, GridGetRowsParamsPremium as GridGetRowsParams } from "../hooks/features/dataSource/models.js";
|
|
13
13
|
import { Conversation, PromptResponse, PromptSuggestion } from "../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
|
|
14
14
|
export interface GridExperimentalPremiumFeatures extends GridExperimentalProFeatures {
|
|
@@ -91,15 +91,6 @@ export interface DataGridPremiumPropsWithDefaultValue<R extends GridValidRowMode
|
|
|
91
91
|
* @default false
|
|
92
92
|
*/
|
|
93
93
|
disablePivoting: boolean;
|
|
94
|
-
/**
|
|
95
|
-
* Allows to generate derived columns from actual columns that will be used for pivoting.
|
|
96
|
-
* Useful e.g. for date columns to generate year, quarter, month, etc.
|
|
97
|
-
* @param {GridColDef} column The column to generate derived columns for.
|
|
98
|
-
* @param {GridLocaleTextApi['getLocaleText']} getLocaleText The function to get the locale text.
|
|
99
|
-
* @returns {GridColDef[] | undefined} The derived columns.
|
|
100
|
-
* @default {defaultGetPivotDerivedColumns} Creates year and quarter columns for date columns.
|
|
101
|
-
*/
|
|
102
|
-
getPivotDerivedColumns: ((column: GridColDef, getLocaleText: GridLocaleTextApi['getLocaleText']) => GridColDef[] | undefined) | null;
|
|
103
94
|
/**
|
|
104
95
|
* If `true`, the AI Assistant is enabled.
|
|
105
96
|
* @default false
|
|
@@ -226,14 +217,24 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
|
|
|
226
217
|
* @deprecated Use the `sidebarOpen` and `sidebarClose` events or corresponding event handlers `onSidebarOpen()` and `onSidebarClose()` instead.
|
|
227
218
|
*/
|
|
228
219
|
onPivotPanelOpenChange?: (pivotPanelOpen: boolean) => void;
|
|
220
|
+
/**
|
|
221
|
+
* Allows to generate derived columns from actual columns that will be used for pivoting.
|
|
222
|
+
* Useful e.g. for date columns to generate year, quarter, month, etc.
|
|
223
|
+
* @param {GridColDef} column The column to generate derived columns for.
|
|
224
|
+
* @param {GridLocaleTextApi['getLocaleText']} getLocaleText The function to get the locale text.
|
|
225
|
+
* @returns {GridColDef[] | undefined} The derived columns.
|
|
226
|
+
* @default {defaultGetPivotDerivedColumns | undefined} Creates year and quarter columns for date columns if not in server side mode.
|
|
227
|
+
*/
|
|
228
|
+
getPivotDerivedColumns?: ((column: GridColDef, getLocaleText: GridLocaleTextApi['getLocaleText']) => GridColDef[] | undefined) | null;
|
|
229
229
|
/**
|
|
230
230
|
* The column definition overrides for the columns generated by the pivoting feature.
|
|
231
|
-
*
|
|
232
|
-
*
|
|
233
|
-
* @
|
|
231
|
+
* Pass either a partial column definition to apply the same overrides to all pivot columns, or a callback to apply different overrides to each pivot column.
|
|
232
|
+
* For server-side pivoting, only the `PivotingColDefCallback` signature is supported, and the prop is required.
|
|
233
|
+
* @type {Partial<GridPivotingColDefOverrides> | PivotingColDefCallback}
|
|
234
234
|
* @default undefined
|
|
235
|
+
* @throws {Error} If `undefined` and `dataSource` is provided.
|
|
235
236
|
*/
|
|
236
|
-
pivotingColDef?: Partial<GridPivotingColDefOverrides> |
|
|
237
|
+
pivotingColDef?: Partial<GridPivotingColDefOverrides> | PivotingColDefCallback;
|
|
237
238
|
/**
|
|
238
239
|
* The conversations with the AI Assistant.
|
|
239
240
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-data-grid-premium",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.14.1",
|
|
4
4
|
"author": "MUI Team",
|
|
5
5
|
"description": "The Premium plan edition of the MUI X Data Grid Components.",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -34,15 +34,14 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@babel/runtime": "^7.28.4",
|
|
37
|
-
"@mui/utils": "^7.3.
|
|
38
|
-
"@types/format-util": "^1.0.4",
|
|
37
|
+
"@mui/utils": "^7.3.3",
|
|
39
38
|
"clsx": "^2.1.1",
|
|
40
39
|
"exceljs": "^4.4.0",
|
|
41
40
|
"prop-types": "^15.8.1",
|
|
42
|
-
"@mui/x-data-grid": "8.
|
|
43
|
-
"@mui/x-data-grid
|
|
44
|
-
"@mui/x-
|
|
45
|
-
"@mui/x-
|
|
41
|
+
"@mui/x-data-grid-pro": "8.14.1",
|
|
42
|
+
"@mui/x-data-grid": "8.14.1",
|
|
43
|
+
"@mui/x-internals": "8.14.0",
|
|
44
|
+
"@mui/x-license": "8.14.1"
|
|
46
45
|
},
|
|
47
46
|
"peerDependencies": {
|
|
48
47
|
"@emotion/react": "^11.9.0",
|