Data Grid - Export

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

Enabling export

Default Toolbar

To enable the export menu, pass the GridToolbar component in the Toolbar component slot.

Custom Toolbar

The export menu is provided in a stand-alone component named GridToolbarExport. You can use it in a custom toolbar component as follows.

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarExport />
    </GridToolbarContainer>
  );
}

Export options

By default, the export menu displays all the available export formats, according to your license, which are

• Print
• CSV
• Excel
• Clipboard (🚧 Not delivered yet)

You can customize their respective behavior by passing an options object either to the GridToolbar or to the GridToolbarExport as a prop.

<DataGrid componentsProps={{ toolbar: { csvOptions } }} />
// same as
<GridToolbarExport csvOptions={csvOptions} />

Each export option has its own API page:

• csvOptions
• printOptions

Disabled format

You can remove an export format from the toolbar by setting its option property disableToolbarButton to true. In the following example, the print export is disabled.

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

Exported columns

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

• Set the disableExport attribute to true in GridColDef for columns you don't want to be exported.

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

• Set allColumns in export option to true to also include hidden columns. Those with disableExport=true will not be exported.

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

• Set the exact columns to be exported in the export option. Setting fields overrides the other properties. Such that the exported columns are exactly those in fields in the same order.

<DataGrid
  componentsProps={{ toolbar: { csvOptions: { fields: ['name', 'brand'] } } }}
/>

Exported rows

⚠️ This section only applies to the CSV and the Excel export. The print export always prints rows in their current state.

By default, the grid exports the selected rows if there are any. If not, it exports all rows (filtered and sorted rows, according to active rules), 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:

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

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

File encoding

You can use csvOptions to specify the format of the export, such as the delimiter character used to separate fields, the fileName, or utf8WithBom to prefix the exported file with UTF-8 Byte Order Mark (BOM). For more details on these options, please visit the csvOptions api page.

<GridToolbarExport
  csvOptions={{
    fileName: 'customerDataBase',
    delimiter: ';',
    utf8WithBom: true,
  }}
/>

Print export

Modify the grid style

By default, the printed grid is equivalent to printing a page containing only the grid. To modify the styles used for printing, such as colors, you can either use the @media print media query or the pageStyle property of printOptions.

For example, if the grid is in dark mode, the text color will be inappropriate for printing (too light).

With media query, you have to start your sx object with @media print key, such that all the style inside are only applied when printing.

<DataGrid
  sx={{
    "@media print": {
      ".MuiDataGrid-main": { color: 'rgba(0, 0, 0, 0.87)' }
    }
  }}
  {/* ... */}
/>

With pageStyle option, you can override the main content color with a more specific selector.

<DataGrid
  componentsProps={{
    GridToolbar: {
      printOptions:{
        pageStyle: '.MuiDataGrid-root .MuiDataGrid-main { color: rgba(0, 0, 0, 0.87); }',
      }
    }
  }}
  {/* ... */}
/>

Customize grid display

By default, the print export display all the DataGrid. It is possible to remove the footer and the toolbar by setting respectively hideFooter and hideToolbar to true.

<GridToolbarExport
  printOptions={{
    hideFooter: true,
    hideToolbar: true,
  }}
/>

For more option to customize the print export, please visit the printOptions api page.

⚠️ Due to the fact that the Print export relies on the usage of an iframe, there is a limitation around the usage of X-Frame-Options.

In order for the Print export to work as expected set X-Frame-Options: SAMEORIGIN.

Custom export format

You can add custom export formats by creating your own export menu. To simplify its creation, we export <GridToolbarExportContainer /> which contains the menu logic. The default <GridToolbarExport /> is defined as follow:

const GridToolbarExport = ({ csvOptions, printOptions, ...other }) => (
  <GridToolbarExportContainer {...other}>
    <GridCsvExportMenuItem options={csvOptions} />
    <GridPrintExportMenuItem options={printOptions} />
  </GridToolbarExportContainer>
);

Each child of the <GridToolbarExportContainer /> receives a prop hideMenu to close the export menu after the export. The demo below shows how to add a JSON export.

Excel export

This feature relies on exceljs. To install it:

 // with npm
 npm install exceljs

 // with yarn
 yarn add exceljs

The Excel export allows translating columns' type and tree structure of a DataGrid to an Excel file.

Columns with types 'boolean', 'number', 'singleSelect', 'date', and 'dateTime' are exported in their corresponding type in Excel. Please ensure the rows values have the correct type, you can always convert them as needed.

Customization

Customizing the columns

You can use the property columnsStyles to customize the column style. This property accepts an object in which keys are the column field and values an exceljs style object.

This can be used to specify value formatting or to add some colors.

<GridToolbarExport
  excelOptions={{
    columnsStyles: {
      // replace the dd.mm.yyyy default date format
      recruitmentDay: { numFmt: 'dd/mm/yyyy' },
      // set this column in green
      incomes: { font: { argb: 'FF00FF00' } },
    },
  }}
/>

Customizing the document

You can customize the document using two callback functions:

• exceljsPreProcess called before adding the rows' dataset.
• exceljsPostProcess called after the dataset has been exported to the document.

Both functions receive { workbook, worksheet } as input. They are exceljs objects and allow you to directly manipulate the Excel file.

Thanks to these two methods, you can modify the metadata of the exported spreadsheet. You can also use it to add custom content on top or bottom of the worksheet, as follows:

function exceljsPreProcess({ workbook, worksheet }) {
  workbook.created = new Date(); // Add metadata
  worksheet.name = 'Monthly Results'; // Modify worksheet name

  // Write on first line the date of creation
  worksheet.getCell('A1').value = `Values from the`;
  worksheet.getCell('A2').value = new Date();
}

function exceljsPostProcess({ worksheet }) {
  // Add a text after the data
  worksheet.addRow(); // Add empty row

  const newRow = worksheet.addRow();
  newRow.getCell(1).value = 'Those data are for internal use only';
}

// ...

<GridToolbarExport
  excelOptions={{
    exceljsPreProcess,
    exceljsPostProcess,
  }}
/>;

Since exceljsPreProcess is applied before adding the content of the grid, you can use it to add some informative rows on top of the document. The content of the grid will start on the next row after those added by exceljsPreProcess.

To customize the rows after the grid content, you should use exceljsPostProcess. As it is applied after adding the content, you can also use it to access the generated cells.

In the following demo, both methods are used to set a custom header and a custom footer.

🚧 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.

apiRef

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

CSV

Print

Excel

API

• csvOptions
• printOptions
• excelOptions
• DataGrid
• DataGridPro