In my project I am using VueJS (2.5.9) to render and edit data tables for an administrative application. For the data table, I was first using a simple Grid component, as per the example found here, then I found this great vue-tables-2 package, but the main principles of operation from the VueJS VM point of view are kept almost the same.
So in the data object of my VM I have a columns array such as
columns: [
'id',
'name',
'surname',
'department',
'register',
'uri'
]
where each element represents a property of each record Object, i.e. the i-th row of the table contains data taken from users[i] as users[i].name, users[i].surname, etc. Of course, the users array is in my VM's data Object as well.
In my HTML I have something like
<v-client-table :columns="columns" :data="users" :options="options" v-if="ready">
<a slot="uri" slot-scope="props" :href="props.row.uri">
<i class="fa fa-fw fa-pencil-square-o"></i>
</a>
</v-client-table>
where the <a> tag is simply used to use the uri as href to a link.
Everything works just fine in principle, but my data happen to be structured, so that each record's department field is, in turn, an Object.
So my question is: has anyone managed to use properties of sub-Objects for the rendering of a data table?
It would be nice, e.g. to write something like this:
columns: [
'id',
// ...
'department.name',
// ...
]
which, of course, does not work. I forked the main JSFiddle demo of the vue-tables-2 into this JSFiddle, so that now the code fields are Objects. Does anyone know how to show, in the table, code.hash for each record?
You could use a template function to render the code cell.
new Vue({
el: "#app",
data: {
columns: ['name', 'code', 'uri'],
data: getData(),
options: {
...
templates: {
code: function (h, row, index) {
return row.code.hash;
}
},
...
}
}
});
I updated the fiddle here: https://jsfiddle.net/zz6t4kxu/
See the documentation on how to use templates: https://github.com/matfish2/vue-tables-2#templates