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.

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} />,
    },
  ]}
/>

apiRef

You can export data using the imperative API available in DataGridPro:

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.

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} />,
    },
  ]}
/>

apiRef

You can export data using the imperative API available in DataGridPro:

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