Client Table

Search…
Client Table
Getting started with client table
Add the following element to your page wherever you want it to render.
Make sure to wrap it with a parent element you can latch your vue instance into.
1
<div id="people">
2
  <v-client-table :data="tableData" :columns="columns" :options="options"/>
3
</div>
Copied!
Create a new Vue instance (You can also nest it within other components). An example works best to illustrate the syntax:
1
new Vue({
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.
Vue Version 3
Asynchronous Loading
Last modified 1yr ago
Copy link