vue-tables-2. How to display data from nested objects?

Question

Vue.js

Hello.
To display lists on the project I use Vue-tables-2.
How to display data in a column if it is in a nested object.
For example:

{
  id: 1,
  category: {
    name: 'Категория 1',
  }
  user: {
    name: 'Иван Иванов',
    city: {
      name: 'Москва'
    },
    country: {
      name: 'Россия'
    }
  }
}

How to display the user's full name, country and city name in the table?
Found one solution through templates:

columns: [
  'id',
  'contactName',
  'contactCity',
  'category',
],
options: {
  templates: {
    contactName(h, row){
      return row.user ? row.user.name : '';
    },
    contactCity(h, row){
      return row.user.city ? row.user.city.name : '';
    },
    category(h, row){
      return row.category ? row.category.name : '';
    }
  },
}

but it is not quite suitable, since the search for these fields does not work.
Can you please tell me if there are any other ways? I need the search to work
Thank you

Answer 1

Search by properties of nested objects "out of the box" is not provided. So crutches are indispensable.
I see three options:

• Transfer properties of nested objects directly to the table row object. That is, now you have { user: { city: { name: "..." } } }, but will be { userCityName: "..." }or { user_city_name: "..." }, something like that.
  
• Creating custom filters on columns created using templates. Everything is done manually - creating a filter, writing the logic of its work, etc. Another disadvantage of this approach is that custom filter controls are located outside the table, unlike built-in ones. I googled an implementation example, based on it I made an example of searching by the properties of nested objects.
  
• Finally, you can wrap the data in a Proxy. There is no need to define templates in this case, everything works as if the properties we are interested in do not belong to nested objects, but directly to the table row object. Accordingly, the built-in search is also available. The idea is: we make a get-trap, in it we cut the property name, for example "user.city.name", into pieces, go deeper along the resulting chain of names, get the value. Again, made a small example .
  

Answer 2

And what's the problem to bring your object to the form that is suitable for the table.