search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.15k stars 1.3k forks source link

[DataGrid] Allow to remove column from CSV export #1435

Closed Neonin closed 3 years ago

Neonin commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.

Снимок экрана от 2021-04-19 12-31-10

DanailH commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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.

oliviertassinari commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 1 year ago

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/