[DataGrid] Export selected rows

[mindtraveller]

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

Summary 💡

We'd like to have the ability to export only selected rows instead of the whole set of rows.

Examples 🌈

Motivation 🔦

Sometimes it's required to export part of the data, filtering might help, but can be a bit complex for that use case. So selecting and exporting desired entries is a better option here.

Order id 💳

#27213

[m4theushw]

If you CTRL + c in the grid it will only copy the selected rows to the clipboard. The format of the exported data is the same of when using the Export button, but using the TAB delimiter which is perfect to paste in Excel.

To solve this issue, we could display an "Export selection" option in the Export menu when there's one or more rows selected.

[mindtraveller]

@m4theushw 'export selection' would be perfect. API support is expected as well.

[oliviertassinari]

Would this API make sense?

diff --git a/packages/grid/_modules_/grid/models/gridExport.ts b/packages/grid/_modules_/grid/models/gridExport.ts
index f7d1bd88..1f683778 100644
--- a/packages/grid/_modules_/grid/models/gridExport.ts
+++ b/packages/grid/_modules_/grid/models/gridExport.ts
@@ -17,6 +17,10 @@ export interface GridExportCsvOptions {
    * @default `document.title`
    */
   fileName?: string;
+  /**
+   * If `true`, only the selected rows are exported.
+   * @default false
+   */
+  onlySelected?: boolean,
   /**
    * 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.

A new prop for GridExportCsvOptions.

But if we have pagination enabled, should it only include the current page or all the pages? So maybe we should start at a lower level. We could add a rowFilter?: () => boolean prop to let the developers decide what to do.

---

To solve this issue, we could display an "Export selection" option in the Export menu when there's one or more rows selected.

@m4theushw this idea came up in the past, however, there are so many possible ways to implement this that I would encourage we focus on the API only for a long time. Similar to the "Upwind" approach of http://www.paulgraham.com/hs.html.

[mindtraveller]

@oliviertassinari If this question is to me, then for sure such setting (onlySelected) is fine, but rowFilter is more powerful.
Regarding pagination - not sure how it works now, does it preserve selected items between page changes? if so - I'd expect them to be exported.

[flaviendelangle]

It's already the current behavior
https://github.com/mui-org/material-ui-x/blob/master/packages/grid/_modules_/grid/hooks/features/export/serializers/csvSerializer.ts#L57
Am I missing something here ?

But it's buggy because of the casting to string. If we select rows, the CSV exports nothing.
I'm doing a fix 👍

We could add a rowFilter callback later to override all the default behaviors and let the user decide what to export.

[flaviendelangle]

Screencast.2021-07-29.11.52.49.mp4

The current behavior with the fix

@mindtraveller is it what you expected ?

[mindtraveller]

@flaviendelangle seems like it is. Just ensure that it's available in type definitions of API

[flaviendelangle]

It does not appear in the type definitions of the API since it's the default behavior, not something you can enable / disable through an option.

I'll add a description in the docs though

[georgesglynn]

@flaviendelangle @oliviertassinari Hey y'all! I ran into an issue for my customers where if they have one row selected and they choose to export to csv, only that one selected row is exported instead of all rows on the screen.

I see @flaviendelangle mentioned this functionality is not something you can enable/disable. Is there anyway of hacking this so that the CSV export always ignores the selected rows?

The only way I was able to get it to work this way was by physically editing the "selectedRowIds" variable in the compiled code in my node_modules folder to always point to an empty list rather than the actual selected rows. Obviously this is not a long term solution as our node_modules folder is built dynamically when deploying.

I am currently using [email protected].

[flaviendelangle]

There is currently no option to export all rows like there is for allColumns.
You could provide a custom Toolbar and copy / paste all the CSV logic but it will be heavy.

We can easily add the ability to pick the rows to export, but it will only available in v5, v4 is to outdated for feature improvements now 👍

[toinhao1]

I don't see the option to disable or enable the exporting of selected rows or all rows in the docs.

Was this implemented in V5?

I only see that I would have to get all of the rows and then pass them to the exporter if I want to accomplish this.

[flaviendelangle]

You have a doc section explaining how to customize the rows to export.
Based on it you should be able to decide exactly what to export.

For instance if you want to export all the filtered rows even if there is selected rows, you can do getRowsToExport = () => gridFilteredSortedRowIdsSelector(apiRef)

[toinhao1]

Exactly, so this is the only way?

It seems like a flag of onlySelected?: boolean would make this much simpler.

I want to always export all rows.

[flaviendelangle]

That's your specific use case
But some want to export the current page, other want to export the selected rows, other the un-filtered rows, other the un-sorted rows etc...
We could have to add lots of flags.
In the end a single api seems much simpler to me.

For your use case for instance.
Do you want to export all the rows or just the filtered rows ?
Because if you really want all the rows like you say, onlySelected: false would not have this behavior.

[toinhao1]

I'll use your previous suggestion. I appreciate the prompt response. Thanks.

[ghost]

@flaviendelangle @oliviertassinari Hey y'all! I ran into an issue for my customers where if they have one row selected and they choose to export to csv, only that one selected row is exported instead of all rows on the screen.

I see @flaviendelangle mentioned this functionality is not something you can enable/disable. Is there anyway of hacking this so that the CSV export always ignores the selected rows?

The only way I was able to get it to work this way was by physically editing the "selectedRowIds" variable in the compiled code in my node_modules folder to always point to an empty list rather than the actual selected rows. Obviously this is not a long term solution as our node_modules folder is built dynamically when deploying.

I am currently using [email protected].

have you find out the solution for this ?

[romgrk]

See #10084