GridToolbarExport Component allows the user to export the displayed data to CSV 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 ReactJS.
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. And then, we have passed these values to the main DataGrid Component using the components attribute as shown in the below example.
Creating 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 install @material-ui/data-grid
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
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> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://material-ui.com/components/data-grid/export/
