CODEWITHSUNDEEP
javascriptreactjsmaterial-table
Vinayaka S P
Vinayaka S P

Reputation: 303

How to call defaultExportCsv() of ReactJS material-table from the overriden export function

I'm a beginner in reactjs. I'm handling material-table (material-table.com) which should be capable of download data with the custom filename with the current timestamp. This can be solved by assigning the desired filename to the property options.exportFileName in <MaterialTable>. However, this timestamp will contain time when the page rendered, but I need the timestamp when the export button was clicked.

I was thinking if I can achieve this by calling defaultExportCsv from the overridden export function after setting the file name like below:

function TableExport({model}) {
  const handleExportCsv = () => {
    options.exportFileName = 'filename_' + moment().format('YYYY-MM-DDTHHmmss');
    // calling defaultExportCsv here
  }

  return ( <
    MaterialTable columns = {
      [{
          title: 'ID',
          field: 'id'
        },
        {
          title: 'Name',
          field: 'name'
        },
      ]
    }
    data = {
      model
    }
    title = "Title"
    options = {
      {
        columnsButton: true,
        exportButton: true,
        actionsColumnIndex: -1,
        exportCsv: handleExportCsv,
      }
    }
    />
  );
}

I'm unable to call defaultExportCsv() from the handleExportCsv(), can somebody help me in this regard ?

Upvotes: 0

Views: 5367

Answers (1)

tmagdic
tmagdic

Reputation: 60

You can write your own exportCsv callback fn but then you are responsible for generating CSV data for exporting also.

Maybe you can find the following useful. For data exporting you can use the same library as in component MaterialTable. First, don't forget to install the library:

npm install --save filefy

And import library

const _filefy = require("filefy");

Inside functional component define fn for exporting data into CSV format:

  const exportCsv = (allColumns, allData) => {
    const columns = allColumns.filter(columnDef => columnDef["export"] !== false);
    const exportedData = allData.map(rowData => columns.map(columnDef => rowData[columnDef.field]));
    new _filefy.CsvBuilder('filename_' + moment().format('YYYY-MM-DDTHHmmss'))
      .setDelimeter(';')
      .setColumns(columns.map(columnDef => columnDef.title))
      .addRows(exportedData)
      .exportFile();
  }

Inside MaterialTable connect exportCsv

<MaterialTable
...
      options={
        {
...
          exportButton: true,
          exportCsv,
        }
      }

Upvotes: 2

Related Questions