How can I display custom object data to a cell in smart table?

[samlanza]

I have a need to display a complex, custom object to a column rather than the typical primitives (number, boolean, string, etc.). How would I accomplish this with ng2 smart table? Below are my settings & data. As you can see, the "scopes" data is an array of custom objects. I would like to somehow loop through those and display them in a single cell:

settings = { columns: { id: { title: 'ID', }, name: { title: 'Full Name', type: 'custom' }, username: { title: 'User Name', }, link: { title: 'Link', type: 'html', editor: { type: 'custom', component: CustomEditorComponent, }, }, scopes: { title: 'Scopes' } }, };

data = [ { id: 1, name: 'Leanne Graham', username: 'Bret', link: '<a href="http://www.google.com">Google</a>', scopes: [ { "name": "management:v1.0:clients:modify", "displayName": "Write access to clients", "description": "Allows to modify client (applications)", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] }, { "name": "management:v1.0:clients", "displayName": "Access to clients", "description": "Allows access to Clients (applications) management API", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] }, { "name": "management:v1.0:apis:modify", "displayName": "Write access to resources", "description": "Allows to modify resources (APIs)", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] }, { "name": "management:v1.0:apis", "displayName": "Access to resources", "description": "Allows access to Resources (APIs) management API", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] } ] }, { id: 2, name: 'Ervin Howell', username: 'Antonette', link: '<a href="https://github.com/akveo/ng2-admin">Ng2 Admin</a>', scopes: [ { "name": "management:v1.0:clients:modify", "displayName": "Write access to clients", "description": "Allows to modify client (applications)", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] }, { "name": "management:v1.0:clients", "displayName": "Access to clients", "description": "Allows access to Clients (applications) management API", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] }, ] }, { id: 3, name: 'Clementine Bauch', username: 'Samantha', link: '<a href="https://github.com/akveo/ng2-smart-table">Ng2 smart table</a>', scopes: [ { "name": "management:v1.0:clients:modify", "displayName": "Write access to clients", "description": "Allows to modify client (applications)", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] }, ] }, { id: 4, name: 'Patricia Lebsack', username: 'Karianne', link: '<a href="https://github.com/akveo/blur-admin">Blur Admin</a>', scopes: [ { "name": "management:v1.0:clients:modify", "displayName": "Write access to clients", "description": "Allows to modify client (applications)", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] }, { "name": "management:v1.0:clients", "displayName": "Access to clients", "description": "Allows access to Clients (applications) management API", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] }, { "name": "management:v1.0:apis:modify", "displayName": "Write access to resources", "description": "Allows to modify resources (APIs)", "required": false, "emphasize": false, "showInDiscoveryDocument": false, "userClaims": [] }, ] } ];

[64n35h4]

Check the 'renderComponent' attribute, it allows you to pass a complex component to render into the cell at view mode - but type must be 'custom'

[samlanza]

Thanks! That worked.

[64n35h4]

@TheDude72 If your issue is resolved, you can mark it as closed.

[ishaant94]

@TheDude72 I am new to angular and I have the same need as you...can you share how you solved this issue ??