How to export our DataGrid as CSV in ReactJS ?

Last Updated : 17 Nov, 2023

GridToolbarExport Component allows the user to access the displayed data and export the DataGrid to CSV in React JS, with an extra API call. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to export our DataGrid as CSV in React JS.

Prerequisites:

Approach:

Follow these simple steps in order to export our DataGrid as CSV in ReactJS. We have used the GridToolbarExport Component from the data-grid module which provides the functionality of allowing users to download the data of DataGrid in the CSV format. We have to wrap this component around its container called GridToolbarContainer. Then, we passed these values to the main DataGrid Component using the components attribute as shown in the below example.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui module using the following command:

npm i @material-ui/data-grid

Project Structure:

Project Structure

The updated dependencies in package.json file

"dependencies": {
        "@material-ui/data-grid": "^4.0.0-alpha.37",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
},

Example: This example uses GridToolbarExport from Material UI to export the DataGrid to csv.

Javascript

//  Filename - App.js
 
import * as React from "react";
import {
    DataGrid,
    GridToolbarExport,
    GridToolbarContainer,
} from "@material-ui/data-grid";
 
const columns = [
    { field: "id", headerName: "ID", width: 170 },
    { field: "name", headerName: "NAME", width: 170 },
    { field: "age", headerName: "AGE", width: 170 },
];
 
const rows = [
    { id: 1, name: "Gourav", age: 12 },
    { id: 2, name: "Geek", age: 43 },
    { id: 3, name: "Pranav", age: 41 },
    { id: 4, name: "Abhay", age: 34 },
    { id: 5, name: "Pranav", age: 73 },
    { id: 6, name: "Disha", age: 61 },
    { id: 7, name: "Raghav", age: 72 },
    { id: 8, name: "Amit", age: 24 },
    { id: 9, name: "Anuj", age: 48 },
];
 
function MyExportButton() {
    return (
        <GridToolbarContainer>
            <GridToolbarExport />
        </GridToolbarContainer>
    );
}
 
export default function App() {
    return (
        <div style={{ height: 500, width: "80%" }}>
            <h4>
                How to use export our DataGrid as CSV in
                ReactJS?
            </h4>
            <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                components={{
                    Toolbar: MyExportButton,
                }}
            />
        </div>
    );
}