Adjusting CSV with DataTables and PapaParse

A quick way to manipulate CSV files using JavaScript.

few days ago, I was doing some data crunching on a web application for a client. I needed a fast, simple way to work with Comma-separated Values (CSV) files i.e. update, download and upload using the existing JavaScript libraries.

The libraries involved are DataTables and PapaParse. Both are open source libraries.

PapaParse

The powerful, in-browser CSV parser for big boys and girls.

DataTables

If you work as website developer / designer, chances are you’ve used DataTable. It’s one of the oldest, robust and well maintained jQuery JavaScript library for HTML table. Highly customisable, one of many reasons I prefer DataTable over similar libraries.

Possible Scenario — Tasks

Let’s say you need a component in your bootstrap web application where you can upload a CSV file and perform the below operation;

  • Filter out rows
  • Remove some columns

Workaround

First, we create an event listener to listen to file input change. Once a file is selected, it will be parsed to Array using PapaParse. Now that we have the conversion, it is passed to htmlTableGenerator function for processing.

Generate HTML Table

Get head and body values from the array and use it to generate the table. The first array is the header.

Initialise DataTable

DataTable configuration can be comprehensive depending on your needs. The library comes with loads of extensions and plugins. Two used for this example are Column visibility (colvis) and CSV export. There are several more, you can check them out here.

Demonstration

Now we have all we need to make above scenario tasks work. To select a CSV file and other steps, look below

Select and Load CSV File

We select a CSV file and load it into the above functions.

Image for post
Image for post

Filter and Remove

Next step is we choose the columns we want and filter out some row. For this sample we want to show below;

  • Columns: Title, Content Type, Short URL and Archive
  • Rows: Magazines
Image for post
Image for post

Download as CSV

Let’s download the above result as new CSV. You can also upload the new file into a server (that was not covered).

Image for post
Image for post

The sample demonstrated above was simplified so anyone with basic understanding of web application development can utilise it. The application of DataTables can be very extensive. It is also important to note that the sample CSV data used was 1100 rows. When using file with tens of thousands rows, this technique won’t be efficient.

You can find the complete source code in my GitHub account and if you’re interested in snippets… checkout GitHub gist;

Software engineer, runner, hiker, fitness enthusiast. https://namieluss.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store