How to customize default export option in material-table

Question

I am using material-table and I want to remove the default CSV & PDF export option.

I would like to have only an excel option.

How can I change the menu ?

Thank you

Verboten

means you remove export as pdf and rename text from export as csv to export as excel? – Boil

Yes. Eventually I want to export the table data in excel format. – Verboten

csv is excel format – Boil

Answer 1

Defining options on the MT component like this will allow you to show/hide each option:

  options={{
      // ..other options
      exportButton: {
        csv: true,
        pdf: false
      }
   }}

Also, you could use localization settings to rename the label of each option like this:

 localization={{
      toolbar: {
        exportCSVName: "Export some Excel format",
        exportPDFName: "Export as pdf!!"
      }
    }}

It looks like the official docs are a bit outdated, so I found the answer to what you were looking for on these threads in GitHub:

• exportButton
• localization

Working sandbox here. Good luck!

Royden

Perfect! I was also using old version which didn't have this option. Thank you – Verboten

Answer 2

For custom CSV and PDF, you should define options

 options={{
    exportButton: {
       csv: true,
       pdf: true,
    }
 }}

and for the handlers should be defined more options

 options={{
    exportButton: {
       csv: true,
       pdf: true,
    },
    exportCsv: (data, columns) => console.log(data, columns, '<== CSV'),
    exportPdf: (data, columns) => console.log(data, columns, '<== PDF'),
 }}

in the handler function for the CSV you can use filefy package

import { CsvBuilder } from 'filefy';

and for PDF you can use jspdf and jspdf-autotable packages

import jsPDF from 'jspdf';
import 'jspdf-autotable';

also handler examples

exportCsv: (data, columns) => {
  const columnTitles = columns
      .map(columnDef => columnDef.title);
  
  const csvData = data.map(rowData =>
        columns.map(columnDef => rowData[columnDef.field]),
      );

  const builder = new CsvBuilder(`data.csv`)
        .setColumns(columnTitles)
        .addRows(csvData)
        .exportFile();

  return builder;
}

exportPdf: (data, columns) => {
  const doc = new jsPDF();

  const columnTitles = columns
      .map(columnDef => columnDef.title);
  
  const pdfData = data.map(rowData =>
        columns.map(columnDef => rowData[columnDef.field]),
      );

  doc.autoTable({
     head: [columnTitles],
     body: pdfData,
  });

  doc.save(`data.pdf`);
}

Coriecorilla