[DataGrid] Allow to remove column from CSV export

[Neonin]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I would like to be able to customize whether I need to export some columns.

Examples 🌈

https://codesandbox.io/s/github/gregnb/mui-datatables?file=/examples/csv-export/index.js:678-686

Motivation 🔦

For example with action columns.

Order id 💳

19652

[dtassone]

As a workaround, you can already hide the columns you don't want to export.

We could add an exportable flag in the column definition 🤔

[Neonin]

Thanks for the answer.
I think I misinterpreted the problem, the workaround doesn't work as I need to see this column, but not in the export file.

I will be grateful if you take this to work.

[DanailH]

As a workaround, you can already hide the columns you don't want to export.

We could add an exportable flag in the column definition 🤔

That seems like the easiest solution with the least overhead.

[oliviertassinari]

That seems like the easiest solution with the least overhead.

Is the pain frequent/important enough to have a dedicated prop? I don't think that have this information yet.

How about we aim for the most generic solution instead? Something that allows to gain full control of the exported content of the CSV? If we could also benchmark how the other grid are solving this problem, it could also yield information.

[Neonin]

Also, I think that it would be more convenient to get a prop callback that would configure the export itself, the name of the export file, change the displayed data.

An example of the same library that I am using for this - mui-datatables with prop onDownload.

[oliviertassinari]

@Neonin Agree, in the first iteration of the CSV feature, we went for the simplest solution with the smallest possible API surface, as we should have. This is what allows us to have conversions like this one, where developers report specific use cases.

[dtassone]

AgGrid just allows few options in their api. No panel.
https://www.ag-grid.com/react-grid/export/

Kendo has a component for export that can takes some columns and data
https://www.telerik.com/kendo-react-ui/components/grid/excel-export/

The aim of my solution was to take a pragmatic approach in order to fix the issue and unblock our users in brief delays. Then we could revisit this feature, and improve it slowly, incremental design.

IMO, we should fix the following for the first version.

• unicode for export
• allow users to customize the csv separator
• allow users to choose which column to export

[oliviertassinari]

@dtassone So in the benchmark:

1. AG Grid has a params for its export feature. Developers can, for instance, provide a list of columns they want to export.
2. Kendo UI React use a save() method, with horrible documentation, wtf. But still, it shows that the configuration of the columns is important for them.
3. material-table has a boolean on the column definition to exclude columns in the export and a transformation function.

I agree with the 3 pains you have listed. It sounds great to solve them.

Regarding the solution, 👍 for the solution of AG Grid. Have the export feature accept params. It could be both an argument in the apiRef and props in the toolbar export button.

[DanailH]

Regarding the solution, 👍 for the solution of AG Grid. Have the export feature accept params. It could be both an argument in the apiRef and props in the toolbar export button.

I agree with this. That was always part of the initial discussion. Seems that there is a demand for it now. Also if we are to go with this we should add an option for devs to pass in their own delimiter.

[joziahg]

Chiming in, I would love to use the formatted value in exports. Maybe resolve it like column rendering:
valueFormatter() => string
valueGetter() => string
row[field]

[flaviendelangle]

@DanailH you can already pass your own delimiter

If you call manually exportDataAsCsv :

apiRef!.current.exportDataAsCsv({ delimiter: ';' })

If you use GridToolbarExport :

return (
  <GridToolbarExport
    csvOptions={{ delimiter: ';' }}
  />
) 

But this is not correctly documented.

[manoharreddyporeddy]

Solution is to use:

disableExport: true

Example:

<DataGrid columns={[{ field: 'name', disableExport: true }, { field: 'brand' }]} />

More details at:

https://mui.com/x/react-data-grid/export/