Mui-datatables: Download CSV downloads all data instead of just current page data in server side mode

[ssword]

In server-side mode, download CSV will only download data that is available to render the current page. It is possible to use a different source for CSV creation so that we can provide full data in the CSV file.

Expected Behavior

Given an option to provide custom data while Creating CSV.

Current Behavior

Only use data that is queried for current page rendering.

Steps to Reproduce (for bugs)

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | "@material-ui/core": "^3.9.0" |
| MUI-datatables | "mui-datatables": "^2.0.0-beta-1" |
| React | "react": "^16.6.0" |
| browser | Chrome |
| etc | |

[gregnb]

hey @ssword what would you propose in terms of changes? Let's see some examples in terms of API changes

[ssword]

@gregnb, thanks for answering my issue. I have checked the code, perhaps we can add another option in downloadOptions called customCSVdata.
Then when serverside option is true, and customCSVdata is not null, we will replace data with customCSVdata.

javascript const options = { filter: false, search: false, count: rowCount, serverSide: true, downloadOptions: { filename: 'eventTable.csv', // new API change added here customCSVdata: fullServersideData, }, rowsPerPage: rowsPerPage, rowsPerPageOptions: [10, 20, 50], selectableRows: false, elevation: 0, }, };

I am not good at javascript, perhaps we need to make CSV creation process an asynchronous process, then the changes maybe big.

[Avd6977]

I think instead you could just add an option that skips the code that runs after options.onDownload. If the API (server-side) downloads a file, no need for the rest of that code to run and download another file. Otherwise, if you just want to pass the data through to the table, you could use onDownload.

[ronaiza-cardoso]

How can I download external CVS files?

[Avd6977]

You have to put that logic into the onDownload prop and return false so this download doesn't happen (or else you'll just get a blank file)

[thbl]

+1
Does any one have an example on how to download the csv server side, instead of just the first page in table ?
@ssword @gabrielliwerant @Avd6977 @gregnb

[patorjk]

@thbl - @Avd6977 is right, this is how I do it:

onDownload: (buildHead, buildBody, columns, data) => {
    props.download_from_server(); // this makes a REST call to the server and downloads the data
    return false;
}.

I used a library called downloadjs to download the results from my call. That library is a little old though, not sure if there are any newer solutions.

[thbl]

@patorjk okay so you just make mui-datatables return false onDownload, and handle REST & Download call else where ?

[patorjk]

Yes, inside of the onDownload option you invoke the code that will lead to the CSV being downloaded from your server. You return false to prevent the table from creating the CSV itself.

[thbl]

@patorjk got it thanks 👍

[carlin-q-scott]

I was in the process of implementing an onDownload function that requests all the pages of my data from the server. I would then use the buildBody function to write it to the export file. But this requires an async ajax call, and onDownload is synchronous. So we'd need onDownload to be asynchronous, or buildBody to accept a Promise.