Introduction
Here we will discuss about Vue JS Server Table. Vue.js is a framework for building client-side applications. By default, Vue components produce and manipulate DOM in the browser as a output. However, it is also possible to render the same into HTML strings on the server, send them directly to the browser, and finally “hydrate” the static markup into a fully interactive app on the client.
In laravel, data table used for display data from server side. And in that column name display and data pass from the server side. In Vue JS there are Server table used for display data from the server side. It is also called vue-table-2 package for server table.
Usage
Vue Server Table package with server-side processing and Vue JS components. Quickly build any complex table based on JSON template.
Vue JS server table used for display data from the server side. Something like data table in laravel. In Vue JS there are Client Table and Server Table available. Client table is used for display data of front side or static data into table. There are no connection with server and it is easy to use. While Server Table used for display data from server into table. There are data, methods, events available for custom data modification.
Features
-
Efficient server side data loading
-
Searching on Multi-column
-
Sorting on Multi-column with the option to set default sorting per column
-
Pagination Configuration
-
Column Visibility based on user’s customization
-
Easy Configuration of action buttons
-
Furthermore, Full customization for your columns via the use of scoped slots
Implementation
npm install vue-tables-2
Require the script
import { ServerTable, ClientTable, Event } from ‘vue-tables-2’;
Register Component
Vue.use(ServerTable,
options = { },
theme = 'bootstrap3',
template = 'default'
);
Theme Use this option to select a CSS framework. Options:'bootstrap3', 'bootstrap4', 'bulma'.
You can also pass you own theme.
Template Use this option to select an HTML template.
Currently supported: 'default', 'footerPagination'
You can also pass your own template.
<div id="people"> <v-server-table url="/people"" :columns="columns" :options="options"></v-server-table> </div>
new Vue({
el: "#people",
data: {
columns: ['id', 'name', 'age'],
options: {
// see the options API
}
}
});
You need to return a JSON object with two properties:
-
data : array – An array of row objects with identical keys.
-
count: number – Total count before limit.
Hence, if you are calling a foreign API or simply want to use your own keys, refer to the responseAdapter option.
options: {
requestFunction: function (data) {
return axios.get(this.url, {
params: data
}).catch(function (e) {
this.dispatch('error', e);
}.bind(this));
}
}
Vue Component
Summarize template and pass name for creating template. So we must pass data and index to get row object values. And also pass optional column name.
Vue.component('delete', {
props: ['data', 'index', 'column'],
template: ``,
methods: {
erase() {
let id = this.data.id;
}
}
});
Custom Filter
Custom filter is another very useful for getting custom data as per user requirements. Means you can add custom search and select and many other options in custom filter for get specific data.
options: {
customFilters: ["name"],
},
methods: {
applyName() {
var select_name = $("select[name=name]”).val();
Event.$emit("vue-tables.filter::name", select_name);
}
}
Conclusion
In Vue JS there is a server table used for display data from the server side. And we show how to use the custom filter and custom search and sorting options to find custom data as a result. There are also many options available in the server table. So, basically, the server table is easy to use and easy to customize the options.
Finally, hope this blog will help to all. If you have any query or suggestion please comment below. And even more you can get the source code from GitHub
