[CDataTable] Allow nested objects / fields

I would like to request support for nested objects / fields.

item: {
  id: 1,
  code: 'xx',
  unit: {
    description: 'myDescription'
  }
}

fields = [
  'id',
  'code',
  'unit.description'
]

<c-data-table :items="items" :fields="fields" />

This would result in a table with a description column with the value derived from the unit object. Currently if I do this the field value is undefined.

[woothu]

Hi! Scoped slots are made for unusual cases like this. Solution:

fields = [
  'id',
  'code',
  'unit'
]

<c-data-table :items="items" :fields="fields">
    <template #unit="{item}">
      <td>
          {{item.unit.description}}
      </td>
    </template>
</c-data-table>

[woothu]

Yes, this is a valid use case, I get your point. 😉

Btw. You can keep your nested data, and just add an additional key to the item, just don’t mention nested data key in ‘fields’ prop. This way you preserve your desired structure and simplify CDataTable usage. Then computing could look like this

computed: {
  computedItems () {
    return rawItems.map(item => {...item, { unit: item.unit.description }})
  }
}