[DataGrid] Customize separator in CSV export

[friedensstifter]

Hi,

i've worked a little bit with Data Grid

1. Can you make the separator for csv export selectable? In Germany its a semicolon, not a comma. It would be great to export it with an ; instead of , Fixed in [DataGrid] Allow to set in GridExportCsvOptions delimiter #1859
2. Can you add the choice, if a column should not be exported to csv? I'm creating links in some columns, they should not be exported. And i haven't found a way to prevent it Duplicate of [DataGrid] Allow to remove column from CSV export #1435
3. The Coding of the file show cryptic letters instead of german umlaut. So, if i export the word "Fakultät" (Fakultät), Excel dont uses utf-8 for file coding. If i open the csv over Data import from file i can change the coding of the file. Is there a way to export in itf-8? Fixed in [DataGrid] Allow to customize GridToolbarExport's CSV export #1695

Thanks,
friedensstifter

[michallukowski]

The solution for point 3 would be to add sequence of bytes (0xEF, 0xBB, 0xBF) at the beginning of a csv file. This would allow Excel to automatically detect file encoding as UTF-8, but according to the Unicode standard, the BOM for UTF-8 files is not recommended. The implementation of this solution is very simple and requires replacement in useGridCsvExport.tsx:

const blob = new Blob([csv], { type: 'text/csv' });

by

const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), [csv]], { type: 'text/csv' });

It should be optional and by default it should work as it currently is.

It would be great to add options in the GridToolbarExport that would allow you to configure:

• csv separator: ",", ";", " " or any passed by developer
• decimal separator: "." or ","
• flag to generate UTF-8 or UTF-8 with BOM

[dtassone]

@michallukowski maybe you could do a PR for the UTF 8 fix 🤔

[oliviertassinari]

Regarding point 3. it was fixed in #1695 with:

<GridToolbarExport
  csvOptions={{
    utf8WithBom: true,
  }}
/>

We could probably add documentation about this utf8WithBom new property. It's empty:

https://github.com/mui-org/material-ui-x/blob/fdeb8680fc1add53dc86b7b8d832b180abe18a8e/packages/grid/_modules_/grid/models/gridExport.ts#L6

Maybe:

diff --git a/packages/grid/_modules_/grid/models/gridExport.ts b/packages/grid/_modules_/grid/models/gridExport.ts
index eeb97c27..e1576744 100644
--- a/packages/grid/_modules_/grid/models/gridExport.ts
+++ b/packages/grid/_modules_/grid/models/gridExport.ts
@@ -2,7 +2,16 @@
  * The options to apply on the CSV export.
  */
 export interface GridExportCsvOptions {
+  /**
+   * String to use as the file name.
+   * @default `document.title`
+   */
   fileName?: string;
+  /**
+   * If `true`, the UTF-8 Byte Order Mark (BOM) prefixes the exported file.
+   * This can allow Excel to automatically detect file encoding as UTF-8.
+   * @default false
+   */
   utf8WithBom?: boolean;
 }

?

---

Regarding point 1, maybe we can add a simple new option:

diff --git a/packages/grid/_modules_/grid/models/gridExport.ts b/packages/grid/_modules_/grid/models/gridExport.ts
index eeb97c27..6a73ed68 100644
--- a/packages/grid/_modules_/grid/models/gridExport.ts
+++ b/packages/grid/_modules_/grid/models/gridExport.ts
@@ -2,6 +2,11 @@
  * The options to apply on the CSV export.
  */
 export interface GridExportCsvOptions {
+  /**
+   * The delimiter inserted between cell values.
+   * @default ','
+   */
+  delimiter?: string;
   fileName?: string;
   utf8WithBom?: boolean;
 }

for delimiter vs. separator see https://en.wikipedia.org/wiki/Delimiter

---

For point 2, I have suppressed the point as it duplicates with #1435

[oliviertassinari]

I'm closing as the 3 points raised in this issue have been solved.