How to Vuestic DataTable displays values from properties of objects?

Question

I'm using Vuestic in my vue project and I need to display values from a property that is in a object, I have something like this:

myObject: {
  subObject: {
    name
  }
}

I have a list of myObject and I need to display the name of the subObject in the DataTable. My DataTable is pointing to headers object:

headers: [
  { key: 'subObject.name', label: 'Name' }
]

Is that possible?

Answer 1

Yes, it is defintely possible.

This feature was not supported until this commit on Jun 23. Therefore, since v1.4.2 of vuestic-ui was released on Jun 24, you can use dot notation in keys to retrieve nested properties for data tables.

Here is a working example: link.