How to Quickly Create a Vue Datagrid in Your Web Application

November 03 2021

Datagrids have been one of the most common visual software elements since the advent of UIs themselves. They appeal to the instinct that drives all of us to take in and understand as much data as possible, as quickly as possible. Datagrids are more useful than ever, not only for displaying data but also for editing it.

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 datagrid, the paradigm has increased throughout the software field. As web apps continue to replace the traditional native applications we're used to, it only makes sense that datagrids would make their way to web app UIs.

Plenty of Vue datagrids exist in the market: open-source, third-party, and homegrown. Which to choose?

You can see FlexGrid in action and learn more about it through our Vue datagrid overview sample. You can get your copy of Wijmo from NPM, from our CDN, or by downloading it from our site.

Let's put FlexGrid to work by building a customizable Vue datagrid in minutes. We'll use the following application to demonstrate how to use FlexGrid with Vue 3.

We use Stackblitz to create the sample, so it is easy to maintain and share.

Let's get started!

Download Now!

How to Create the Vue App

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

Open Stackblitz
Click the "Vue 3" button at the top of the screen
Add the following dependencies to the project's dependencies list

dependency

How to Import the Required Modules

Before we can actually use Wijmo's controls to create a FlexGrid, we'll need to make sure that we import the required modules. In this sample, we'll use both the FlexGrid module and the FlexGridFilter module. Inside of our App.vue file, we'll add the following:

import '@grapecity/wijmo.vue2.grid';
import * as wjcCore from '@grapecity/wijmo';
import * as wjcGrid from '@grapecity/wijmo.vue2.grid';
import * as wjcGridFilter from '@grapecity/wijmo.vue2.grid.filter';

Styling the App

We'll also need to include styling for the grid. In this sample, we'll be using Wijmo's Angular Material theme for the controls. Inside of your App.vue file, add the following:

import '@grapecity/wijmo.styles/wijmo.css';

Setting Up Access to Wijmo Components

Lastly, we'll create our components within the file's markup inside the component property of the app:

components: {
    'wj-flex-grid': wjcGrid.WjFlexGrid,
    'wj-flex-grid-column': wjcGrid.WjFlexGridColumn,
    'wj-flex-grid-filter': wjcGridFilter.WjFlexGridFilter
}

Now, we can use these as tags in markup to create our components for FlexGrid!

Adding a Data Source to Your Grid

Our data source will be stored inside of our App.vue file, and we'll be using a fetch call to get our data from our external data source:

data: function() {
    let view = new wjcCore.CollectionView([], {
        groupDescriptions: ['make'],
    });
    fetch('https://api.jsonbin.io/b/5f0765bc5d4af74b01295f26').then((result) => result.json()).then((data) => {
        view.sourceCollection = data;
    });
    return {
        data: view,
    };
}

The app exposes the data by creating a CollectionView (grouped by make) assigned to the variable view. The data is loaded asynchronously within the component's constructor. When the data is received, it is assigned to the CollectionView's sourceCollection property and becomes available to the application.

How to Visualize the Data in Vue

The final step is implementing FlexGrid's markup within the App.vue file's template, which will render the whole UI, including the grid:

<template>
    <div id="app">
        <h1>2021 Sedans (Vue)</h1>
        <p>Sort by model and price by clicking the column headers. Filter by value or condition by clicking the filter icons in the column headers. Collapse and expand makes to see all the models. Select one or more models with the mouse or keyboard and copy your selection to the clipboard.</p>
        <wj-flex-grid :itemsSource="data" :allowResizing="'None'" :isReadOnly="true" :selectionMode="'ListBox'" :headerVisibility="'Column'" :alternatingRowStep="0">
            <wj-flex-grid-column binding="make" header="Make" :visibility="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>
</template>

The app contains a short description of the application, plus a summary of the number of models and makes displayed. The summary counts are automatically updated when the users filter the data.

Beneath that is the FlexGrid 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 makes in the group headers.

The FlexGrid element also contains a FlexGridFilter element, which adds the column filter so that users may filter the grid data by model and price.