Display Nested Object with Ng2 Smart Table using AngularFire and Firestore

Question

Above Is my Data Structure in Firebase's Firestore db. I can successfully pull data and put it into the ng2 smart table using these settings:

export const userTableSettings = {
  delete: {
confirmDelete: true,
deleteButtonContent: '<i class="ft-x danger font-medium-1 mr-2"></i>'
  },
  add: {
confirmCreate: true,
  },
  edit: {
confirmSave: true,
editButtonContent: '<i class="ft-edit-2 info font-medium-1 mr-2"></i>'
  },
  firstName: {
title: 'Full Name',
  },
  lastName: {
title: 'User Name',
  },
  email: {
title: 'Email',
  },
},
  attr: {
    class: 'table table-responsive'
  },
};

but when I add a place for roles

roles: {
    title: 'Role',
},

the output is

I want to be able to display the users role or roles if they have more than one, and be able to update them from the table.

Answer 1

Since what you get for the roles data is an Object (and not a primitive, e.g. a string, a number, a boolean, etc.) you should use a renderComponent attribute. It will allow you to pass a Custom component to render into the cell (i.e. the type shall be custom).

See the doc https://akveo.github.io/ng2-smart-table/#/documentation (search for renderComponent in the page) and the proposed example (https://github.com/akveo/ng2-smart-table/blob/master/projects/demo/src/app/pages/examples/custom-edit-view/advanced-example-custom-editor.component.ts)