Adjusting CSV with DataTables and PapaParse

Photo by Mika Baumeister on Unsplash


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


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


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.


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.

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

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).



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