Comments (3)
True that it does provide a bit more flexibilty. I just suggested that to not add something that would impact a lot of places in the code.
We could also do a hybrid approach where we provide the GridCsvExportOptions
with a getter function when needed: getHeaderName
or similar.
I will add this to our board for the team to have a look.
Here is a proposal how this could look like:
diff --git a/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts b/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts
index 88eea0e80..bda5a31e3 100644
--- a/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts
+++ b/packages/x-data-grid/src/hooks/features/export/serializers/csvSerializer.ts
@@ -135,6 +135,8 @@ interface BuildCSVOptions {
delimiterCharacter: NonNullable<GridCsvExportOptions['delimiter']>;
includeHeaders: NonNullable<GridCsvExportOptions['includeHeaders']>;
includeColumnGroupsHeaders: NonNullable<GridCsvExportOptions['includeColumnGroupsHeaders']>;
+ getHeaderName: NonNullable<GridCsvExportOptions['getHeaderName']>;
+ getColumnGroupHeaderName: NonNullable<GridCsvExportOptions['getColumnGroupHeaderName']>;
ignoreValueFormatter: boolean;
apiRef: React.MutableRefObject<GridApiCommunity>;
shouldAppendQuotes: boolean;
@@ -146,7 +148,9 @@ export function buildCSV(options: BuildCSVOptions): string {
rowIds,
delimiterCharacter,
includeHeaders,
+ getHeaderName,
includeColumnGroupsHeaders,
+ getColumnGroupHeaderName,
ignoreValueFormatter,
apiRef,
shouldAppendQuotes,
@@ -200,14 +204,20 @@ export function buildCSV(options: BuildCSVOptions): string {
filteredColumns.forEach((column) => {
const columnGroupId = (columnGroupPathsLookup[column.field] || [])[i];
const columnGroup = columnGroupLookup[columnGroupId];
- headerGroupRow.addValue(columnGroup ? columnGroup.headerName || columnGroup.groupId : '');
+ headerGroupRow.addValue(
+ columnGroup
+ ? getColumnGroupHeaderName?.(columnGroup) ||
+ columnGroup.headerName ||
+ columnGroup.groupId
+ : '',
+ );
});
}
}
const mainHeaderRow = new CSVRow({ delimiterCharacter, sanitizeCellValue, shouldAppendQuotes });
filteredColumns.forEach((column) => {
- mainHeaderRow.addValue(column.headerName || column.field);
+ mainHeaderRow.addValue(getHeaderName?.(column) || column.headerName || column.field);
});
headerRows.push(mainHeaderRow);
diff --git a/packages/x-data-grid/src/models/gridExport.ts b/packages/x-data-grid/src/models/gridExport.ts
index 07aea4967..6a469c1b4 100644
--- a/packages/x-data-grid/src/models/gridExport.ts
+++ b/packages/x-data-grid/src/models/gridExport.ts
@@ -1,4 +1,6 @@
import * as React from 'react';
+import { GridColDef } from '@mui/x-data-grid/models/colDef';
+import { GridColumnGroup } from '@mui/x-data-grid/models/gridColumnGrouping';
import { GridRowId } from './gridRows';
import type { GridApiCommon } from './api';
import type { GridApiCommunity } from './api/gridApiCommunity';
@@ -83,12 +85,24 @@ export interface GridCsvExportOptions extends GridFileExportOptions {
* @default true
*/
includeHeaders?: boolean;
+ /**
+ * Can be used to get a custom headerName value for a column.
+ * @param {GridColDef} colDef The column definition.
+ * @returns {string} The header name.
+ */
+ getHeaderName?: (colDef: GridColDef) => string;
/**
* If `true`, the CSV will include the column groups.
* @see See {@link https://mui.com/x/react-data-grid/column-groups/ column groups docs} for more details.
* @default true
*/
includeColumnGroupsHeaders?: boolean;
+ /**
+ * Can be used to get a custom headerName value for a column.
+ * @param {Omit<GridColumnGroup, 'children'>} columnGroup The column definition.
+ * @returns {string} The header name.
+ */
+ getColumnGroupHeaderName?: (columnGroup: Omit<GridColumnGroup, 'children'>) => string;
/**
* Function that returns the list of row ids to export on the order they should be exported.
* @param {GridCsvGetRowsToExportParams} params With all properties from [[GridCsvGetRowsToExportParams]].
@mui/xgrid WDYT?
from mui-x.
Hey @ianroberts ... afaik this is currently not possible.
Another approach to this could be to add a new option to the GridCsvExportOptions
. Something like useFieldForHeaderName
which then simply returns the field name.
WDYT @mui/xgrid ?
from mui-x.
Something like
useFieldForHeaderName
which then simply returns the field name.
This would work nicely for my case, the only reason I suggested a separate csvHeaderName
is that it's a bit more flexible - if you want the CSV header to be the field name then you can easily set the two properties to the same value, but if you want the CSV header to be something different then useFieldForHeaderName
wouldn't be sufficient.
from mui-x.
Related Issues (20)
- [pickers] Wrong focusable component on Year Calendar HOT 1
- [charts] bar chart gradient color HOT 6
- Dayjs type removed from Datepicker value HOT 3
- [data grid] The user should not hide all columns; at least one column should be displayed HOT 4
- [data grid] How does pagination work when the row elements are not static? HOT 2
- [data grid] Strange behavior when `paginationMode` is `undefined`
- [pickers] The date picker shouldn't steal the focus when closing HOT 4
- [data grid] Flex col definition breaks on print. HOT 9
- Adding properties to CustomTreeItem for RichTreeView HOT 7
- [data grid] Filter layout issue in datagrid HOT 10
- [docs] Create a new page to introduce the concept of `slots` and `slotProps`
- [data grid] React 19 support
- Time Picker Placeholder Issue in @mui/x-date-pickers HOT 2
- [data grid] Error when changing `rowModesModel` and `rows` at the same time HOT 5
- [charts][BarCharts] Is there some information regarding the `BarCharts` having accessibility? HOT 7
- [docs] Document the `day` slot in the "Visual customisation" doc
- [data grid] How to disable hover effect for datagrid column header? HOT 4
- [data grid] Cannot use data grid with react testing library HOT 7
- [charts] Some axis props cannot be assigned with xAxis/yAxis HOT 2
- [Data Grid] Column groups - header hierarchy is announced incorrectly NVDA screen reader HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.