0

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?

tony19
  • 125,647
  • 18
  • 229
  • 307
ibanjo
  • 323
  • 2
  • 14
  • Just to be clear, a possible although ugly workaround is to do something like `countries.forEach((usr, idx, arr) => { arr[idx].code_hash = arr[idx].code.hash; });` as the VM is mounted, which works in my application, but you may guess how horrible this is from many points of view. – ibanjo Dec 12 '17 at 18:47
  • Maybe create a computed which returns the data as an array of flattened objects? – kmc059000 Dec 12 '17 at 19:04
  • Yup, this is a valid alternative, which is definitely worth trying. However by doing so you kinda lose the original data structure which is somewhat important to me. I currently "mock" such structure by flattening the objects in new fields called something like `code_hash`, standing for `code.hash`, but I was looking for something a bit more elegant (and maintainable). – ibanjo Dec 12 '17 at 19:09

1 Answers1

2

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

demianh
  • 343
  • 1
  • 11