How to Use a Vue Grid UI Component in Your Web App (Part 1)
Tags: javascript, vue, datagrid
Published: 2019-02-13 09:02:50

---
title: How to Use a Vue Grid UI Component in Your Web App (Part 1)
published: true
tags: javascript, vue, datagrid
canonical_url: https://www.telerik.com/blogs/how-to-use-a-vue-grid-ui-component-in-your-web-app-part-1
---

Let's learn how to create a Grid with the new native Grid in Kendo UI for Vue. The new native Grid is built with Vue from the ground up.

In the first post in this two part series, we will learn how to create a Kendo UI native Grid for Vue. The [new native Grid](https://dev.to/progresstelerik/introducing-the-new-native-kendo-ui-vuejs-grid-587-temp-slug-3272728) is built with Vue from the ground up. One way the [native grid](https://www.telerik.com/kendo-vue-ui/components/grid-native/) differs from the grid wrapper is that the native grid doesn’t depend on jQuery. The other difference is that the `DataSource` component is no longer required to load data. The data can be defined directly inside the component. Coming up, we will see how to create a native grid using local and remote data. Then we will add a pager to the grid to split the data into pages.

## Creating the Grid

First, we will initialize our project using the [Vue webpack-simple template](https://github.com/vuejs-templates/webpack-simple). Inside the project directory, we will install a theme, the grid, the globalization package, and the vue-class-component using the following commands:

```
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-vue-grid
npm install --save @progress/kendo-vue-intl 
npm install --save vue-class-component

```

Next, we import the theme and the grid in our `main.js` file and register the grid component globally.

```
import Vue from 'vue'
import App from './App.vue'
import '@progress/kendo-theme-default/dist/all.css'
import { Grid } from '@progress/kendo-vue-grid'

Vue.component('Grid', Grid);

new Vue({
  el: '#app',
  render: h => h(App)
})

```

In this first example, we will define our data locally. The data is provided by [uinames.com](https://uinames.com/). We will add our grid component to the template in the `App.vue` file and set the `data-items` and `columns` property. The `data-items` property sets the grid’s data. The `columns` property sets the fields of the grid. This is the updated `App.vue` file:

```
<template>
  <div id="app">
    <Grid :style="{height: '200px'}"
          :data-items="dataItems"
          :columns="columns">
    </Grid>
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      dataItems: [
      {
        "name": "Ruxanda",
        "surname": "Corbea",
        "gender": "female",
        "region": "Romania"
      },
      {
        "name": "Paula",
        "surname": "Acevedo",
        "gender": "female",
        "region": "Mexico"
      },
      {
        "name": "David",
        "surname": "Dediu",
        "gender": "male",
        "region": "Romania"
      },
      {
        "name": "Urmila",
        "surname": "Belbase",
        "gender": "female",
        "region": "Nepal"
      }],
      columns: [
        { field: 'name'},
        { field: 'surname'},
        { field: 'gender'},
        { field: 'region' }
      ],
    };
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```

Using the same data, we will build a grid from a remote data source. We will start with an empty `dataItems` array. This time we will use axios to fetch the data from an API. Then we will fill the `dataItems` array with the result. The API call will take place within the `mounted` lifecycle event. First, we will install axios with the following command:

```
npm install --save axios

```

Then we import axios in the script of our `App.vue` file and load the data from within the `mounted` lifecycle event. This is the updated script:

```
<script>
import axios from 'axios'

export default {
  name: 'app',
  data () {
    return {
      dataItems: [],
      columns: [
        { field: 'name'},
        { field: 'surname'},
        { field: 'gender'},
        { field: 'region' }
      ],
    }
  },
  mounted () {
    axios
      .get('https://uinames.com/api/?amount=25')
      .then(response => {
        this.dataItems = response.data
      })
  }
}
</script>

```

## Adding Paging

By default, all of the records in the grid show on one page. To implement paging, we need to configure several properties. We must set the `pageable`, `skip`, `take`, and `total` properties of our grid as well as the `pagechange` event. The `pageable` property configures the pager for the grid. The `skip` property is the number of records the pager will skip. The `take` property is the number of records to show for each page. The `total` is the total number of data items. And `pagechange` is the event that fires when the page is changed. This is the updated template:

```
<template>
  <div id="app">
    <Grid :style="{height: '200px'}"
          :data-items="result"
          :columns="columns"
          :pageable="true"
          :skip="skip"
          :take="take"
          :total="total"
          @pagechange="pageChange">
    </Grid>
  </div>
</template>

```

The `data-items` property should be set to the data for the current page. To achieve this, we create a computed method named `result` that calculates which records to take from the list of data items. The `skip` property is initialized to 0 and `take` is initialized to 10. We create a computed method for `total` that returns the number of data items. Last, we add a `pageChange` method which updates the `skip` and `take` properties. This is the updated script:

```
<script>
import axios from 'axios'

export default {
  name: 'app',
  data () {
    return {
      dataItems: [],
      columns: [
        { field: 'name'},
        { field: 'surname'},
        { field: 'gender'},
        { field: 'region' }
      ],
      skip: 0,
      take: 10,
    }
  },
  computed: {
    result () {
        return this.dataItems.slice(this.skip, this.take + this.skip)
    },
    total () {
      return this.dataItems.length
    }
  },
  mounted () {
    axios
      .get('https://uinames.com/api/?amount=25')
      .then(response => {
        this.dataItems = response.data
      })
  },
  methods: {
    pageChange(event) {
        this.skip = event.page.skip;
        this.take = event.page.take;
    }
  }
}
</script>
```

See the final project repo here: [https://github.com/albertaw/kendoui-vue-native-grid](https://github.com/albertaw/kendoui-vue-native-grid)

## Summary

First, we saw how to create a grid using local data. That required setting the `data-items` property equal to a list defined in the data and setting the `columns` property. Then we created the grid from a remote data source by using axios to make an API call within Vue’s `mounted` lifecycle event. Last, we added paging to the grid. We had to set the `pageable`, `skip`, `take`, and `total` properties and handle the `pagechange` event.

In the next post, we will see how to edit records in the grid.

## Resources

- [Project Repo](https://github.com/albertaw/kendoui-vue-native-grid)
- [Vue Grid Native Overview](https://www.telerik.com/kendo-vue-ui/components/grid-native/)
- [Vue Grid Native Paging](https://www.telerik.com/kendo-vue-ui/components/grid-native/paging/)
- [Vue Grid Native API](https://www.telerik.com/kendo-vue-ui/components/grid-native/api/)

## Try out Kendo UI for Yourself

Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.

[Start My Kendo UI Trial](https://www.telerik.com/download-login-v2-kendoui?ReturnUrl=https://www.telerik.com/download-login-v2-kendoui/thank-you-for-downloading)

## Angular, React, and jQuery Versions

Looking for UI component to support specific frameworks? Check out [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/), [KendoReact](https://www.telerik.com/kendo-react-ui/components/), or [Kendo UI for jQuery](https://www.telerik.com/kendo-jquery-ui/).

## Resources

- [Kendo UI Vue Docs and Demos](https://www.telerik.com/kendo-vue-ui/components/)
- [Vue.js Webpack-Simple Template](https://github.com/vuejs-templates/webpack-simple)
- [Kendo UI Online Editor](https://dojo.telerik.com/)