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

apiRef

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

exportDataAsCsv: (options?: GridExportCsvOptions) => void

getDataAsCsv: (options?: GridExportCsvOptions) => string

🚧 Print

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #200 if you want to see it land faster.

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

🚧 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