Material-table: CSV: Export all data instead of current page

[fernandes]

hi @mbrn 👋

I'm trying to figure out, as the title says heheh, export all data to CSV instead of the current page, any tip on this?

I think a possible solution can add a prop to the public API that received a function that process all the data before the export, wdyt?

All the best

[mbrn]

Hi @fernandes ,

Why not:). I will consider this feature for next releases. If you want you can contribute of course.

[fernandes]

hi @mbrn

Yeah, sure, I was just realizing if it was already possible or not, so let's get inside

I've seen that the exportCsv function does the job, my idea is _hook_ here to process a custom function provided by props (I'm thinking on the signature if you have some idea please shout) or run this one

makes sense?

see you

[mbrn]

you can set a export funtions on options. Then call it if export function is not null, else it will call current codes.

[mbrn]

Like this:

exportCsv = () => {

if(this.props.exportCsv) {
this.props.exportCsv(this.props.columns, this.props.renderData)
}
else  {
    const columns = this.props.columns
      .filter(columnDef => {
        return !columnDef.hidden && columnDef.field && columnDef.export !== false; 
      });

    const data = this.props.renderData.map(rowData =>
      columns.map(columnDef => rowData[columnDef.field])
    );

    // eslint-disable-next-line no-unused-vars
    const builder = new CsvBuilder((this.props.exportFileName || this.props.title || 'data') + '.csv')
      .setDelimeter(this.props.exportDelimiter)
      .setColumns(columns.map(columnDef => columnDef.title))
      .addRows(data)
      .exportFile();

    this.setState({ exportButtonAnchorEl: null });
  }
}

[fernandes]

awesome! later today I'm give it a shot, thank you for your reply

[fernandes]

hi @mbrn , better late than never I'm working on this issue 😉

one question, on exportCsv function, it receives the renderData, that comes form DataManager, that is the data already paginated... so the custom export csv function is receiving only 5 itens

any suggestion on how to solve this? get the ordered / non paginated data from data manager and pass to the toolbar?

[fernandes]

I think I managed to get it working... PR in a few minutes

ps: is there no test suite? I couldn't figure out, so I'm adding no tests, is that correct?

[mbrn]

Hi @fernandes

Why do you need MTableToolbar as first parameter on exportCsv. Because i removed it in 1.27.2,

If it is important i can resolve it with another way.

[fernandes]

@mbrn because was the only way to close the tooltip

toolbar.setState({ exportButtonAnchorEl: null }); // this is the reason to pass the m-table-toolbar object

otherwise it stays open after the exporting

thank you!

[mbrn]

We may add a optional callback to export csv button for after jobs.

[fernandes]

Yeah, my only problem was to close the button heheh If this optional callback solves this problem, ✅

[fernandes]

@mbrn could you manage how to handle the close of the tooltip? I've looked in the source and couldn't find anything... maybe on solution could be encapsulate the export behavior and then call the setState

  exportCsv = async () => {
    if(this.props.exportCsv) {
      await this.props.exportCsv(this.props.columns, this.props.data);
    } else {
      await this.defaultExportCsv();
    }
    await this.setState({ exportButtonAnchorEl: null });
  }

I've seen no occurrences of async/await in the code, but you don't like this style, but at least I could give an example of the idea heheh

see you

[mbrn]

Hi @fernandes ,

I added setState after calling export function like this:

exportCsv = () => {
    if(this.props.exportCsv) {
      this.props.exportCsv(this.props.columns, this.props.data);
    } else {
      this.defaultExportCsv();
    }

    this.setState({ exportButtonAnchorEl: null });
  }

[fernandes]

you made it, awesome, thank you very much... 👏 😄

[mbrn]

This is published with 1.28.3

[fernandes]

thank you, my friend, such a pleasure to contribute to your project... keep going the awesome work! cheers!

[sshanzel]

I updated my version to latest but this thing still persists, should we reopen this issue?

My Options:
options={{ columnsButton: true, exportCsv: true, exportButton: true }}

[raph90]

Yes I'm afraid this doesn't seem to be sorted...unless we need to add an option?

[raph90]

I was wrong- anyone looking there's a boolean prop that does this

[sshanzel]

Which one?

[raph90]

exportAllData - goes in options, set it to true

[sshanzel]

Okay, thanks for the infoooo

[thelazydogsback]

Any chance we could have this accept a ()=>boolean as well as a boolean?
I'd like the user to be able to choose which they want - so I can use a freeAction to display "export displayed data" or "export all data".

Also it should be noted that the flag won't export all the data, just all the data that's in the table -- if there is a search filter applied, then it will not include the missing items. (This may be obvious, but just in case...)

The docs need to be updated to include this new option.
thanks

[e-hop]

i also need to export all is there any way?

[amavumkal]

i also need to export all is there any way?

set options prop.
options={ exportAllData: true }

[akshaykatariyaa]

Hey, How to export hidden field. I have set hidden as false and export as true. But still the field is not exported kindly help. @mbrn

[naimbouallagui]

Hey, How to export hidden field. I have set hidden as false and export as true. But still the field is not exported kindly help. @mbrn

@akshaykatariyaa you can use columnsButton: true as option to select which fields you want to export and it will work fine ( you need to set exportAllData: true, exportButton: true as options)
hope it helps :)