Ng2 smart table, getting multiple columns from one object

2.9k Views Asked by At

I'm using ng2 smart column to show transactions which contain an user object. I want to display the id user, name, and email in different columns. How can I do it?

settings = {
    add: {
      addButtonContent: '<i class="nb-plus"></i>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmCreate : true
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmSave : true
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    columns: {
      id: {
        title: 'ID',
        type: 'number',
      },
   
      user: { 
        title : 'name',
      valuePrepareFunction: (data) => {
                                   return data.email;
                               },
       },

      amount: {
        title: 'Valeur',
        type: 'number',
       
      },
      items: {
        name: { title: 'Nom' },
    },

      state: {
        title: 'Etat',
        type: 'string',
      },
      delivery_date: {
        title: 'Date de livraison',
        type: 'string',
      },
      expedition_date: {
        title: 'Date d\'expedition',
        type: 'string',
      },
    },
  };

check it on this link https://stackblitz.com/edit/example-ng2-smart-table-ytzrns?file=src/app/app.component.ts

2

There are 2 best solutions below

0
On BEST ANSWER

this is the solution

  
   'user.firstName': {
    title: 'Name',
    valuePrepareFunction: (cell, row) => { return row.user.firstName }
  },

  
    'user.lastName': {
    title: 'Last name',
    valuePrepareFunction: (cell, row) => { return row.user.lastName }
  },
    'user.address': {
    title: 'address',
    valuePrepareFunction: (cell, row) => { return row.user.address }
  },
    'user.email': {
    title: 'email',
    valuePrepareF

0
On

you can refer different properties of the same object just getting the entire row in valuePrepareFunction. I'll show you with the following example

...

property1: {
    title: 'Colum 1 title',
    type: 'string',
    valuePrepareFunction: (cell, row) => {
      return row.object.property1;
    },
},
property2: {
    title: 'Cell 2 title',
    type: 'string',
    valuePrepareFunction: (cell, row) => {
      return row.object.property2;
    },
},
...

I hope my answer is clear enough. Ask if needed.

Cheers