[data grid] V7 CSV export regression for `undefined` and `null` values

[milotoor]

Latest version

• I have tested the latest version

Steps to reproduce

Link to live examples:

• Example with DataGrid v6
• Example with DataGrid v7

Steps:

1. Navigate to the sandbox
2. After it loads, click the "Export" button in the table toolbar and select "Download as CSV"
3. Open the two CSVs. In the v6 demo the first row's "Trader Email" and "Trader Name" columns are blank. In the v7 demo the first row's "Trader Email" column says undefined and its "Trader Name" column says null

Current behavior

When a table row has a column whose value is undefined or null the corresponding cell of the CSV reads undefined or null, respectively.

Expected behavior

The corresponding cell value should be blank.

Context

In the v6 DataGrid, when a table row has a column whose value was undefined or null the corresponding row of the CSV would be blank. After migrating to v7 it seems that this behavior was lost, as the cells now contain the text undefined and null, respectively.

It's unclear if this was intentional or not, as there's no mention of this in the v6 to v7 migration guide. If it was intentional, I think this constitutes a breaking change and should be added to the guide.

Your environment

npx @mui/envinfo

  Using browser: Chrome
  System:
    OS: macOS 14.0
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 127.0.6533.89
    Edge: Not Found
    Safari: 17.0
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.17
    @mui/icons-material: ^5.15.17 => 5.15.17
    @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170
    @mui/material: ^5.15.17 => 5.15.17
    @mui/private-theming:  5.16.5
    @mui/styled-engine:  5.16.4
    @mui/system: ^5.15.15 => 5.16.5
    @mui/types:  7.2.15
    @mui/utils:  5.16.5
    @mui/x-charts: ^7.11.1 => 7.11.1
    @mui/x-data-grid:  7.8.0
    @mui/x-data-grid-premium: ^7.0.0 => 7.8.0
    @mui/x-data-grid-pro:  7.8.0
    @mui/x-date-pickers:  7.8.0
    @mui/x-date-pickers-pro: ^7.0.0 => 7.8.0
    @mui/x-license:  7.8.0
    @types/react: ^18.3.2 => 18.3.2
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.5.3 => 5.5.3

Search keywords: DataGrid v7 CSV export undefined null
Order ID: 87847

[michelengelen]

Hey @milotoor ... I can confirm the regression! Thanks for raising this.
It seems as if a change in this PR (#13560) caused this.
Specifically this part:

const valueStr = typeof value === 'string' ? value : `${value}`;

It should probably include an early return like this:

if (value == null) {
  return '';
}
const valueStr = typeof value === 'string' ? value : `${value}`;

@flaviendelangle ^^ 😛

[cmeyer-kareo]

Hey @michelengelen, just ran into this issue and it's a bit of blocker for an upcoming release. Any updates on timing for a fix would help a lot in our release planning.

Thanks

Order ID: 93310

[michelengelen]

@cmeyer-kareo ... I understand that and we can assure you that this will be fixed as soon as our team has the capacity to do so. If you need it faster for your release you are free to open up a PR to fix this yourself! We always appreciate contributions from our community

[k-rajat19]

This PR will fix that #14166 :)

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@milotoor: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.