Introduction
In this article, we will learn how to use ag-grid in a Vue.js application. ag-Grid is a component used for showing data in tabular format. By using ag-Grid, developers can easily extend functionality according to their requirements.
Prerequisites
- Basic knowledge of Vue.js
- Visual Studio Code IDE should be installed on your system.
- Basic knowledge of HTML and CSS
Create Vue.js project
Create a Vue.js project by using the following command.
vue create syndatagrid
Open the newly created project in Visual Studio Code and install ag-Grid using the following command.
npm install ag-grid-vue3 ag-grid-community vue-class-component@next
Now install bootstrap in this project by using the following command.
npm install bootstrap-vue bootstrap --save
Open main.js file and import bootstrap reference.
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Now open app.vue file. Add following code in app.vue component.
<template>
<div class="row" style="margin-top:10px">
<div class="col-sm-12 btn btn-info">
Add ag-Grid to VueJS App
</div>
</div>
<ag-grid-vue style="height: 500px;"
class="ag-theme-alpine"
:columnDefs="columnDefs"
:rowData="rowData">
</ag-grid-vue>
</template>
<script>
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { AgGridVue } from "ag-grid-vue3";
export default {
name: "App",
components: {
AgGridVue,
},
setup() {
return {
columnDefs: [
{ headerName: "Id", field: "Id", sortable: true, filter: true },
{ headerName: "Name", field: "Name", sortable: true, filter: true },
{ headerName: "Age", field: "Age", sortable: true, filter: true },
{ headerName: "Address", field: "Address", sortable: true, filter: true },
{ headerName: "City", field: "City", sortable: true, filter: true },
{ headerName: "Salary", field: "Salary", sortable: true, filter: true },
{ headerName: "Department", field: "Department", sortable: true, filter: true }
],
rowData: [
{
Id: "100",
Name: "Sanwar",
Age: "25",
Address: "Jaipur",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "2",
Name: "Nisha",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "3",
Name: "David",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "4",
Name: "Sam",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "5",
Name: "Jyotsna",
Age: "25",
Address: "C-Scheme",
City: "Mumbai",
Salary: "500000",
Department: "IT",
},
{
Id: "6",
Name: "Sid",
Age: "25",
Address: "C-Scheme",
City: "Bangalore",
Salary: "500000",
Department: "IT",
},
{
Id: "7",
Name: "Chavi",
Age: "25",
Address: "C-Scheme",
City: "Noida",
Salary: "500000",
Department: "IT",
},
{
Id: "8",
Name: "Nisha",
Age: "25",
Address: "C-Scheme",
City: "Delhi",
Salary: "500000",
Department: "IT",
}
]
};
},
};
</script>
<style>
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
.ag-theme-alpine {
@include ag-theme-alpine((
odd-row-background-color: #ACE
));
}
</style>
Now right click on the components folder and add a new file and named 'Datagrid.vue', it creates a new component. Add the following code to this component.
<template>
<div class="row" style="margin-top:10px">
<div class="col-sm-12 btn btn-info">
Add Pagination and Filter in ag-Grid
</div>
</div>
<ag-grid-vue style="height: 500px;"
class="ag-theme-alpine"
:columnDefs="columnDefs"
:rowData="rowData" pagination="true" paginationPageSize="5" floatingFilter="true" >
</ag-grid-vue>
</template>
<script>
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { AgGridVue } from "ag-grid-vue3";
export default {
name:"Datagrid",
components: {
AgGridVue
},
setup() {
return {
columnDefs: [
{ headerName: "Id", field: "Id", sortable: true, filter: true },
{ headerName: "Name", field: "Name", sortable: true, filter: true },
{ headerName: "Age", field: "Age", sortable: true, filter: true },
{ headerName: "Address", field: "Address", sortable: true, filter: true },
{ headerName: "City", field: "City", sortable: true, filter: true },
{ headerName: "Salary", field: "Salary", sortable: true, filter: true },
{ headerName: "Department", field: "Department", sortable: true, filter: true }
],
rowData: [
{
Id: "100",
Name: "Sanwar",
Age: "25",
Address: "Jaipur",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "2",
Name: "Nisha",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "3",
Name: "David",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "4",
Name: "Sam",
Age: "25",
Address: "C-Scheme",
City: "Jaipur",
Salary: "500000",
Department: "IT",
},
{
Id: "5",
Name: "Jyotsna",
Age: "25",
Address: "C-Scheme",
City: "Mumbai",
Salary: "500000",
Department: "IT",
},
{
Id: "6",
Name: "Sid",
Age: "25",
Address: "C-Scheme",
City: "Bangalore",
Salary: "500000",
Department: "IT",
},
{
Id: "7",
Name: "Chavi",
Age: "25",
Address: "C-Scheme",
City: "Noida",
Salary: "500000",
Department: "IT",
},
{
Id: "8",
Name: "Nisha",
Age: "25",
Address: "C-Scheme",
City: "Delhi",
Salary: "500000",
Department: "IT",
}
]
};
},
}
</script>
<style >
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
</style>
Now open the App.vue file and add the following code.
<template>
<div id="app">
<Datagrid/>
</div>
</template>
<script>
import Datagrid from './components/Datagrid.vue'
export default {
name: 'App',
components: {
Datagrid
}
}
</script>
<style>
</style>
Now run the project by using the following command: 'npm run serve'
![How To Use Ag-Grid In Vue.js]()
![How To Use Ag-Grid In Vue.js]()
Summary
In this article, we learned how to use ag-grid in a Vue.js application.