Skip to content
Edit this page

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 rows

By default, if some rows are selected, the DataGrid exports only those. If there's no selection, it exports all rows (filtered and sorted rows, if any rules are active), including the collapsed ones.

Alternatively, you can set the getRowsToExport function and export any rows you want, as in the following example. The grid exports a few selectors that can help you get the rows for the most common use-cases:

Selector Behavior
gridRowIdsSelector The rows in their original order.
gridSortedRowIdsSelector The rows after applying the sorting rules.
gridFilteredSortedRowIdsSelector The rows after applying the sorting rules and the filtering rules.
gridVisibleSortedRowIdsSelector The rows after applying the sorting rules, the filtering rules and without the collapsed rows.
gridPaginatedVisibleSortedGridRowIdsSelector The rows after applying the sorting rules, the filtering rules, without the collapsed rows and only for the current page (Note: If the pagination is disabled, it will still take the value of page and pageSize).

When using Row grouping, it can be useful to remove the groups from the CSV export

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