title: Display Nested Object with Ng2 Smart Table using AngularFire and Firestore
body: <p><a href="https://i.stack.imgur.com/Y2By4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y2By4.png" alt="1" /></a></p>
  <p>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:</p>
  <pre><code>export const userTableSettings = {
    delete: {
  confirmDelete: true,
  deleteButtonContent: '&lt;i class=&quot;ft-x danger font-medium-1 mr-2&quot;&gt;&lt;/i&gt;'
    },
    add: {
  confirmCreate: true,
    },
    edit: {
  confirmSave: true,
  editButtonContent: '&lt;i class=&quot;ft-edit-2 info font-medium-1 mr-2&quot;&gt;&lt;/i&gt;'
    },
    firstName: {
  title: 'Full Name',
    },
    lastName: {
  title: 'User Name',
    },
    email: {
  title: 'Email',
    },
  },
    attr: {
      class: 'table table-responsive'
    },
  };
  </code></pre>
  <p>but when I add a place for roles</p>
  <pre><code>roles: {
      title: 'Role',
  },
  </code></pre>
  <p>the output is</p>
  <p><a href="https://i.stack.imgur.com/qxM3G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qxM3G.png" alt="enter image description here" /></a></p>
  <p>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.</p>