How to Build a Vue Data Grid in Minutes

Data Grids in Vue

Data grids have been one of the most common visual software elements since the advent of UIs themselves. With automatic conveniences like sorting and autocomplete, and advanced features like custom formulas, Microsoft Excel would be the natural choice for most users. Users choose Excel because it is familiar. Although Excel has become the most common example of software using a data grid, the paradigm has proliferated throughout the software field.

As web apps continue to replace the traditional native applications we're used to, it only makes sense that data grids would make their way to web app UIs as well. Plenty of JavaScript data grids exist in the market: open source, third-party, and homegrown. Which to choose?

In another post, we discuss what makes data grids so useful as UI elements and how to build a React datagrid in minutes. You can see the FlexGrid in action and learn more about it using our Learn Wijmo application. You can get your copy from NPM, from our CDN, or you can download it from our site.

Let's put FlexGrid to work, building a customizable Vue data grid in minutes.

We'll use the following application to demonstrate how to use the FlexGrid with Vue, Evan You's JavaScript framework:

https://stackblitz.com/edit/vue-ugm2h7

We used stackblitz to create the sample so it is easy to maintain and share.

Let's get started!

Create the Vue App

To create your own copy of the app, follow these steps:

1. Open the stackblitz Vue starter project. (Stackblitz does not yet have built-in support for creating new Vue apps like they do for Angular and React, but they are working on it).
2. Add Wijmo to the project by typing "wijmo" into the dependencies list:

Import the required modules

To import the modules we need, edit the index.js file as follows:

// index.js
import Vue from 'vue';

import { CollectionView } from 'wijmo/wijmo';
import 'wijmo/wijmo.vue2.grid';
import 'wijmo/wijmo.vue2.grid.filter';

These statements import the CollectionView class, which will provide data for the app, and the FlexGrid and FlexGridFilter classes, which will be used to display the data.

Add a Data Source to Your Grid

To add the data source, edit the index.js file as follows:

// index.js
new Vue({
  el: '#app',
  data: function() {

    // create CollectionView
    let view = new CollectionView([], {
      groupDescriptions: ['make']
    });

    // load it asynchronously
    fetch('https://api.myjson.com/bins/cqvk8')
      .then(result => result.json())
      .then(data => {
        view.sourceCollection = data;
      });

    // done
    return {
      data: view
    }
  }
}); 

This creates the Vue component that will take over the "#app" element. The component's "data" function creates a CollectionView and loads it asynchronously using a fetch. The CollectionView is returned as the "data" member of the component's state.

Show the data

The index.html file defines the application UI. It starts with a style element that imports the Wijmo styles and defines the grid size and application font:

<!-- index.html -->
<style>
@import "../node_modules/wijmo/styles/themes/wijmo.theme.material.css";
body {
  font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;
}
</style>

After the style element, the file defines the app header and summary section, followed by the grid:

<!-- index.html -->  
<div id="app">  
  <h1>  
    2019 Sedans (Vue)  
  </h1>  
  <p>  
    Sort by model … </p>  
  <p>  
    Showing  
    <b>\{{data.items ? data.items.length : 0}}</b> models from  
    <b>\{{data.groups ? data.groups.length : 0}}</b> makes.</p>  
  </p>  
  <wj-flex-grid  
    allow-resizing="None"  
    :show-alternating-rows="false"  
    :is-read-only="true"  
    selection-mode="ListBox"  
    headers-visibility="Column"  
    :items-source="data">  

    <wj-flex-grid-column  
      binding="make" header="Make" :visible="false" width="*">  
    </wj-flex-grid-column>  
    <wj-flex-grid-column  
      binding="model" header="Model" width="*">  
    </wj-flex-grid-column>  
    <wj-flex-grid-column  
      binding="price" header="Price" format="c0" aggregate="Avg" width=".5*">  
    </wj-flex-grid-column>  

    <wj-flex-grid-filter></wj-flex-grid-filter>  

  </wj-flex-grid>  
</div>  

The app header contains a short app description and a summary of how many models and makes are displayed. The summary counts are updated automatically when the user filters the data.

The header is followed by the "wj-flex-grid" element which initializes the grid's properties, including the itemsSource, the columns to display, and their properties.

The column properties include the binding, header, format, and width for each column. Note that the aggregate property on the price column causes the grid to show the average price for each make in the group headers.

The "wj-flex-grid" element contains a "wj-flex-grid-filter" element which adds the column filter, so users may filter the grid data by model and by price.

Run the Application

That's it! The Vue version of the "2019 Sedans" app is ready.

Happy coding! If you have questions or comments be sure to enter them below.

Download Now!