How to Build a Vue Data Grid in Minutes
Tags: webdev, devops, javascript, vue
Published: 2023-12-07 15:53:57

---
canonical_url: https://developer.mescius.com/blogs/how-to-build-a-vue-data-grid-in-minutes
description: Learn to build a customizable Vue data grid in minutes.
---
### Data Grids in Vue

![Build a Customizable Vue Datagrid in Minutes](//cdn.mescius.io/assets/developer/blogs/wijmo/20190125-build-a-react-data-grid-in-minutes/vue-datagrid.jpg)

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 also make their way to web app UIs. 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 useful as UI elements](https://developer.mescius.com/en/blogs/wijmo-flexgrid-best-react-data-grid) and [how to build a React datagrid in minutes](https://developer.mescius.com/en/blogs/build-a-react-data-grid-in-minutes). You can see the FlexGrid in action and learn more about it using our [Learn Wijmo application](https://demos.wijmo.com/5/PureJS/LearnWijmo/LearnWijmo/#bwdea8y3). You can get your copy from [NPM](https://www.npmjs.com/package/wijmo) [](https://www.npmjs.com/package/wijmo)from [our CDN](https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/static/references.html) or download it from [our site](https://developer.mescius.com/en/wijmo).

Let's put [FlexGrid](https://developer.mescius.com/en/wijmo-flexgrid) to work, building a customizable [Vue data grid](https://developer.mescius.com/wijmo/vue-ui-components/flexgrid-vue-data-grid) in minutes.

We'll use the following application to demonstrate how to use the FlexGrid with [**Vue**](https://en.wikipedia.org/wiki/Vue.js), Evan You's JavaScript framework.

We'll use [**stackblitz**](https://stackblitz.com/) to create the sample so it is easy to maintain and share.

The reference code for this app can be [found here](https://stackblitz.com/edit/vue-dae6mk?file=src%2FApp.vue).

Let's get started!

### Create the Vue App

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

1.  Create a new Vue app. 
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 **App.vue** file as follows:

```
    // App.vue
    import { getData } from './data';
    import { WjFlexGrid, WjFlexGridColumn } from 'wijmo/wijmo.vue2.grid';
    import { WjFlexGridFilter } from 'wijmo/wijmo.vue2.grid.filter';
    import { CollectionView } from 'wijmo/wijmo';
    import 'wijmo/styles/themes/wijmo.theme.material.css';
```

These statements import the [**CollectionView**](https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.collections.CollectionView.Class.html) 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 **App.vue** file as follows:

```
    // App.vue
    export default {
      name: 'App',
      data: function () {
        let view = new CollectionView([], { groupDescriptions: ['make'] });
        view.sourceCollection = getData();

        return {
          data: view,
        };
      },
      components: {
        'wj-flex-grid': WjFlexGrid,
        'wj-flex-grid-column': WjFlexGridColumn,
        'wj-flex-grid-filter': WjFlexGridFilter,
      },
    };
```

Create a **data.js** file and add this code:

```
    // data.js
    export function getData() {
      return [
        {
          make: 'Chrysler',
          model: '300',
          price: 29220,
        },
        {
          make: 'BMW',
          model: '430 Gran Coupe',
          price: 44600,
        },
        {
          make: 'BMW',
          model: '440 Gran Coupe',
          price: 51000,
        },
    ...
    }

```
This creates the Vue component that will replace 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 **App.vue** file defines the application UI. It contains a **style** element that defines the grid size and application font:

```
    <style>
    body {
      font-family: Lato, Arial, Helvetica;
    }

    .wj-flexgrid {
      /* limit the grid's width and height */
      max-height: 300px;
      max-width: 32em;
    }
    </style>
```

Apart from the **style** element, the file defines the app header and summary section, followed by the grid in a template tag:

```
    <template>
      <h1>2023 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>
      <p>
        Showing
        <b>{{ data.items ? data.items.length : 0 }}</b> models from
        <b>{{ data.groups ? data.groups.length : 0 }}</b> makes.
      </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>
    </template>
```

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 that adds the column filter so that users may filter the grid data by model and price.

### Run the Application

That's it! [The Vue version of the "2023 Sedans" app is ready](https://stackblitz.com/edit/vue-dae6mk?file=src%2FApp.vue).

Happy coding! If you have questions or comments, please don't hesitate to leave them below.