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

How to use vaadin-grid with CSV file from different sources

By  
Binh Bui
Binh Bui
·
On Jul 16, 2018 6:00:00 AM
·

Two weeks ago, we introduced papa-parse in the blog Papa-parse, the powerful web component for in-browser CSV parsing. As explained in the article, papa-parse is able to manipulate your CSV files in many ways.

In this tutorial, we will show how you can use papa-parse to import the pokemon sheets CSV, then convert it to JSON standard, and finally display that data in vaadin-grid.

Estimated completion time: 20-30 minutes

Tutorial structure:

Step 1: Set up

In this step you will:

  • Install Bower and Polymer CLI

  • Create the working environment

  • Install the dependencies

  • Import the dependencies

Install Bower and Polymer CLI

You can install those two packages with npm. Please note that for the installations to complete, it also requires some prerequisite packages. For best guidance, follow the Polymer CLI install guide and Bower install guide.

Create the working environment

Create a new directory called papa-loves-grid and open that folder:

    mkdir papa-loves-grid && cd papa-loves-grid
    

Then, run this command to create a bower.json file, you can use the default values for all fields:

    bower init
    

Create index.html in the root folder with this following command:

    touch index.html
    

Now your top-level project folder should look like this:

    papa-loves-grids
    ├─bower.json
    └─index.html
    

Install the dependencies

To install the dependencies, run these commands. The --save and --save-dev flag will make sure bower.json is updated

    bower install --save vaadin-grid
    bower install --save PolymerVis/papa-parse
    bower install --save-dev vaadin-text-area
    

You will see an extra folder named bower_components/created, which is the storage of the project dependencies.

Now your bower.json dependencies should look like this:

    "dependencies": {
      "papa-parse": "PolymerVis/papa-parse#^2.0.1",
      "vaadin-grid": "^5.0.4"
    },
    "devDependencies": {
      "vaadin-text-field": "^2.0.1"
    }
    

Import the dependencies

Use your favorite editor to open index.html. Then, write these lines in the beginning of the file:

 

These lines will import all the needed components for this project, as well as load the polyfill, in case your browser does not support web components natively.

Step 2: Create a grid

For all of the cases, we will be using the same grid structure, which consists of 6 columns (id, Name, Type 1, Type 2, Generation & Legendary). Hence, we add the grid first, then the next step will be getting the CSV from different locations.

In this step you will:

  • Add a dom-bind template

  • Create a grid with the index column

  • Fill the table

Add a dom-bind template

Dom-bind tag enables Polymer’s binding features, and is only available to templates that are managed by Polymer. Since we want to get the data from one component to another, we need to add the dom-bind template:

    <dom-bind>
      <template>
      </template>
    </dom-bind>
    

Create a grid with columns

We create a grid with one index column:

    <dom-bind>
      <template>

        <!-- CODE FROM STEP 3 WILL BE INSERTED HERE -->

        <vaadin-grid aria-label="Pokemon Tables" items="[[pokemons]]">

          <vaadin-grid-column flex-grow="0">
            <template class="header">#</template>
            <template>[[index]]</template>
          </vaadin-grid-column>

        </vaadin-grid>

      </template>
    </dom-bind>
    

You can see that vaadin-grid has an attribute item with the value pokemons. This is the parsed data that we will get from papa-parse.

The flex-grow attribute indicates that this column will not grow more than the originally allocated width. Inside vaadin-grid-column, we see two pairs of template tags. The first one is to declare which part it is (header, row-detail or footer) and its name. The latter is to set the data for that specific column. In this case, index is one of vaadin-grid built-in template variables, which will return the row index.

Fill the table

We are going to fill the rest of the table with more pokemon information. Add these columns after the index column:

    <vaadin-grid-column>
      <template class="header">Name</template>
      <template>[[item.Name]]</template>
    </vaadin-grid-column>

    <vaadin-grid-column>
      <template class="header">Type 1</template>
      <template>[[item.Type1]]</template>
    </vaadin-grid-column>

    <vaadin-grid-column>
      <template class="header">Type 2</template>
      <template>[[item.Type2]]</template>
    </vaadin-grid-column>

    <vaadin-grid-column>
      <template class="header">Generation</template>
      <template>[[item.Generation]]</template>
    </vaadin-grid-column>

    <vaadin-grid-column>
      <template class="header">Legendary</template>
      <template>[[item.Legendary]]</template>
    </vaadin-grid-column>
    

item.<xyz> is how we can access the object from the parsed array, pokemons.

Step 3: Fetch CSV and convert it to JSON

In this step, you will:

  • Learn to import a CSV file with papa-parse from different sources:

    • Remote source

    • Local storage

    • Raw CSV string

  • Run the live demo

Remote source

Copy and paste this code before vaadin-grid:

    <papa-parse auto header url="https://rawgit.com/binhbbbb/61616a996afecd6a329bb09db3dbf249/raw/598abf64651b56e40b13219f8dbf08efd541aeee/poke-sheet.csv" rows=""></papa-parse>
    

Let's look at the attributes:

  • auto : automatically parse the CSV whenever input is updated

  • header : output an array of objects, each with keys and value instead of an array of row data. It is extremely important to turn on this flag, otherwise the output data will not be compatible.

  • url : the URL of the CSV source

  • rows : the output array

Note: auto, header and rows will be used for every case.

Run the live demo

To check the result, we need to run a local web server with this following command:

    polymer serve
    

The windows will show something like this:

    Files in this directory are available under the following URLs
        applications: http://127.0.0.1:8081
        reusable components: http://127.0.0.1:8081/components/papa-loves-grid/
    

Go to your browser and enter the reusable components link: http://127.0.0.1:8081/components/papa-loves-grid/. Note that the application link won’t work since we have used relative imports for the dependencies.

The result:

Local storage

In order to use the local storage, we need to create an input for getting local files. First, let's add the input and papa-parse. Replace the previous one with the following code:

    <input id="selectfile" type="file"></input>
    <papa-parse id="papaparse" auto header file="[[file]]" rows=""></papa-parse>
    

Then, add this script so that papa-parse knows when you upload a file:

 

The result:

Raw CSV string

Most of the time you will be working with a thousand line CSV file so parsing raw CSV is not that frequently seen. Nonetheless, papa-parse supports importing raw data. We will use vaadin-text-area for a string input:

    <vaadin-text-area label="Input" placeholder="Put your CSV here" value=></vaadin-text-area>
    <papa-parse id="papaparse" auto header raw="[[rawCSV]]" rows=""></papa-parse>
    

Some stylings for vaadin-text-area, put these after the imports:

    <style>
      vaadin-text-area {
        height: 200px;
        width: 600px;
      }
    </style>
    

The result:

Final words

With this tutorial, we hope that you master using papa-parse to integrate CSV with vaadin-grid in your next project. If you were able to complete this tutorial, well done! If not, feel free to ask any question below.

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