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
- Create react application
- Install npm dependencies
- Create a page to upload CSV file and display data
- Add logic to read CSV file
- 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.
npx create-react-app read-csv-file-react
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.
npm install xlsx
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`.
npm install react-data-table-component styled-components
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.
import React, { useState } from 'react';
import DataTable from 'react-data-table-component';
function App() {
const [columns, setColumns] = useState([]);
const [data, setData] = useState([]);
// handle file upload
const handleFileUpload = e => {
}
return (
<div>
<h3>Read CSV file in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
<input type="file" accept=".csv, .xlsx, .xls" onchange={handleFileUpload}>
<datatable pagination="" highlightonhover="" columns={columns} data={data}>
</datatable></div>
);
}
export default App;
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.
import * as XLSX from 'xlsx';
...
...
function App() {
...
...
// process CSV data
const processData = dataString => {
const dataStringLines = dataString.split(/\r\n|\n/);
const headers = dataStringLines[0].split(/,(?![^"]*"(?:(?:[^"]*"){2})*[^"]*$)/);
const list = [];
for (let i = 1; i < dataStringLines.length; i++) {
const row = dataStringLines[i].split(/,(?![^"]*"(?:(?:[^"]*"){2})*[^"]*$)/);
if (headers && row.length == headers.length) {
const obj = {};
for (let j = 0; j < headers.length; j++) {
let d = row[j];
if (d.length > 0) {
if (d[0] == '"')
d = d.substring(1, d.length - 1);
if (d[d.length - 1] == '"')
d = d.substring(d.length - 2, 1);
}
if (headers[j]) {
obj[headers[j]] = d;
}
}
// remove the blank rows
if (Object.values(obj).filter(x => x).length > 0) {
list.push(obj);
}
}
}
// prepare columns list from headers
const columns = headers.map(c => ({
name: c,
selector: c,
}));
setData(list);
setColumns(columns);
}
// handle file upload
const handleFileUpload = e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (evt) => {
/* Parse data */
const bstr = evt.target.result;
const wb = XLSX.read(bstr, { type: 'binary' });
/* Get first worksheet */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* Convert array of arrays */
const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
processData(data);
};
reader.readAsBinaryString(file);
}
return (
<div>
<h3>Read CSV file in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
...
...
</div>
);
}
export default App;
5. Output
Let’s combine all the code together and see how it looks.
App.js
import React, { useState } from 'react';
import * as XLSX from 'xlsx';
import DataTable from 'react-data-table-component';
function App() {
const [columns, setColumns] = useState([]);
const [data, setData] = useState([]);
// process CSV data
const processData = dataString => {
const dataStringLines = dataString.split(/\r\n|\n/);
const headers = dataStringLines[0].split(/,(?![^"]*"(?:(?:[^"]*"){2})*[^"]*$)/);
const list = [];
for (let i = 1; i < dataStringLines.length; i++) {
const row = dataStringLines[i].split(/,(?![^"]*"(?:(?:[^"]*"){2})*[^"]*$)/);
if (headers && row.length == headers.length) {
const obj = {};
for (let j = 0; j < headers.length; j++) {
let d = row[j];
if (d.length > 0) {
if (d[0] == '"')
d = d.substring(1, d.length - 1);
if (d[d.length - 1] == '"')
d = d.substring(d.length - 2, 1);
}
if (headers[j]) {
obj[headers[j]] = d;
}
}
// remove the blank rows
if (Object.values(obj).filter(x => x).length > 0) {
list.push(obj);
}
}
}
// prepare columns list from headers
const columns = headers.map(c => ({
name: c,
selector: c,
}));
setData(list);
setColumns(columns);
}
// handle file upload
const handleFileUpload = e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (evt) => {
/* Parse data */
const bstr = evt.target.result;
const wb = XLSX.read(bstr, { type: 'binary' });
/* Get first worksheet */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* Convert array of arrays */
const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
processData(data);
};
reader.readAsBinaryString(file);
}
return (
<div>
<h3>Read CSV file in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
<input type="file" accept=".csv, .xlsx, .xls" onchange={handleFileUpload}>
<datatable pagination="" highlightonhover="" columns={columns} data={data}>
</datatable></div>
);
}
export default App;
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
That’s it for today.
Thank you for reading. Happy Coding..!!