Skip to content

Data Grid - Export

Easily export the rows in various file formats such as CSV, Excel, or PDF.

CSV export

The easiest way to enable the CSV export is to pass the GridToolbar component in the Toolbar component slot.

<DataGrid {...data} loading={loading} components={{ Toolbar: GridToolbar }} />

Custom toolbar

To enable the CSV export in a custom toolbar, use the GridToolbarExport component.

<DataGrid
  {...data}
  loading={loading}
  components={{
    Toolbar: CustomToolbar,
  }}
/>

Custom exported content

The csv export can be customized by passing a csvOptions object either to the GridToolbar or to the GridToolbarExport as a prop.

The following sections describes some customizations available on this interface.

<DataGrid componentsProps={{ toolbar: { csvOptions } }} />

// same as

<GridToolbarExport csvOptions={csvOptions} />

Exported columns

By default, the CSV will only contain the visible columns of the grid. There are a few ways to include or hide other columns:

  1. Set the exact columns to be exported in csvOptions.
<DataGrid
  componentsProps={{ toolbar: { csvOptions: { fields: ['id', 'name'] } } }}
/>
  1. Set allColumns in csvOptions to true to include hidden columns, instead of only the visible ones.
<DataGrid componentsProps={{ toolbar: { csvOptions: { allColumns: true } } }} />
  1. Set the disableExport attribute to true in each GridColDef.
<DataGrid columns={[{ field: 'id', disableExport: true }, { field: 'brand' }]} />

Exported cells

When the value of a field is an object or a renderCell is provided, the CSV export might not display the value correctly. You can provide a valueFormatter with a string representation to be used.

<DataGrid
  columns={[
    {
      field: 'progress',
      valueFormatter: ({ value }) => `${value * 100}%`,
      renderCell: ({ value }) => <ProgressBar value={value} />,
    },
  ]}
/>

Remove the export button

You can remove the CSV export option from the toolbar by setting disableToolbarButton option to true.

<DataGrid
  componentsProps={{ toolbar: { csvOptions: { disableToolbarButton: true } } }}
/>

apiRef

โš ๏ธ Only use this API as the last option. Give preference to the props to control the grid.

Signature:
exportDataAsCsv: (options?: GridCsvExportOptions) => void
Signature:
getDataAsCsv: (options?: GridCsvExportOptions) => string

Print export

The DataGrid provides the ability to optimize the layout of the grid for print mode. It can also be used to export to PDF.

The easiest way to enable the Print export is to pass the GridToolbar component in the Toolbar component slot.

<DataGrid {...data} loading={loading} components={{ Toolbar: GridToolbar }} />

Custom toolbar

To enable the Print export in a custom toolbar, use the GridToolbarExport component.

<DataGrid
  {...data}
  loading={loading}
  components={{
    Toolbar: CustomToolbar,
  }}
/>

Custom exported content

The print export can be customized by passing a printOptions object either to the GridToolbar or to the GridToolbarExport as a prop.

The following sections describes some customizations available on this interface.

<DataGrid componentsProps={{ toolbar: { printOptions }}} />

// same as

<GridToolbarExport printOptions={printOptions} />

Exported columns

By default, the Print will only contain the visible columns of the grid. There are a few ways to include or hide other columns:

  1. Set the exact columns to be exported in printOptions.
<DataGrid
  componentsProps={{ toolbar: { printOptions: { fields: ['id', 'name'] } } }}
/>
  1. Set allColumns in printOptions to true to include hidden columns, instead of only the visible ones.
<DataGrid componentsProps={{ toolbar: { printOptions: { allColumns: true } } }} />
  1. Set the disableExport attribute to true in each GridColDef.
<DataGrid columns={[{ field: 'id', disableExport: true }, { field: 'brand' }]} />

Exported cells

When the value of a field is an object or a renderCell is provided, the Print export might not display the value correctly. You can provide a valueFormatter with a string representation to be used.

<DataGrid
  columns={[
    {
      field: 'progress',
      valueFormatter: ({ value }) => `${value * 100}%`,
      renderCell: ({ value }) => <ProgressBar value={value} />,
    },
  ]}
/>

Remove the export button

You can remove the Print export option from the toolbar by setting disableToolbarButton option to true.

<DataGrid
  componentsProps={{ toolbar: { printOptions: { disableToolbarButton: true } } }}
/>

apiRef

โš ๏ธ Only use this API as the last option. Give preference to the props to control the grid.

Signature:
exportDataAsPrint: (options?: GridPrintExportOptions) => void

๐Ÿšง Excel export

โš ๏ธ This feature isn't implemented yet. It's coming.

๐Ÿ‘ Upvote issue #198 if you want to see it land faster.

You will be able to export the displayed data to Excel with an API call, or using the grid UI.

๐Ÿšง Clipboard

โš ๏ธ This feature isn't implemented yet. It's coming.

๐Ÿ‘ Upvote issue #199 if you want to see it land faster.

You will be able to copy and paste items to and from the grid using the system clipboard.

API