Data Grid - Export component

Let users export the Data Grid for Excel, CSV, or printing.

Basic usage

The demo below shows how to add export triggers to a custom toolbar.

Anatomy

import { ExportPrint, ExportCsv } from '@mui/x-data-grid';
import { ExportExcel } from '@mui/x-data-grid-premium';

<ExportPrint />
<ExportCsv />
<ExportExcel />

Export Print

<ExportPrint /> is a button that triggers a print export. It renders the baseButton slot.

Export CSV

<ExportCsv /> is a button that triggers a CSV export. It renders the baseButton slot.

Export Excel

<ExportExcel /> is a button that triggers an Excel export. It renders the baseButton slot.

Recipes

Below are some ways the Export components can be used.

The demo below shows how to display export options within a menu on the toolbar.

Customizing Excel export parameters

The demo below shows how to implement a custom export button that downloads the full dataset (beyond the current page) to an Excel spreadsheet, while preserving any sorting, filtering, or grouping parameters that the user has applied to the Grid. It uses the built-in exportDataAsExcel() method.

Custom elements

Use the render prop to replace default elements. See Components usage—Customization for more details, and Toolbar—Custom elements demo for an example of custom Export buttons.

Accessibility

ARIA

You must apply a text label or an aria-label attribute to the <ExportPrint />, <ExportCsv /> and <ExportExcel /> components.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.