Display Nested Object with Ng2 Smart Table using AngularFire and Firestore

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.

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)