Create a new Vue instance (You can also nest it within other components). An example works best to illustrate the syntax:
1
newVue({
2
el:"#people",
3
data:{
4
columns:['id','name','age'],
5
tableData:[
6
{ id:1, name:"John", age:"20"},
7
{ id:2, name:"Jane", age:"24"},
8
{ id:3, name:"Susan", age:"16"},
9
{ id:4, name:"Chris", age:"55"},
10
{ id:5, name:"Dan", age:"40"}
11
],
12
options:{
13
// see the options API
14
}
15
}
16
});
Copied!
You can access the filtered dataset at any given moment by fetching the `filteredData` computed property of the table, using `ref` as a pointer (`this.$refs.myTable.filteredData`); This will return the current page. To access the entire filtered dataset use `allFilteredData` instead.
When loading data asynchronously add a `v-if` conditional to the component along with some `loaded` flag, so it will only compile once the data is attached.