Accessibility Now
Join our upcoming webinar about building accessible web applications! June 7, 2022.
Blog

Papa-parse, the powerful web component for in-browser CSV parsing

By  
Binh Bui
Binh Bui
·
On Jun 13, 2018 11:38:00 AM
·
Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.

Despite being older than the first personal computer, the CSV standard still kicks butt in the current day as one of the most used data storing formats, especially among the DBMS. It is easy to use, human-readable and is supported by most platforms. However, its ubiquitous presence could not simplify parsing CSV files in browsers.

Today, we will introduce the web component, papa-parse, which can handle your CSV files in browsers like a piece of cake.

*Image credit: papaparse.com

Papa-parse can read your file from anywhere

Papa-parse is a powerful and handy CSV parser Polymer 2 web component. It is capable of manipulating your CSV files in many ways.

First off, the input. This component can read your data from anywhere, via a URL, from a raw string or even from your local storage.

 

Next, processing the file. For the small ones, users do not need to do anything extra, but for big data, users can make use of streaming and the worker. A worker is a thread which will not block your web activities, and streaming will make sure your screen will not freeze.

 

The output will be an array of rows, where each row is an array of table data, and it will be returned if the header flag is not set. Otherwise, an array of objects will be the product, where each object is a map comprising of the column name and its corresponding value for the row (e.g., {col1: value1, col2: value2}). The latter format is close to a JSON file.

 

...

...

It can automatically detect your delimiter

By scanning the first few rows, papa-parse will get the right delimiter of your file, with the common ones being the comma, space or quote. And not just delimiter, comments can get detected as well with the attribute comments. You provide the character for recognizing a comment, for example: # or //.

Some more cool things we want to note is the ability to convert numerical and boolean data to their type via dynamic-typing, skipping empty lines via skip-empty-lines.

Convert back from JSON to CSV using papa-unparse

Within the package, papa-unparse is capable of converting JSON arrays or objects into CSV strings. You can modify how the output will look like by configuring the quote character, the newline character, delimiter.

 

Many times users need to save edited files locally. The library supports CSV direct download with just a function call from the element.

 

Samples

Streaming big file

Read from a local file

Mobile

Library

Working

Polymer^2.0.0

C,S,O,F,E

Final thoughts

With more native support for web components from browser vendors, users can achieve much more tasks with less installing and more doing. As a result, web components like papa-parse will be ten times more convenient and handy.

Click here for more awesome web components

Relevant articles:

Binh Bui
Binh Bui
Binh is a Growth Marketer involved with multiple domains ranging from running experiments, campaigns to doing product-led growth stuff. He likes using his brain and he likes random discussions. Out of work, you can see Binh in the Schrodinger gym. Follow Binh on Twitter @buibaobin
Other posts by Binh Bui