Как вызвать defaultExportCsv () из ReactJS таблицы материалов из переопределенной функции экспорта

Question

Я новичок в reactjs. Я работаю с таблицей материалов ( material-table.com ), которая должна иметь возможность загружать данные с пользовательским именем файла с текущей меткой времени. Это можно решить, назначив желаемое имя файла свойству options.exportFileName в <MaterialTable>. Однако эта временная метка будет содержать время отображения страницы, но мне нужна временная метка при нажатии кнопки экспорта.

Я думал, смогу ли я добиться этого, вызвав defaultExportCsv из переопределенной функции экспорта после установки имени файла, как показано ниже:

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,
      }
    }
    />
  );
}

Я не могу позвонить defaultExportCsv() из handleExportCsv(), кто-нибудь может мне помочь в этом отношении?

Answer 1

Вы можете написать свой собственный обратный вызов exportCsv fn, но затем вы отвечаете за создание CSV-данных для экспорта также.

Возможно, вы найдете следующее полезным. Для экспорта данных вы можете использовать ту же библиотеку, что и в компоненте MaterialTable. Во-первых, не забудьте установить библиотеку:

npm install --save filefy

и импортировать библиотеку

const _filefy = require("filefy");

Внутри функционального компонента определите fn для экспорта данных в формат CSV:

  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();
  }

Внутри MaterialTable подключите экспорт CSV

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