How to export csv of mui table in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To export csv of mui table in React js, you can use mui table DataGrid with GridToolbar. It will provide the option to export your data into CSV.

Today, I am going to show you, how to export csv of mui table in react js.

Table of contents

• Install Material UI
• Import the required Material-UI components.
• Render the DataGrid component.

Let’s start with the first step.

Step 1: Install Material-UI

Install the following packages to use mui table in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

After installing mui material package, use the following command to install the data grid package:

npm install @mui/x-data-grid

npm install @mui/x-data-grid-generator

npm install @mui/x-data-grid-pro

Step 2: Import the required Material-UI components.

To export csv of mui table in React, first, you have to import the table. We have imported the @mui/x-data-grid and @mui/x-data-grid-generator components from the @mui/material library.

import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

Step 3: Render the DataGrid component.

The slots property specifies the components to render in the DataGrid. In this case, we are rendering the Grid Toolbar component to enable CSV export.

<div style={{ height: 300, width: '100%' }}>
    <DataGrid {...data} loading={loading} slots={{ toolbar: GridToolbar }} />
</div>

MUI material export csv of mui table example.

The below code is an example of a Material UI table. You have to import @mui material table. use to DataGrid component.

App.js

import * as React from 'react';
import { useDemoData } from '@mui/x-data-grid-generator';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';

export default function ExportDefaultToolbar() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 4,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid {...data} loading={loading} slots={{ toolbar: GridToolbar }} />
    </div>
  );
}

In the above code example, I have used the @mui/material component and exported csv of mui table.

Check the output of the above code example.

Here, we are provided code sandbox links for the above program export csv of mui table. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍