@mui/x-data-grid-premium 5.13.1 → 5.14.0
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 +44 -1
- package/DataGridPremium/DataGridPremium.js +47 -0
- package/DataGridPremium/useDataGridPremiumComponent.js +6 -1
- package/DataGridPremium/useDataGridPremiumProps.js +17 -7
- package/components/GridAggregationColumnMenuItem.d.ts +9 -0
- package/components/GridAggregationColumnMenuItem.js +93 -0
- package/components/GridAggregationHeader.d.ts +4 -0
- package/components/GridAggregationHeader.js +94 -0
- package/components/GridExcelExportMenuItem.js +11 -4
- package/components/GridFooterCell.d.ts +9 -0
- package/components/GridFooterCell.js +51 -0
- package/components/GridGroupingColumnFooterCell.d.ts +4 -0
- package/components/GridGroupingColumnFooterCell.js +29 -0
- package/hooks/features/aggregation/createAggregationLookup.d.ts +10 -0
- package/hooks/features/aggregation/createAggregationLookup.js +128 -0
- package/hooks/features/aggregation/gridAggregationFunctions.d.ts +8 -0
- package/hooks/features/aggregation/gridAggregationFunctions.js +96 -0
- package/hooks/features/aggregation/gridAggregationInterfaces.d.ts +104 -0
- package/hooks/features/aggregation/gridAggregationInterfaces.js +1 -0
- package/hooks/features/aggregation/gridAggregationSelectors.d.ts +4 -0
- package/hooks/features/aggregation/gridAggregationSelectors.js +5 -0
- package/hooks/features/aggregation/gridAggregationUtils.d.ts +40 -0
- package/hooks/features/aggregation/gridAggregationUtils.js +177 -0
- package/hooks/features/aggregation/index.d.ts +4 -0
- package/hooks/features/aggregation/index.js +4 -0
- package/hooks/features/aggregation/useGridAggregation.d.ts +6 -0
- package/hooks/features/aggregation/useGridAggregation.js +94 -0
- package/hooks/features/aggregation/useGridAggregationPreProcessors.d.ts +4 -0
- package/hooks/features/aggregation/useGridAggregationPreProcessors.js +137 -0
- package/hooks/features/aggregation/wrapColumnWithAggregation.d.ts +29 -0
- package/hooks/features/aggregation/wrapColumnWithAggregation.js +257 -0
- package/hooks/features/export/serializer/excelSerializer.js +2 -1
- package/hooks/features/index.d.ts +1 -0
- package/hooks/features/index.js +1 -0
- package/hooks/features/rowGrouping/createGroupingColDef.js +13 -2
- package/hooks/features/rowGrouping/gridRowGroupingUtils.js +5 -1
- package/hooks/features/rowGrouping/useGridRowGrouping.d.ts +1 -1
- package/hooks/features/rowGrouping/useGridRowGrouping.js +20 -10
- package/index.js +1 -1
- package/legacy/DataGridPremium/DataGridPremium.js +47 -0
- package/legacy/DataGridPremium/useDataGridPremiumComponent.js +6 -1
- package/legacy/DataGridPremium/useDataGridPremiumProps.js +12 -2
- package/legacy/components/GridAggregationColumnMenuItem.js +95 -0
- package/legacy/components/GridAggregationHeader.js +95 -0
- package/legacy/components/GridExcelExportMenuItem.js +11 -4
- package/legacy/components/GridFooterCell.js +63 -0
- package/legacy/components/GridGroupingColumnFooterCell.js +27 -0
- package/legacy/hooks/features/aggregation/createAggregationLookup.js +127 -0
- package/legacy/hooks/features/aggregation/gridAggregationFunctions.js +94 -0
- package/legacy/hooks/features/aggregation/gridAggregationInterfaces.js +1 -0
- package/legacy/hooks/features/aggregation/gridAggregationSelectors.js +11 -0
- package/legacy/hooks/features/aggregation/gridAggregationUtils.js +189 -0
- package/legacy/hooks/features/aggregation/index.js +4 -0
- package/legacy/hooks/features/aggregation/useGridAggregation.js +95 -0
- package/legacy/hooks/features/aggregation/useGridAggregationPreProcessors.js +140 -0
- package/legacy/hooks/features/aggregation/wrapColumnWithAggregation.js +262 -0
- package/legacy/hooks/features/export/serializer/excelSerializer.js +2 -1
- package/legacy/hooks/features/index.js +1 -0
- package/legacy/hooks/features/rowGrouping/createGroupingColDef.js +13 -2
- package/legacy/hooks/features/rowGrouping/gridRowGroupingUtils.js +5 -1
- package/legacy/hooks/features/rowGrouping/useGridRowGrouping.js +24 -10
- package/legacy/index.js +1 -1
- package/legacy/typeOverloads/index.js +1 -1
- package/legacy/utils/releaseInfo.js +1 -1
- package/models/dataGridPremiumProps.d.ts +46 -1
- package/models/gridApiPremium.d.ts +2 -2
- package/models/gridStatePremium.d.ts +3 -1
- package/modern/DataGridPremium/DataGridPremium.js +47 -0
- package/modern/DataGridPremium/useDataGridPremiumComponent.js +6 -1
- package/modern/DataGridPremium/useDataGridPremiumProps.js +8 -2
- package/modern/components/GridAggregationColumnMenuItem.js +93 -0
- package/modern/components/GridAggregationHeader.js +92 -0
- package/modern/components/GridExcelExportMenuItem.js +11 -4
- package/modern/components/GridFooterCell.js +51 -0
- package/modern/components/GridGroupingColumnFooterCell.js +29 -0
- package/modern/hooks/features/aggregation/createAggregationLookup.js +122 -0
- package/modern/hooks/features/aggregation/gridAggregationFunctions.js +96 -0
- package/modern/hooks/features/aggregation/gridAggregationInterfaces.js +1 -0
- package/modern/hooks/features/aggregation/gridAggregationSelectors.js +5 -0
- package/modern/hooks/features/aggregation/gridAggregationUtils.js +175 -0
- package/modern/hooks/features/aggregation/index.js +4 -0
- package/modern/hooks/features/aggregation/useGridAggregation.js +92 -0
- package/modern/hooks/features/aggregation/useGridAggregationPreProcessors.js +135 -0
- package/modern/hooks/features/aggregation/wrapColumnWithAggregation.js +251 -0
- package/modern/hooks/features/export/serializer/excelSerializer.js +2 -1
- package/modern/hooks/features/index.js +1 -0
- package/modern/hooks/features/rowGrouping/createGroupingColDef.js +13 -2
- package/modern/hooks/features/rowGrouping/gridRowGroupingUtils.js +5 -1
- package/modern/hooks/features/rowGrouping/useGridRowGrouping.js +17 -11
- package/modern/index.js +1 -1
- package/modern/typeOverloads/index.js +1 -1
- package/modern/utils/releaseInfo.js +1 -1
- package/node/DataGridPremium/DataGridPremium.js +47 -0
- package/node/DataGridPremium/useDataGridPremiumComponent.js +8 -1
- package/node/DataGridPremium/useDataGridPremiumProps.js +17 -6
- package/node/components/GridAggregationColumnMenuItem.js +120 -0
- package/node/components/GridAggregationHeader.js +115 -0
- package/node/components/GridExcelExportMenuItem.js +12 -4
- package/node/components/GridFooterCell.js +73 -0
- package/node/components/GridGroupingColumnFooterCell.js +46 -0
- package/node/hooks/features/aggregation/createAggregationLookup.js +139 -0
- package/node/hooks/features/aggregation/gridAggregationFunctions.js +105 -0
- package/node/hooks/features/aggregation/gridAggregationInterfaces.js +5 -0
- package/node/hooks/features/aggregation/gridAggregationSelectors.js +17 -0
- package/node/hooks/features/aggregation/gridAggregationUtils.js +212 -0
- package/node/hooks/features/aggregation/index.js +65 -0
- package/node/hooks/features/aggregation/useGridAggregation.js +118 -0
- package/node/hooks/features/aggregation/useGridAggregationPreProcessors.js +161 -0
- package/node/hooks/features/aggregation/wrapColumnWithAggregation.js +279 -0
- package/node/hooks/features/export/serializer/excelSerializer.js +2 -1
- package/node/hooks/features/index.js +13 -0
- package/node/hooks/features/rowGrouping/createGroupingColDef.js +14 -2
- package/node/hooks/features/rowGrouping/gridRowGroupingUtils.js +5 -1
- package/node/hooks/features/rowGrouping/useGridRowGrouping.js +19 -10
- package/node/index.js +1 -1
- package/node/typeOverloads/index.js +16 -1
- package/node/utils/releaseInfo.js +1 -1
- package/package.json +4 -4
- package/typeOverloads/index.d.ts +1 -1
- package/typeOverloads/index.js +1 -1
- package/typeOverloads/modules.d.ts +32 -2
- package/utils/releaseInfo.js +1 -1
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import MuiDivider from '@mui/material/Divider';
|
|
4
|
+
import { gridColumnLookupSelector } from '@mui/x-data-grid-pro';
|
|
5
|
+
import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
|
|
6
|
+
import { getAvailableAggregationFunctions, addFooterRows, getAggregationRules, mergeStateWithAggregationModel } from './gridAggregationUtils';
|
|
7
|
+
import { wrapColumnWithAggregationValue, unwrapColumnFromAggregation } from './wrapColumnWithAggregation';
|
|
8
|
+
import { GridAggregationColumnMenuItem } from '../../../components/GridAggregationColumnMenuItem';
|
|
9
|
+
import { gridAggregationModelSelector } from './gridAggregationSelectors';
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
|
|
12
|
+
const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
|
|
13
|
+
onClick: event => event.stopPropagation()
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export const useGridAggregationPreProcessors = (apiRef, props) => {
|
|
17
|
+
const updateAggregatedColumns = React.useCallback(columnsState => {
|
|
18
|
+
const {
|
|
19
|
+
rulesOnLastColumnHydration
|
|
20
|
+
} = apiRef.current.unstable_caches.aggregation;
|
|
21
|
+
const aggregationRules = props.private_disableAggregation ? {} : getAggregationRules({
|
|
22
|
+
columnsLookup: columnsState.lookup,
|
|
23
|
+
aggregationModel: gridAggregationModelSelector(apiRef),
|
|
24
|
+
aggregationFunctions: props.private_aggregationFunctions
|
|
25
|
+
});
|
|
26
|
+
columnsState.all.forEach(field => {
|
|
27
|
+
const shouldHaveAggregationValue = !!aggregationRules[field];
|
|
28
|
+
const haveAggregationColumnValue = !!rulesOnLastColumnHydration[field];
|
|
29
|
+
let column = columnsState.lookup[field];
|
|
30
|
+
|
|
31
|
+
if (haveAggregationColumnValue) {
|
|
32
|
+
column = unwrapColumnFromAggregation({
|
|
33
|
+
column
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (shouldHaveAggregationValue) {
|
|
38
|
+
column = wrapColumnWithAggregationValue({
|
|
39
|
+
column,
|
|
40
|
+
aggregationRule: aggregationRules[field],
|
|
41
|
+
apiRef
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
columnsState.lookup[field] = column;
|
|
46
|
+
});
|
|
47
|
+
apiRef.current.unstable_caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
|
|
48
|
+
return columnsState;
|
|
49
|
+
}, [apiRef, props.private_aggregationFunctions, props.private_disableAggregation]);
|
|
50
|
+
const addGroupFooterRows = React.useCallback(groupingParams => {
|
|
51
|
+
let newGroupingParams;
|
|
52
|
+
let rulesOnLastRowHydration;
|
|
53
|
+
|
|
54
|
+
if (props.private_disableAggregation) {
|
|
55
|
+
newGroupingParams = groupingParams;
|
|
56
|
+
rulesOnLastRowHydration = {};
|
|
57
|
+
} else {
|
|
58
|
+
const aggregationRules = getAggregationRules({
|
|
59
|
+
columnsLookup: gridColumnLookupSelector(apiRef),
|
|
60
|
+
aggregationModel: gridAggregationModelSelector(apiRef),
|
|
61
|
+
aggregationFunctions: props.private_aggregationFunctions
|
|
62
|
+
});
|
|
63
|
+
rulesOnLastRowHydration = aggregationRules; // If no column have an aggregation rule
|
|
64
|
+
// Then don't create the footer rows
|
|
65
|
+
|
|
66
|
+
if (Object.values(aggregationRules).length === 0) {
|
|
67
|
+
newGroupingParams = groupingParams;
|
|
68
|
+
} else {
|
|
69
|
+
newGroupingParams = addFooterRows({
|
|
70
|
+
groupingParams,
|
|
71
|
+
aggregationRules,
|
|
72
|
+
getAggregationPosition: props.private_getAggregationPosition
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
apiRef.current.unstable_caches.aggregation.rulesOnLastRowHydration = rulesOnLastRowHydration;
|
|
78
|
+
return newGroupingParams;
|
|
79
|
+
}, [apiRef, props.private_disableAggregation, props.private_getAggregationPosition, props.private_aggregationFunctions]);
|
|
80
|
+
const addColumnMenuButtons = React.useCallback((initialValue, column) => {
|
|
81
|
+
if (props.private_disableAggregation) {
|
|
82
|
+
return initialValue;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
const availableAggregationFunctions = getAvailableAggregationFunctions({
|
|
86
|
+
aggregationFunctions: props.private_aggregationFunctions,
|
|
87
|
+
column
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
if (availableAggregationFunctions.length === 0) {
|
|
91
|
+
return initialValue;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(GridAggregationColumnMenuItem, {
|
|
95
|
+
column: column,
|
|
96
|
+
label: apiRef.current.getLocaleText('aggregationMenuItemHeader'),
|
|
97
|
+
availableAggregationFunctions: availableAggregationFunctions
|
|
98
|
+
})];
|
|
99
|
+
}, [apiRef, props.private_aggregationFunctions, props.private_disableAggregation]);
|
|
100
|
+
const stateExportPreProcessing = React.useCallback(prevState => {
|
|
101
|
+
if (props.private_disableAggregation) {
|
|
102
|
+
return prevState;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
const aggregationModelToExport = gridAggregationModelSelector(apiRef);
|
|
106
|
+
|
|
107
|
+
if (Object.values(aggregationModelToExport).length === 0) {
|
|
108
|
+
return prevState;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
return _extends({}, prevState, {
|
|
112
|
+
private_aggregation: {
|
|
113
|
+
model: aggregationModelToExport
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
}, [apiRef, props.private_disableAggregation]);
|
|
117
|
+
const stateRestorePreProcessing = React.useCallback((params, context) => {
|
|
118
|
+
var _context$stateToResto;
|
|
119
|
+
|
|
120
|
+
if (props.private_disableAggregation) {
|
|
121
|
+
return params;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
const aggregationModel = (_context$stateToResto = context.stateToRestore.private_aggregation) == null ? void 0 : _context$stateToResto.model;
|
|
125
|
+
|
|
126
|
+
if (aggregationModel != null) {
|
|
127
|
+
apiRef.current.setState(mergeStateWithAggregationModel(aggregationModel));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
return params;
|
|
131
|
+
}, [apiRef, props.private_disableAggregation]);
|
|
132
|
+
useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateAggregatedColumns);
|
|
133
|
+
useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addGroupFooterRows);
|
|
134
|
+
useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
|
|
135
|
+
useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
|
|
136
|
+
useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
|
|
137
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { GridColDef } from '@mui/x-data-grid-pro';
|
|
3
|
+
import { GridApiPremium } from '../../../models/gridApiPremium';
|
|
4
|
+
import { GridAggregationRule } from './gridAggregationInterfaces';
|
|
5
|
+
declare const AGGREGATION_WRAPPABLE_PROPERTIES: readonly ["valueGetter", "valueFormatter", "renderCell", "renderHeader", "filterOperators"];
|
|
6
|
+
declare type WrappableColumnProperty = typeof AGGREGATION_WRAPPABLE_PROPERTIES[number];
|
|
7
|
+
interface GridColDefWithAggregationWrappers extends GridColDef {
|
|
8
|
+
aggregationWrappedProperties?: {
|
|
9
|
+
[P in WrappableColumnProperty]?: {
|
|
10
|
+
original: GridColDef[P];
|
|
11
|
+
wrapped: GridColDef[P];
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Add a wrapper around each wrappable property of the column to customize the behavior of the aggregation cells.
|
|
17
|
+
*/
|
|
18
|
+
export declare const wrapColumnWithAggregationValue: ({ column, apiRef, aggregationRule, }: {
|
|
19
|
+
column: GridColDef;
|
|
20
|
+
apiRef: React.MutableRefObject<GridApiPremium>;
|
|
21
|
+
aggregationRule: GridAggregationRule;
|
|
22
|
+
}) => GridColDef;
|
|
23
|
+
/**
|
|
24
|
+
* Remove the aggregation wrappers around the wrappable properties of the column.
|
|
25
|
+
*/
|
|
26
|
+
export declare const unwrapColumnFromAggregation: ({ column, }: {
|
|
27
|
+
column: GridColDefWithAggregationWrappers;
|
|
28
|
+
}) => GridColDef<any, any, any>;
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { gridAggregationLookupSelector } from './gridAggregationSelectors';
|
|
4
|
+
import { GridFooterCell } from '../../../components/GridFooterCell';
|
|
5
|
+
import { GridAggregationHeader } from '../../../components/GridAggregationHeader';
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const AGGREGATION_WRAPPABLE_PROPERTIES = ['valueGetter', 'valueFormatter', 'renderCell', 'renderHeader', 'filterOperators'];
|
|
8
|
+
|
|
9
|
+
const getAggregationValueWrappedValueGetter = ({
|
|
10
|
+
value: valueGetter,
|
|
11
|
+
getCellAggregationResult
|
|
12
|
+
}) => {
|
|
13
|
+
const wrappedValueGetter = params => {
|
|
14
|
+
const cellAggregationResult = getCellAggregationResult(params.id, params.field);
|
|
15
|
+
|
|
16
|
+
if (cellAggregationResult != null) {
|
|
17
|
+
var _cellAggregationResul;
|
|
18
|
+
|
|
19
|
+
return (_cellAggregationResul = cellAggregationResult == null ? void 0 : cellAggregationResult.value) != null ? _cellAggregationResul : null;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
if (valueGetter) {
|
|
23
|
+
return valueGetter(params);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return params.row[params.field];
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
return wrappedValueGetter;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const getAggregationValueWrappedValueFormatter = ({
|
|
33
|
+
value: valueFormatter,
|
|
34
|
+
aggregationRule,
|
|
35
|
+
getCellAggregationResult
|
|
36
|
+
}) => {
|
|
37
|
+
// If neither the inline aggregation function nor the footer aggregation function have a custom value formatter,
|
|
38
|
+
// Then we don't wrap the column value formatter
|
|
39
|
+
if (!aggregationRule.aggregationFunction.valueFormatter) {
|
|
40
|
+
return valueFormatter;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const wrappedValueFormatter = params => {
|
|
44
|
+
if (params.id != null) {
|
|
45
|
+
const cellAggregationResult = getCellAggregationResult(params.id, params.field);
|
|
46
|
+
|
|
47
|
+
if (cellAggregationResult != null) {
|
|
48
|
+
return aggregationRule.aggregationFunction.valueFormatter(params);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
if (valueFormatter) {
|
|
53
|
+
return valueFormatter(params);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return params.value;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
return wrappedValueFormatter;
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const getAggregationValueWrappedRenderCell = ({
|
|
63
|
+
value: renderCell,
|
|
64
|
+
aggregationRule,
|
|
65
|
+
getCellAggregationResult
|
|
66
|
+
}) => {
|
|
67
|
+
const wrappedRenderCell = params => {
|
|
68
|
+
const cellAggregationResult = getCellAggregationResult(params.id, params.field);
|
|
69
|
+
|
|
70
|
+
if (cellAggregationResult != null) {
|
|
71
|
+
var _aggregationFunction$;
|
|
72
|
+
|
|
73
|
+
if (!renderCell) {
|
|
74
|
+
if (cellAggregationResult.position === 'footer') {
|
|
75
|
+
return /*#__PURE__*/_jsx(GridFooterCell, _extends({}, params));
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
return params.formattedValue;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
const aggregationMeta = {
|
|
82
|
+
hasCellUnit: (_aggregationFunction$ = aggregationRule.aggregationFunction.hasCellUnit) != null ? _aggregationFunction$ : true,
|
|
83
|
+
aggregationFunctionName: aggregationRule.aggregationFunctionName
|
|
84
|
+
};
|
|
85
|
+
return renderCell(_extends({}, params, {
|
|
86
|
+
aggregation: aggregationMeta
|
|
87
|
+
}));
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
if (!renderCell) {
|
|
91
|
+
return params.formattedValue;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return renderCell(params);
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
return wrappedRenderCell;
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* Skips the filtering for aggregated rows
|
|
101
|
+
*/
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
const getWrappedFilterOperators = ({
|
|
105
|
+
value: filterOperators,
|
|
106
|
+
getCellAggregationResult
|
|
107
|
+
}) => filterOperators.map(operator => {
|
|
108
|
+
return _extends({}, operator, {
|
|
109
|
+
getApplyFilterFn: (filterItem, column) => {
|
|
110
|
+
const originalFn = operator.getApplyFilterFn(filterItem, column);
|
|
111
|
+
|
|
112
|
+
if (!originalFn) {
|
|
113
|
+
return null;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
return params => {
|
|
117
|
+
if (getCellAggregationResult(params.id, params.field) != null) {
|
|
118
|
+
return true;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
return originalFn(params);
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
});
|
|
126
|
+
/**
|
|
127
|
+
* Add the aggregation method around the header name
|
|
128
|
+
*/
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
const getWrappedRenderHeader = ({
|
|
132
|
+
value: renderHeader,
|
|
133
|
+
aggregationRule
|
|
134
|
+
}) => {
|
|
135
|
+
const wrappedRenderCell = params => {
|
|
136
|
+
const aggregationMeta = {
|
|
137
|
+
aggregationRule
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
if (!renderHeader) {
|
|
141
|
+
return /*#__PURE__*/_jsx(GridAggregationHeader, _extends({}, params, {
|
|
142
|
+
aggregation: aggregationMeta
|
|
143
|
+
}));
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
return renderHeader(_extends({}, params, {
|
|
147
|
+
aggregation: aggregationMeta
|
|
148
|
+
}));
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
return wrappedRenderCell;
|
|
152
|
+
};
|
|
153
|
+
/**
|
|
154
|
+
* Add a wrapper around each wrappable property of the column to customize the behavior of the aggregation cells.
|
|
155
|
+
*/
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
export const wrapColumnWithAggregationValue = ({
|
|
159
|
+
column,
|
|
160
|
+
apiRef,
|
|
161
|
+
aggregationRule
|
|
162
|
+
}) => {
|
|
163
|
+
const getCellAggregationResult = (id, field) => {
|
|
164
|
+
var _parent, _gridAggregationLooku;
|
|
165
|
+
|
|
166
|
+
let cellAggregationPosition = null;
|
|
167
|
+
|
|
168
|
+
if (id.toString().startsWith('auto-generated-row-')) {
|
|
169
|
+
cellAggregationPosition = 'inline';
|
|
170
|
+
} else if (id.toString().startsWith('auto-generated-group-footer-')) {
|
|
171
|
+
cellAggregationPosition = 'footer';
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
if (cellAggregationPosition == null) {
|
|
175
|
+
return null;
|
|
176
|
+
} // TODO: Add custom root id
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
const groupId = cellAggregationPosition === 'inline' ? id : (_parent = apiRef.current.getRowNode(id).parent) != null ? _parent : '';
|
|
180
|
+
const aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)[groupId]) == null ? void 0 : _gridAggregationLooku[field];
|
|
181
|
+
|
|
182
|
+
if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {
|
|
183
|
+
return null;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
return aggregationResult;
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
const aggregationWrappedProperties = {};
|
|
190
|
+
|
|
191
|
+
const wrappedColumn = _extends({}, column, {
|
|
192
|
+
aggregationWrappedProperties
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
const wrapColumnProperty = (property, wrapper) => {
|
|
196
|
+
const originalValue = column[property];
|
|
197
|
+
const wrappedProperty = wrapper({
|
|
198
|
+
apiRef,
|
|
199
|
+
value: originalValue,
|
|
200
|
+
colDef: column,
|
|
201
|
+
aggregationRule,
|
|
202
|
+
getCellAggregationResult
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
if (wrappedProperty !== originalValue) {
|
|
206
|
+
aggregationWrappedProperties[property] = {
|
|
207
|
+
original: originalValue,
|
|
208
|
+
wrapped: wrappedProperty
|
|
209
|
+
};
|
|
210
|
+
wrappedColumn[property] = wrappedProperty;
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
|
|
214
|
+
wrapColumnProperty('valueGetter', getAggregationValueWrappedValueGetter);
|
|
215
|
+
wrapColumnProperty('valueFormatter', getAggregationValueWrappedValueFormatter);
|
|
216
|
+
wrapColumnProperty('renderCell', getAggregationValueWrappedRenderCell);
|
|
217
|
+
wrapColumnProperty('renderHeader', getWrappedRenderHeader);
|
|
218
|
+
wrapColumnProperty('filterOperators', getWrappedFilterOperators);
|
|
219
|
+
|
|
220
|
+
if (Object.keys(aggregationWrappedProperties).length === 0) {
|
|
221
|
+
return column;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
return wrappedColumn;
|
|
225
|
+
};
|
|
226
|
+
/**
|
|
227
|
+
* Remove the aggregation wrappers around the wrappable properties of the column.
|
|
228
|
+
*/
|
|
229
|
+
|
|
230
|
+
export const unwrapColumnFromAggregation = ({
|
|
231
|
+
column
|
|
232
|
+
}) => {
|
|
233
|
+
if (!column.aggregationWrappedProperties) {
|
|
234
|
+
return column;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
const originalProperties = Object.entries(column.aggregationWrappedProperties);
|
|
238
|
+
|
|
239
|
+
if (originalProperties.length === 0) {
|
|
240
|
+
return column;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
const unwrappedColumn = _extends({}, column);
|
|
244
|
+
|
|
245
|
+
originalProperties.forEach(([propertyName, {
|
|
246
|
+
original,
|
|
247
|
+
wrapped
|
|
248
|
+
}]) => {
|
|
249
|
+
// The value changed since we wrapped it
|
|
250
|
+
if (wrapped !== column[propertyName]) {
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
unwrappedColumn[propertyName] = original;
|
|
255
|
+
});
|
|
256
|
+
return unwrappedColumn;
|
|
257
|
+
};
|
|
@@ -46,7 +46,8 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
|
|
|
46
46
|
api.unstable_calculateColSpan({
|
|
47
47
|
rowId: id,
|
|
48
48
|
minFirstColumn: 0,
|
|
49
|
-
maxLastColumn: columns.length
|
|
49
|
+
maxLastColumn: columns.length,
|
|
50
|
+
columns
|
|
50
51
|
});
|
|
51
52
|
columns.forEach((column, colIndex) => {
|
|
52
53
|
const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
|
package/hooks/features/index.js
CHANGED
|
@@ -4,6 +4,7 @@ const _excluded = ["leafField", "mainGroupingCriteria", "hideDescendantCount"],
|
|
|
4
4
|
_excluded2 = ["leafField", "mainGroupingCriteria", "hideDescendantCount"];
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { GRID_STRING_COL_DEF } from '@mui/x-data-grid-pro';
|
|
7
|
+
import { GridGroupingColumnFooterCell } from '../../../components/GridGroupingColumnFooterCell';
|
|
7
8
|
import { GridGroupingCriteriaCell } from '../../../components/GridGroupingCriteriaCell';
|
|
8
9
|
import { GridGroupingColumnLeafCell } from '../../../components/GridGroupingColumnLeafCell';
|
|
9
10
|
import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from './gridRowGroupingUtils';
|
|
@@ -152,7 +153,12 @@ export const createGroupingColDefForOneGroupingCriteria = ({
|
|
|
152
153
|
const commonProperties = {
|
|
153
154
|
width: Math.max(((_groupedByColDef$widt = groupedByColDef.width) != null ? _groupedByColDef$widt : GRID_STRING_COL_DEF.width) + 40, (_leafColDef$width = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width : 0),
|
|
154
155
|
renderCell: params => {
|
|
155
|
-
// Render
|
|
156
|
+
// Render footer
|
|
157
|
+
if (params.rowNode.position === 'footer') {
|
|
158
|
+
return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
|
|
159
|
+
} // Render leaves
|
|
160
|
+
|
|
161
|
+
|
|
156
162
|
if (params.rowNode.groupingField == null) {
|
|
157
163
|
if (leafColDef) {
|
|
158
164
|
const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
|
|
@@ -253,7 +259,12 @@ export const createGroupingColDefForAllGroupingCriteria = ({
|
|
|
253
259
|
return ((_columnsLookup$field$ = columnsLookup[field].width) != null ? _columnsLookup$field$ : GRID_STRING_COL_DEF.width) + 40;
|
|
254
260
|
}), (_leafColDef$width2 = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width2 : 0),
|
|
255
261
|
renderCell: params => {
|
|
256
|
-
// Render
|
|
262
|
+
// Render footer
|
|
263
|
+
if (params.rowNode.position === 'footer') {
|
|
264
|
+
return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
|
|
265
|
+
} // Render the leaves
|
|
266
|
+
|
|
267
|
+
|
|
257
268
|
if (params.rowNode.groupingField == null) {
|
|
258
269
|
if (leafColDef) {
|
|
259
270
|
const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
|
|
@@ -79,13 +79,17 @@ export const filterRowTreeFromGroupingColumns = params => {
|
|
|
79
79
|
visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
|
|
80
80
|
filteredRowsLookup[node.id] = shouldPassFilters;
|
|
81
81
|
|
|
82
|
+
if (node.footerId != null) {
|
|
83
|
+
visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
|
|
84
|
+
}
|
|
85
|
+
|
|
82
86
|
if (!shouldPassFilters) {
|
|
83
87
|
return 0;
|
|
84
88
|
}
|
|
85
89
|
|
|
86
90
|
filteredDescendantCountLookup[node.id] = filteredDescendantCount;
|
|
87
91
|
|
|
88
|
-
if (!node.children) {
|
|
92
|
+
if (!node.children && !node.isAutoGenerated) {
|
|
89
93
|
return filteredDescendantCount + 1;
|
|
90
94
|
}
|
|
91
95
|
|
|
@@ -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: React.MutableRefObject<GridApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'rowGroupingModel' | 'onRowGroupingModelChange' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' | 'groupingColDef' | 'rowGroupingColumnMode' | 'disableRowGrouping'>) => void;
|
|
11
|
+
export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'initialState' | 'rowGroupingModel' | 'onRowGroupingModelChange' | 'defaultGroupingExpansionDepth' | 'isGroupExpandedByDefault' | 'groupingColDef' | 'rowGroupingColumnMode' | 'disableRowGrouping'>) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import
|
|
3
|
+
import MuiDivider from '@mui/material/Divider';
|
|
4
4
|
import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid-pro';
|
|
5
5
|
import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid-pro/internals';
|
|
6
6
|
import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
|
|
@@ -8,6 +8,11 @@ import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroup
|
|
|
8
8
|
import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
|
|
9
9
|
import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
|
|
12
|
+
const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
|
|
13
|
+
onClick: event => event.stopPropagation()
|
|
14
|
+
});
|
|
15
|
+
|
|
11
16
|
export const rowGroupingStateInitializer = (state, props, apiRef) => {
|
|
12
17
|
var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
|
|
13
18
|
|
|
@@ -27,6 +32,8 @@ export const rowGroupingStateInitializer = (state, props, apiRef) => {
|
|
|
27
32
|
*/
|
|
28
33
|
|
|
29
34
|
export const useGridRowGrouping = (apiRef, props) => {
|
|
35
|
+
var _props$initialState3, _props$initialState3$;
|
|
36
|
+
|
|
30
37
|
apiRef.current.unstable_registerControlState({
|
|
31
38
|
stateId: 'rowGrouping',
|
|
32
39
|
propModel: props.rowGroupingModel,
|
|
@@ -90,16 +97,16 @@ export const useGridRowGrouping = (apiRef, props) => {
|
|
|
90
97
|
* PRE-PROCESSING
|
|
91
98
|
*/
|
|
92
99
|
|
|
93
|
-
const addColumnMenuButtons = React.useCallback((initialValue,
|
|
100
|
+
const addColumnMenuButtons = React.useCallback((initialValue, column) => {
|
|
94
101
|
if (props.disableRowGrouping) {
|
|
95
102
|
return initialValue;
|
|
96
103
|
}
|
|
97
104
|
|
|
98
105
|
let menuItems;
|
|
99
106
|
|
|
100
|
-
if (isGroupingColumn(
|
|
107
|
+
if (isGroupingColumn(column.field)) {
|
|
101
108
|
menuItems = /*#__PURE__*/_jsx(GridRowGroupingColumnMenuItems, {});
|
|
102
|
-
} else if (
|
|
109
|
+
} else if (column.groupable) {
|
|
103
110
|
menuItems = /*#__PURE__*/_jsx(GridRowGroupableColumnMenuItems, {});
|
|
104
111
|
} else {
|
|
105
112
|
menuItems = null;
|
|
@@ -111,14 +118,17 @@ export const useGridRowGrouping = (apiRef, props) => {
|
|
|
111
118
|
|
|
112
119
|
return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), menuItems];
|
|
113
120
|
}, [props.disableRowGrouping]);
|
|
114
|
-
const stateExportPreProcessing = React.useCallback(prevState => {
|
|
115
|
-
|
|
116
|
-
return prevState;
|
|
117
|
-
}
|
|
121
|
+
const stateExportPreProcessing = React.useCallback((prevState, context) => {
|
|
122
|
+
var _props$initialState2, _props$initialState2$;
|
|
118
123
|
|
|
119
124
|
const rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
|
|
125
|
+
const shouldExportRowGroupingModel = // Always export if the `exportOnlyDirtyModels` property is activated
|
|
126
|
+
!context.exportOnlyDirtyModels || // Always export if the model is controlled
|
|
127
|
+
props.rowGroupingModel != null || // Always export if the model has been initialized
|
|
128
|
+
((_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.rowGrouping) == null ? void 0 : _props$initialState2$.model) != null || // Export if the model is not empty
|
|
129
|
+
Object.keys(rowGroupingModelToExport).length > 0;
|
|
120
130
|
|
|
121
|
-
if (
|
|
131
|
+
if (!shouldExportRowGroupingModel) {
|
|
122
132
|
return prevState;
|
|
123
133
|
}
|
|
124
134
|
|
|
@@ -127,7 +137,7 @@ export const useGridRowGrouping = (apiRef, props) => {
|
|
|
127
137
|
model: rowGroupingModelToExport
|
|
128
138
|
}
|
|
129
139
|
});
|
|
130
|
-
}, [apiRef, props.
|
|
140
|
+
}, [apiRef, props.rowGroupingModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.rowGrouping) == null ? void 0 : _props$initialState3$.model]);
|
|
131
141
|
const stateRestorePreProcessing = React.useCallback((params, context) => {
|
|
132
142
|
var _context$stateToResto;
|
|
133
143
|
|
package/index.js
CHANGED
|
@@ -275,6 +275,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
|
|
|
275
275
|
experimentalFeatures: PropTypes.shape({
|
|
276
276
|
newEditingApi: PropTypes.bool,
|
|
277
277
|
preventCommitWhileValidating: PropTypes.bool,
|
|
278
|
+
private_aggregation: PropTypes.bool,
|
|
278
279
|
warnIfFocusStateIsNotSynced: PropTypes.bool
|
|
279
280
|
}),
|
|
280
281
|
|
|
@@ -866,6 +867,52 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
|
|
|
866
867
|
right: PropTypes.arrayOf(PropTypes.string)
|
|
867
868
|
}),
|
|
868
869
|
|
|
870
|
+
/**
|
|
871
|
+
* Aggregation functions available on the grid.
|
|
872
|
+
* @default GRID_AGGREGATION_FUNCTIONS
|
|
873
|
+
* @ignore - do not document.
|
|
874
|
+
*/
|
|
875
|
+
private_aggregationFunctions: PropTypes.object,
|
|
876
|
+
|
|
877
|
+
/**
|
|
878
|
+
* Set the aggregation model of the grid.
|
|
879
|
+
* @ignore - do not document.
|
|
880
|
+
*/
|
|
881
|
+
private_aggregationModel: PropTypes.object,
|
|
882
|
+
|
|
883
|
+
/**
|
|
884
|
+
* Rows used to generate the aggregated value.
|
|
885
|
+
* If `filtered`, the aggregated values will be generated using only the rows currently passing the filtering process.
|
|
886
|
+
* If `all`, the aggregated values will be generated using all the rows.
|
|
887
|
+
* @default "filtered"
|
|
888
|
+
* @ignore - do not document.
|
|
889
|
+
*/
|
|
890
|
+
private_aggregationRowsScope: PropTypes.oneOf(['all', 'filtered']),
|
|
891
|
+
|
|
892
|
+
/**
|
|
893
|
+
* If `true`, aggregation is disabled.
|
|
894
|
+
* @default false
|
|
895
|
+
* @ignore - do not document.
|
|
896
|
+
*/
|
|
897
|
+
private_disableAggregation: PropTypes.bool,
|
|
898
|
+
|
|
899
|
+
/**
|
|
900
|
+
* Determines the position of an aggregated value.
|
|
901
|
+
* @param {GridRowTreeNodeConfig | null} groupNode The current group (`null` being the top level group).
|
|
902
|
+
* @returns {GridAggregationPosition | null} Position of the aggregated value (if `null`, the group will not be aggregated).
|
|
903
|
+
* @default `(groupNode) => groupNode == null ? 'footer' : 'inline'`
|
|
904
|
+
* @ignore - do not document.
|
|
905
|
+
*/
|
|
906
|
+
private_getAggregationPosition: PropTypes.func,
|
|
907
|
+
|
|
908
|
+
/**
|
|
909
|
+
* Callback fired when the row grouping model changes.
|
|
910
|
+
* @param {GridAggregationModel} model The aggregated columns.
|
|
911
|
+
* @param {GridCallbackDetails} details Additional details for this callback.
|
|
912
|
+
* @ignore - do not document.
|
|
913
|
+
*/
|
|
914
|
+
private_onAggregationModelChange: PropTypes.func,
|
|
915
|
+
|
|
869
916
|
/**
|
|
870
917
|
* Callback called before updating a row with new values in the row and cell editing.
|
|
871
918
|
* Only applied if `props.experimentalFeatures.newEditingApi: true`.
|