Saltar al contenido

馃帀 v5 is out! Head to the documentation to get started.

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 }} />
  1. 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:

Signature:
exportDataAsCsv: (options?: GridExportCsvOptions) => void
Signature:
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