0

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 ?

1 Answer 1

2

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,
        }
      }
1
  • Hey thanks for answering. Since I was just appending the current time-stamp to the file name before saving it as CSV, I wanted to make use of defaultExportCSV by having an external call. I knew what you have suggested but I felt it as code redundancy. Turns out that it's an issue in the Material Table, I have raised it in their repo here By the way, I have resolved it with your approach as of now. Thanks May 25, 2020 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.