Updated April 19, 2023
Introduction to Vue.js grid
The following article provides an outline for Vue.js grid. We always have large set of data to show on the web page of our application. So to present this data to user in readable format we often use tables structure. Grid is used to show the large data in very readable format which is under stable by the user. We can perform pagination, sorting, filtering and many more operations. At the same time we can also able to edit the table data without being navigate to the other page.
Syntax
We are using jsgrid library to create grid in Vue.js. We have mount method to define our grid which contains the fields, data of the table and many more operations.
Below is the syntax to use jsgrid to create the tables in Vue.js to show our large or small amount of data:
mounted: function() {
this.grid.jsGrid({
// here we can define the style of tha grid
fields: [
//here we can define the objects of the grid.
{ }
]
})
}In the above example we are using mounted function to create the grid. Inside this function we can define style of table and field of the table.
How does grid work in Vue.js?
As now we know that the grid is used to show our data. This makes our web pages interactive and provide many other operations also to perform on the table data such as sorting, pagination, filtering and many more. We can also pass the dynamic data to the grid using ‘data’ object. Also we can make our grid edible, also apply grouping etc. We can also use <JqxGrid/> for grid.
We need to bind our HTML code inside this tag only. Import JqxGrid from JqxGrid library.
Let’s see how to use this in our application:
1. we need to import the JqxGrid from the below mentioned library.
import JqxGrid from “jqwidgets-scripts/jqwidgets-
2. Grid support many features such as:
a. Pagination
By using this function we can manage our table data. We are able to divide our large set of data into smaller chunks. This will help us view data into smaller set of data. Suppose we have 1000 number of records, so it is not the good idea to load all the record at once and show them on the single page this idea would not be good fir user. So we can use this feature of pagination to divide and show our data into smaller piece of data. To set this property true we need to set the flag as ‘true’.
Syntax :
mounted: function() {
paging: true
}In the above syntax we are setting this variable inside the mount function.
In JqxGrid we can define this inside the JqxGrid tag like below:
syntax:
<JqxGrid :pageable="true"></JqxGrid>b. Sorting
This feature allows us to sort the table data in ascending or descending order. We can apply the sorting mechanism on single column as well on multiple column.
Below is the syntax to use this feature.
syntax:
mounted: function() {
sorting: true
}We can also do this operation by using JqxGrid library by using sortBy and sorting keyword.
Syntax:
<JqxGrid :sorting="true"></JqxGrid>We can also specify the sortcolumn and sortdirection property on the same tag to be more specific.
c. Filtering
This feature is used to filter the table data based on the search keyword that user types in into the input filed. We can use ‘filter’ keyword to set this property enable or disable. When we keep this key as true then all the data will be display according to the filter key, otherwise in false no data will be display.
Syntax:
mounted: function() {
filter: true
}We can also use JqxGrid to define this feature inside the JqxGrid tag.
Syntax:
<JqxGrid :width="width" :filterable="true" ></JqxGrid>d. Group
This is very usable feature to group data of table according to multiple columns. User can select column according the need.
Syntax:
<JqxGrid :groupable="true" :groups="[column_name]"></JqxGrid>In the above syntax we have two keys one is groupable which taken a Boolean value as input to enable or diable this feature, other one is Groups key which takes an array of columns by which it will prefer the grouping on grid.
Vue.js grid Components
We have grid components which makes the implementation of table easy in any front end framework. This is same as grid components works in the angular.
We can define our grid component like below:
Syntax:
export default {
components: {
Name_of_component
}}Grid component comes up with many features. Grid component is also very convenient to handle and show the dynamic data very well. We do not need to import any other library for sorting, filtering and pagination many more. They all are available inside the one single library. By using the grid component we can perform edit on the table data as well. Which makes the page more and more interactive to the user. They can handle the large amount of data very well. Its components include pagination, filtering, sorting, grouping etc.
Example of Vue.js grid
Given below is the example of Vue.js grid:
In this example we are creating table using grid.
HTML File Code:
<div id="appDemo">
<div><h3>{{message}}</h3></div>
<br />
<div id="jsGridDemo"></div>
</div>JS File Code:
var app = new Vue({
el: '#appDemo',
data: function() {
let temData = []
temData.push(
{ "Name": "amit " , "Roll No": 001, "City": "Mumbai", "Grade": "A"},
{ "Name": "Sumit " , "Roll No": 005, "City": "Delhi", "Grade": "B"},
{ "Name": "amit " , "Roll No": 009, "City": "Pune", "Grade": "A"},
{ "Name": "Vinit " , "Roll No": 010, "City": "Bangalore", "Grade": "C"},
{ "Name": "Nimit " , "Roll No": 011, "City": "Kerela", "Grade": "B"}
);
let tempdataObj = {
message: 'Grid demo in Vue!!',
clients: temData,
grid: null
}
return tempdataObj;
},
mounted: function() {
this.grid = $('#jsGridDemo');
this.grid.jsGrid({
//defining keys here
width: "50%",
height: "300px",
data: this.clients,
// defining cloumns here with their type
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Roll No", type: "number", width: 50 },
{ name: "City", type: "text", width: 200 },
{ name: "Grade", type: "text", width: 200 }
]
})
}
})Output:
Conclusion
Grid helps to maintain the large or small or we can say any amount of data very well with the different types of features available so we do not need to import this features from different library they all available in single library. This makes the code readable to other developers, helps to optimize the code as well. It separated the HTML and js code which is easy to maintain in future.
Recommended Articles
This is a guide to the Vue.js grid. Here we discuss the introduction, syntax, and working of a grid in Vue.js along with components respectively. You may also have a look at the following articles to learn more –
