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.16k stars 1.3k forks source link

[DataGrid] Control rendered field in CSV export #1145

Closed fanavarro closed 3 years ago

fanavarro commented 3 years ago

Hi and thanks for your work, it is very useful.

I have been using the DataGrid component in an application for the last months. Now, I am trying to use the recently added CSV export functionality, but I am not sure about how to specify the render method for creating the CSV file.

Concretely, my data is formed by JSON objects, so I have to specify the 'valueGetter' prop when defining the columns in order to print a concrete field of my data in the DataGrid, and this works perfectly well. Now, I included the CSV export functionality as the documentation shows, and this adds the button for the CSV download. However, when I download the CSV, the cells contain the string "[object Object]".

I think there should be a property or something to specify a function to convert JSON object to the final CSV cell value, as someone recommended here, but I have been searching in the documentation and I have not found nothing relevant. What is the way to do this?

Thanks beforehand.

oliviertassinari commented 3 years ago

Please provide a minimal reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

fanavarro commented 3 years ago

Hi @oliviertassinari, thanks for your quick response! Sorry for not following the issue template, but I though this was a question more than a bug. I have created a live example https://codesandbox.io/s/material-ui-issue-forked-d63me?file=/src/Demo.js. I've never used codesanbox before, I hope I created it well. In that code you have json objects as data, particularly brands, which have a name and a founder, and models, which have a name and a stock. I used the valueGetter prop when defining columns to select the name as the property to be printed in the table; however, if you export the CSV file, you will see [object Object] in all cells. I think this is due to it is trying to print the JSON object directly without applying the valueGetter function. My question is if there is a way to customize how the data is printed in the CSV file.

Thanks!

oliviertassinari commented 3 years ago

@fanavarro Perfect, thanks for the reproduction.

@DanailH I think that it's a follow-up on the CSV work you have started. (1.) It does seem wrong that we are not using the output of valueGetter. I think that we could start there. It seems to be an easy win.

Regarding pushing the solution further. I didn't benchmark what the other data grid is doing regarding this matter. I imagine there is an opportunity to add many more options. I would be cautious, it might be best to move slowly here. It seems that (1.) is enough for this very problem.

stevieg2123 commented 3 years ago

Somewhat on-topic with this: It would be great for the CSV export to respect valueFormatter in the output. We do some EPOCH conversions, as well as bool to Yes/No - CSV export is dumping the raw input (and encountering the comma issue, which massive +1 to the work on. #1143)

Let me know if you want me to punt this to a separate issue for tracking

DanailH commented 3 years ago

@stevieg2123 thanks for raising this.

@oliviertassinari yes we need to address the problem with the valueGetter.

fanavarro commented 3 years ago

I would suggest not only to apply the valueGetter but also to provide a way to control how the raw data is rendered in the final CSV file. For example, a developer could want to show the main aspects of the data in the online table, but he or she could want to include other things that are hidden in this table when exporting to CSV.

oliviertassinari commented 3 years ago

@fanavarro I don't follow, this is exactly what this issue is about since it was opened. Why reinforce this point?

fanavarro commented 3 years ago

Hi @oliviertassinari. Sorry, I though the planned solution would be to simply apply the valueGetter when exporting the CSV. Misunderstanding from my part, my apologies.

m4theushw commented 3 years ago

This was fixed in #1154 which is already included in the latest release.

I'll close this issue and move the discussion about https://github.com/mui-org/material-ui-x/issues/1145#issuecomment-790965569 to #1814 because it's the same use case.