Basic Export

Usage

info

You may use default export methods via the package @material-table/exporters. You will need to install this package if you would like to use the default export methods.

info

The exportAllData options will always export all the passed data, instead of the current shown rows.

// ...
import { ExportCsv, ExportPdf } from "@material-table/exporters";

<MaterialTable
  // ...
  options={{
    // ...
    exportAllData: true,
    exportMenu: [
      {
        label: "Export PDF",
        //// You can do whatever you wish in this function. We provide the
        //// raw table columns and table data for you to modify, if needed.
        // exportFunc: (cols, datas) => console.log({ cols, datas })
        exportFunc: (cols, datas) => ExportPdf(cols, datas, "myPdfFileName"),
      },
      {
        label: "Export CSV",
        exportFunc: (cols, datas) => ExportCsv(cols, datas, "myCsvFileName"),
      },
    ],
  }}
/>;

Live Demo

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor

function BasicExport() {
  return (
    <MaterialTable
      data={DEMO_DATA}
      columns={DEMO_COLS}
      options={{
        // ...
        exportAllData: true,
        exportMenu: [
          {
            label: "Export PDF",
            exportFunc: (cols, datas) =>
              ExportPdf(cols, datas, "myPdfFileName"),
          },
          {
            label: "Export CSV",
            exportFunc: (cols, datas) =>
              ExportCsv(cols, datas, "myCsvFileName"),
          },
        ],
      }}
    />
  );
}

Result

Loading...