Data Grid - Export

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

CSV export

The DataGrid allows the data to be exported to CSV by composing a toolbar with the GridToolbarExport component. Use the components prop to assign the custom toolbar.

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

Customize exported columns

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

1. Define the exact columns to be exported with the fields attribute in the csvOptions prop of GridToolbarExport.

<GridToolbarExport csvOptions={{ fields: ['id', 'name'] }} />

Set allColumns in csvOptions to true to include hidden columns, instead of only the visible ones.

<GridToolbarExport csvOptions={{ allColumns: true }} />

2. Set the disableExport attribute to true in each GridColDef.

<DataGrid columns={[{ field: 'id', disableExport: true }, { field: 'brand' }]} />

Export custom rendered 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.

<GridToolbarExport csvOptions={{ disableToolbarButton: true }} />

apiRef

⚠️ Only use this API as the last option. Give preference to the props to control the grid.

exportDataAsCsv: (options?: GridCsvExportOptions) => void

getDataAsCsv: (options?: GridCsvExportOptions) => string

Print

Optimization of the layout of the grid for print mode. It can also be used to export to PDF.

The DataGrid provides the ability to optimize the layout of the grid for print mode. It can also be used to export to PDF. You can print the grid by composing a toolbar with the GridToolbarExport component. Use the components prop to assign the custom toolbar.

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

Customize printed columns

By default, when printing the grid it will only contain the visible columns. There are two ways to include or hide other columns:

1. Define the exact columns to be exported with the fields attribute in the printOptions prop of GridToolbarExport.

<GridToolbarExport printOptions={{ fields: ['id', 'name'] }} />

Set allColumns in printOptions to true to include hidden columns, instead of only the visible ones.

<GridToolbarExport printOptions={{ allColumns: true }} />

2. Set the disableExport attribute to true in each GridColDef.

<DataGrid columns={[{ field: 'id', disableExport: true }, { field: 'brand' }]} />

Export custom rendered cells

When the value of a field is an object or a renderCell is provided, printing 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 print button

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

<GridToolbarExport printOptions={{ disableToolbarButton: true }} />

apiRef

⚠️ Only use this API as the last option. Give preference to the props to control the grid.

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

• DataGrid
• DataGridPro