[DataGrid] Allow to customize the columns exported as CSV (mui#2008)

* [DataGrid] Allow to customize the columns exported as CSV * Run prettier * Add field in ColDef * Fix * RUn yarn docs:api * Fix * Code review * Rename columnKeys => field for CSV export * Run prettier * Code review * Code review * Fix
DanailH · Jul 7, 2021 · 14a2b22 · 14a2b22
1 parent 55972c6
commit 14a2b22
Show file tree

Hide file tree

Showing 6 changed files with 382 additions and 165 deletions.
diff --git a/docs/pages/api-docs/data-grid/grid-col-def.md b/docs/pages/api-docs/data-grid/grid-col-def.md
@@ -18,6 +18,7 @@ import { GridColDef } from '@material-ui/data-grid';
 | <span class="prop-name optional">cellClassName<sup><abbr title="optional">?</abbr></sup></span>     | <span class="prop-type">GridCellClassNamePropType</span>                                           |                                                  | Class name that will be added in cells for that column.                                                         |
 | <span class="prop-name optional">description<sup><abbr title="optional">?</abbr></sup></span>       | <span class="prop-type">string</span>                                                              |                                                  | The description of the column rendered as tooltip if the column header name is not fully displayed.             |
 | <span class="prop-name optional">disableColumnMenu<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span>                                                             | <span class="prop-default">false<br /></span>    | If `true`, the column menu is disabled for this column.                                                         |
+| <span class="prop-name optional">disableExport<sup><abbr title="optional">?</abbr></sup></span>     | <span class="prop-type">boolean</span>                                                             | <span class="prop-default">false<br /></span>    | If `true`, this column will not be included in exports.                                                         |
 | <span class="prop-name optional">editable<sup><abbr title="optional">?</abbr></sup></span>          | <span class="prop-type">boolean</span>                                                             | <span class="prop-default">false<br /></span>    | If `true`, the cells of the column are editable.                                                                |
 | <span class="prop-name">field</span>                                                                | <span class="prop-type">string</span>                                                              |                                                  | The column identifier. It's used to map with GridRowData values.                                                |
 | <span class="prop-name optional">filterOperators<sup><abbr title="optional">?</abbr></sup></span>   | <span class="prop-type">GridFilterOperator[]</span>                                                |                                                  | Allows setting the filter operators for this column.                                                            |

diff --git a/docs/src/pages/components/data-grid/export/export.md b/docs/src/pages/components/data-grid/export/export.md
@@ -14,6 +14,29 @@ To enable the CSV export you need to compose a toolbar containing the `GridToolb
 
 {{"demo": "pages/components/data-grid/export/ExportSelectorGrid.js", "bg": "inline"}}
 
+### Customize exported columns
+
+By default, the CSV will only contain the visible columns of the grid.
+To include or hide other columns, there are two ways:
+
+1. Define the exact columns to be exported with the `fields` attribute in the `csvOptions` prop of [`GridToolbarExport`](/components/data-grid/components/#toolbar).
+
+```jsx
+<GridToolbarExport csvOptions={{ fields: ['id', 'name'] }} />
+```
+
+Set `allColumns` in `csvOptions` to true to include hidden columns, instead of only the visible ones.
+
+```jsx
+<GridToolbarExport csvOptions={{ allColumns: true }} />
+```
+
+2. Set the `disableExport` attribute to true in each `GridColDef`.
+
+```jsx
+<DataGrid columns={[{ field: 'id', disableExport: true }, { field: 'brand' }]} />
+```
+
 ## 🚧 Print
 
 > ⚠️ This feature isn't implemented yet. It's coming.

diff --git a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx
@@ -2,34 +2,48 @@ import * as React from 'react';
 import { GridApiRef } from '../../../models/api/gridApiRef';
 import { useGridApiMethod } from '../../root/useGridApiMethod';
 import { useGridSelector } from '../core/useGridSelector';
-import { visibleGridColumnsSelector } from '../columns';
+import { allGridColumnsSelector, visibleGridColumnsSelector } from '../columns';
 import { visibleSortedGridRowsSelector } from '../filter';
 import { gridSelectionStateSelector } from '../selection';
 import { GridCsvExportApi } from '../../../models/api/gridCsvExportApi';
 import { GridExportCsvOptions } from '../../../models/gridExport';
 import { useLogger } from '../../utils/useLogger';
 import { exportAs } from '../../../utils';
 import { buildCSV } from './serializers/csvSerializer';
+import { GridColDef } from '../../../models';
 
 export const useGridCsvExport = (apiRef: GridApiRef): void => {
   const logger = useLogger('useGridCsvExport');
   const visibleColumns = useGridSelector(apiRef, visibleGridColumnsSelector);
+  const columns = useGridSelector(apiRef, allGridColumnsSelector);
   const visibleSortedRows = useGridSelector(apiRef, visibleSortedGridRowsSelector);
   const selection = useGridSelector(apiRef, gridSelectionStateSelector);
 
   const getDataAsCsv = React.useCallback(
     (options?: GridExportCsvOptions): string => {
       logger.debug(`Get data as CSV`);
 
+      let exportedColumns: GridColDef[];
+
+      if (options?.fields) {
+        exportedColumns = options.fields
+          .map((field) => columns.find((column) => column.field === field))
+          .filter((column): column is GridColDef => !!column);
+      } else {
+        const validColumns = options?.allColumns ? columns : visibleColumns;
+
+        exportedColumns = validColumns.filter((column) => !column.disableExport);
+      }
+
       return buildCSV({
-        columns: visibleColumns,
+        columns: exportedColumns,
         rows: visibleSortedRows,
         selectedRowIds: selection,
         getCellParams: apiRef.current.getCellParams,
         delimiterCharacter: options?.delimiter || ',',
       });
     },
-    [logger, visibleColumns, visibleSortedRows, selection, apiRef],
+    [logger, visibleColumns, columns, visibleSortedRows, selection, apiRef],
   );
 
   const exportDataAsCsv = React.useCallback(

diff --git a/packages/grid/_modules_/grid/models/colDef/gridColDef.ts b/packages/grid/_modules_/grid/models/colDef/gridColDef.ts
@@ -143,6 +143,11 @@ export interface GridColDef {
    * Allows setting the filter operators for this column.
    */
   filterOperators?: GridFilterOperator[];
+  /**
+   * If `true`, this column will not be included in exports.
+   * @default false
+   */
+  disableExport?: boolean;
 }
 
 export interface GridColumnProp extends Omit<GridColDef, 'filterOperators'> {

diff --git a/packages/grid/_modules_/grid/models/gridExport.ts b/packages/grid/_modules_/grid/models/gridExport.ts
@@ -23,6 +23,16 @@ export interface GridExportCsvOptions {
    * @default false
    */
   utf8WithBom?: boolean;
+  /**
+   * The columns exported in the CSV.
+   * This should only be used if you want to restrict the columns exports.
+   */
+  fields?: string[];
+  /**
+   * If `true`, the hidden columns will also be exported.
+   * @default false
+   */
+  allColumns?: boolean;
 }
 
 /**