Read CSV file in React

Today we’ll show you how to upload and read CSV file in React. Basically, we’ll show you an example to upload or Import CSV file and read the data of the CSV file using ReactJS.

In this demo example, we will have two HTML elements such as file upload and table. The file upload will be used to select the CSV file from the system and parse data in JSON format whereas the table will be used to display the CSV data from the file.

Steps to read CSV file in React

  1. Create react application
  2. Install npm dependencies
  3. Create a page to upload CSV file and display data
  4. Add logic to read CSV file
  5. Output

1. Create react application

First of all, we have to create a startup react application using the create-react-app. Run the following command to create a react application.

2. Install npm dependencies

In the second step, we will install the required dependencies such as xlsx and react-data-table-component.

Run the following command to install the SheetJS js-xlsx npm package.

In this example, we will also use the React Datatable to display uploaded CSV records in the table view. Run the following command to install the react-data-table-component.

3. Create a page to upload CSV file and display data

Let’s create a simple page where we will add the file input element to upload the CSV file and the react datatable to display the data.

4. Add logic to read CSV file

Let’s try to add the logic to read the CSV file. Therefore we will import the xlsx npm package on top of the page. Also, we have to add two methods to convert CSV data to JSON format.

5. Output

Let’s combine all the code together and see how it looks.

App.js

Run the project and check the output in the browser. You can download the sample CSV file from here.

Output - Read CSV file in React - Clue Mediator
Output – Read CSV file in React – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

18 Responses

  1. Sayli says:

    Hi,

    Can you please show how to implement datatable with csv file instead of json file

    • Clue Mediator says:

      Hi Sayli,
      The current article will help you to read the CSV file and display the data on the screen. But as per your requirement, you have to implement file upload functionality and then try to read the data in the back-end for insertion.

      We have similar functionality in react to upload files where we are uploading the image but you can refer the following article for file upload and you have to perform the rest of the functionalities in the backend.

      Image upload in ReactJS

      Hope this will help you!

  2. Andres says:

    Try a 450k record file and it crashes

    • Clue Mediator says:

      Yes Andres, You can not manage so many records at the client-side. You have to split the sheet before doing the process or manage the whole functionality at the backend side.

  3. pedro says:

    Hi
    Great article, thanks!!
    I want implement a upload file feature as well (probably using a dropzone) and having it rendered as a list, so this will help me. I’ll handle all logic at the server-side bc i want the application to allow upload and parsing of different file types, so i think it’s best to do all this at the backend.
    I think i will need to: 1) Make http post request, sending the uploaded file from client to server 2) handle file type validation and parsing 3) Make http get request to fetch parsed data from server to client, and have it rendered there
    Would you suggest other wise?
    thanks

  4. Dimce Spirovski says:

    I can`t install xlsx, getting the following message:
    npm WARN [email protected].6 requires a peer of react@>= ^16.8.0 but none is installed. You must install peer dependencies yourself.
    npm WARN [email protected].1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

  5. xiongzhong li says:

    Great article! I have another question is that, what about I want to access the path of the file I chose right now? How can I access it?

  6. tomo says:

    Hi, Thank you for this blog!!

    I was wondering what
    ———
    const dataStringLines = dataString.split(/\r\n|\n/);
    const headers = dataStringLines[0].split(/,(?![^”]*”(?:(?:[^”]*”){2})*[^”]*$)/);
    ———
    this part does?

    I know it’s regular expression. But did’t know why it needed to be ”/\r\n|\n/” and ”/,(?![^”]*”(?:(?:[^”]*”){2})*[^”]*$)/”

    Thank you!

    • Clue Mediator says:

      Hi Tomo,
      The first line const dataStringLines = dataString.split(/\r\n|\n/); is used to get the list of rows.
      The second line const headers = dataStringLines[0].split(/,(?![^”]*”(?:(?:[^”]*”){2})*[^”]*$)/); is used to get the list of the headers.

  7. Rahul Itkar says:

    To get the header const headers = dataStringLines[0].split(/,(?![^”]*”(?:(?:[^”]*”){2})*[^”]*$)/); this regular expression can not work if I give the space in header. If my header contais the 2 words the how to write the RE for that?

    • Clue Mediator says:

      Hi Rahul,
      Can you please compare your code with the given GitHub source code? You can see the output at the end of the article, where we have space in the header and it’s working fine.

  8. BVR says:

    How to display the particular required column data after uploading the .csv file?

  9. Suganthan says:

    const columns = headers.map(c => ({
    name: c,
    selector: c,
    }));

    could you please explain whats happening?

    • Clue Mediator says:

      It’s a same as this one.

      const columns = headers.map(c => {
      return {
      name: c,
      selector: c
      }
      });

      The above code will return a list of objects that have a name and a selector and we will read them from the headers.

      Hope this is clear now.

Leave a Reply

Your email address will not be published. Required fields are marked *