Skip to main content

Export

The DataGrid supports export to CSV and Excel (XLS) via the exportHandlers prop. An Export action is added to the toolbar actions menu (three-dots). Clicking it opens a format selector where users can choose CSV or XLS and trigger the download.

Example Usage​

const apiRef = useGridApiRef();

const exportHandlers = [
  {
    type: 'csv',
    handler: () => apiRef.current?.exportDataAsCsv({ fileName })
  },
  {
    type: 'xls',
    handler: () => apiRef.current?.exportDataAsXlsx?.({ fileName })
  }
];

<DataGridDS
  apiRef={apiRef}
  columns={columns}
  rows={rows}
  checkboxSelection
  slotProps={{
    toolbar: {
      exportHandlers
    }
  }}
/>

How it works​

  • exportHandlers: Array of { type: 'csv' | 'xls', handler: () => void }. Each handler is called when the user selects that format and clicks export.
  • apiRef: Required for export. The DataGrid attaches exportDataAsCsv and exportDataAsXlsx to the apiRef (via attachExcelExportToApi).
  • Export action: Appears in the actions menu (three-dots) alongside other menu actions. Clicking it opens an AnchoredPopper with the ExportTypeSelector component.

Combined with menu actions​

You can combine exportHandlers with menuActions for a full toolbar:

slotProps={{
  toolbar: {
    exportHandlers,
    menuActions: [
      { key: 'modify', label: 'Modifier', onClick: () => {} },
      { key: 'delete', label: 'Supprimer', onClick: () => {} }
    ]
  }
}}

The Export action will appear first in the menu, followed by your custom actions.