[DataGrid] valueGetter does not apply to CSV export

[wjdwndud0114]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The CSV export does not get the column value that is displayed in the table through valueGetter. So in the case of objects, it shows [Object object] rather than the value derived from valueGetter of the column.

Expected Behavior 🤔

The exported CSV column that use valueGetter should show the value with valueGetter applied.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-forked-h262z

Steps:

1. Export to CSV
2. Compare values between the table and the CSV file.

Context 🔦

Related to #1145. Not sure if this is a duplicate or tracked separately for X-Grid.

Our customers would like to be able to export the table content to do additional work on the data. To display what's on the table, we need:

1. valueGetter to apply to column values in the CSV to reflect what is being displayed in the table
2. additional way to change the value just for the export. For example, something like exportValueGetter that is run just for export (I included an example in the codesandbox above).

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 11.0.1
  Binaries:
    Node: 16.1.0 - ~/.n/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.11.2 - ~/.n/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.1
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0
    @material-ui/core: ^4.11.0 => 4.11.2
    @material-ui/icons: ^4.5.1 => 4.11.2
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57
    @material-ui/pickers: ^3.2.7 => 3.2.10
    @material-ui/styles:  4.11.2
    @material-ui/system:  4.11.2
    @material-ui/types:  5.1.0
    @material-ui/utils: ^4.10.2 => 4.11.2
    @material-ui/x-grid: ^4.0.0-alpha.27 => 4.0.0-alpha.30
    @material-ui/x-license:  4.0.0-alpha.30
    @types/react:  17.0.8
    react: 16.14.0 => 16.14.0
    react-dom: ~16.9.0 => 16.9.0
    typescript:  3.9.7

Order id 💳

[Order #25281] (May 25, 2021)

[m4theushw]

The CSV export uses the raw value returned by the valueGetter. In your case, since it's a non-string value (an array) and the content to be displayed to the user is computed by a custom cell, you see those "[Object object]". I propose two solutions:

1. Add a valueFormatter function to the csvOptions prop (added in [DataGrid] Allow to customize GridToolbarExport's CSV export #1695) to provide a string value exclusivly for the CSV.

   AG-Grid calls it processCellCallback: https://ag-grid.com/react-grid/csv-export/

   <GridToolbarExport
     csvOptions={{
       valueFormatter: (value, column) => {
         return value.map(v => v.label).join(', ');
       }
     }}
   />

2. Apply the valueFormatter defined in the GridColDef to the CSV export too.

[dtassone]

I think 2. is good enough for now 🤔
At a later stage, we can add an option to use the valueformatter from col Def, set it to another function for csv, or just use the raw value

[wjdwndud0114]

The CSV export uses the raw value returned by the valueGetter. In your case, since it's a non-string value (an array) and the content to be displayed to the user is computed by a custom cell, you see those "[Object object]".

You're right. I meant to include valueFormatter in the demo for the "Outstanding Balance" column, not valueGetter. Is there guidelines on usages of valueFormatter and valueGetter?

[oliviertassinari]

Are there guidelines on usages of valueFormatter and valueGetter?

We could add documentation about it in the CSV export page 👍 https://material-ui.com/components/data-grid/export/#csv-export