Export data to excel in React application

Tram Ho

We often export data from tables to excel tables in web applications. There are two ways to implement export functionality in React: one is to use any third party library and the other is to create your own component. In this post, we will see how to implement the export function to excel in React applications in both ways.

Here are the topics we will cover in this article:

  • Example Project
  • Prerequisites
  • Implement the export function
  • Export function with third party or NPM lib
  • In brief
  • Conclude

1. Example project

This is a simple application with table data and output buttons in the top right corner. When you click the button, data from the table is downloaded in an excel table. You can import projects from here and run directly.

2. Prerequisite

There are several prerequisites for this tutorial. You need to create a React project with the create-react-app and need to install npm xslx packages, bootstrapand file-saver.

You need to add stylesheets from the React Bootstrap library in index.html .

Create a title for the Header

Create the Customers table

Let’s create a Customer table component. This is a presentation component which takes the customers array as props and renders as tables.

Transfer data from the App component

We should move the data shown in the table from the App component as shown below and we also need to enter the Customers and Header components to use the data in the render function.

Your application will look like this.

3. Execute the Export function

Let’s create a component called ExportCSVwhich that takes the data as props and takes care of the rest of the export function. This is the component with the exportToCSV method to handle all the Excel download functions with xlxs and file-saver.

This component is a presentation component that takes data to download and file names as props. The exportToCSV method is called when the export button is clicked.

You need to enter this component in the App component.

The following screen is the final screen after we add all the above functions and get ready to work !!

4. Export function with a third party or NPM lib

Reac-csv is the third-party library we can use. All we need to do is pass the data and fileName and this library will take care of the rest for us.

We need to install Reac-csv first and then import it in the ExportCSV component.

Import CSVLink from react-csv and transfer the required data and file name to the link as shown below.

In the App component, all you need to do is enter ExportReactCSV instead of ExportCSV .

5. Summary

  • We need xsls and file-saver libs to perform export functionality in React.
  • There are several ways you can implement your export logic in React: one is to use your own logic, the other is to use any third party lib.
  • Implement the export logic with a separate component for reuse and can also be imported into any component to use it.

6. Conclusion section

There are some third party libs or npm to use right away. But, sometimes we have to create separate components for export functionality to be more flexible and for other purposes such as security reasons. Thank you for watching. In the article there is a reference at https://blog.bitsrc.io/exporting-data-to-excel-with-react-6943d7775a92

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo