What is the procedure to use React libraries and antd table to export data to Excel?

edit

Install Required Packages: Install the following packages using npm package manager:

npm install xlsx file-saver react-csv antd

These dependencies will help you to read, write and save Excel files, CSV files and Antd table.

Import Libraries:

import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import ReactCsv from 'react-csv';
import { Table, Button } from 'antd';

Create Data: Create your data source from where you want to export the data. For demonstration, let’s create a dummy data source.

const dataSource = [
 {
   key: '1',
   name: 'Mike',
   age: 32,
   address: '10 Downing Street',
 },
 {
   key: '2',
   name: 'John',
   age: 42,
   address: '20 Downing Street',
 },
 {
   key: '3',
   name: 'Jane',
   age: 28,
   address: '30 Downing Street',
 },
 {
   key: '4',
   name: 'Pete',
   age: 35,
   address: '40 Downing Street',
 },
];

Create Columns: Create columns to show in the table.

const columns = [
 {
   title: 'Name',
   dataIndex: 'name',
   key: 'name',
 },
 {
   title: 'Age',
   dataIndex: 'age',
   key: 'age',
 },
 {
   title: 'Address',
   dataIndex: 'address',
   key: 'address',
 },
];

Create Antd Table: Create a table using Ant Design library.

<Table dataSource={dataSource} columns={columns} />

Export Data to Excel: Create a function to export data to Excel.

const handleExportToExcel = () => {
 const worksheet = XLSX.utils.json_to_sheet(dataSource, { header: 1 });
 const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
 const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
 saveAs(new Blob([excelBuffer], { type: 'application/octet-stream' }), 'data.xlsx');
};

This function uses XLSX library to convert data source to worksheet and then to workbook. Finally, it calls the function saveAs of file-saver library to save the Excel file with data.xlsx name.

Export Data to CSV: Create a function to export data to CSV.

const handleExportToCSV = () => {
 const csvData = dataSource.map((item) => ({
   Name: item.name,
   Age: item.age,
   Address: item.address,
 }));
 const headers = [
   { label: 'Name', key: 'name' },
   { label: 'Age', key: 'age' },
   { label: 'Address', key: 'address' },
 ];
 const fileName = 'data.csv';
 return <ReactCsv data={csvData} headers={headers} filename={fileName} />;
};

This function uses react-csv library to convert data source to CSV format and then it creates a component using ReactCsv library which will download CSV file on button click.

Render the Export Buttons: Render two buttons, one for Excel and one for CSV

<div>
 <Button type="primary" onClick={handleExportToExcel}>Export to Excel</Button>
 <Button type="primary" onClick={handleExportToCSV}>Export to CSV</Button>
</div>

Run the Code: Start your app using npm start command and you will see a table with two buttons to export data to Excel and CSV format.