Ag-grid + Angular 6 - Display nested array in column

Question

I have a list of users and each user has several roles as array. I use ag-grid to display all users along with their roles, but it looks like ag-grid does not work with my data structure. So what is the best way that I can display all user roles for each user on grid table?

data structure:

[
 {
  userId: ''
  username: '',
  userRoles: [
    {roleId: '', roleName: ''},
    ...
  ]
 },
 ...
]

In what format do you want the roles to be shown? For example, do you want to show "admin,manager,user" as a simple comma-delimited string of role names, or do you want to show something with more "structure"? — Andy King
– Andy King, Commented Aug 27, 2018 at 22:21
The role names can be join strings in one line, but I already figured it out myself, if you have solution, please share, it's good to learn. — Hoàng Nguyễn
– Hoàng Nguyễn, Commented Aug 28, 2018 at 7:33
I use the ColDef.valueGetter property to set the column value to a comma-delimited string containing the values: const colDef: ColDef = this.grid.columnApi.getColumn('skillLevels').getColDef(); colDef.valueGetter = this.getSkillLevels; (where this.getSkillLevels returns a string containing the comma-delimited values). — Andy King
– Andy King, Commented Aug 28, 2018 at 14:38

un.spike · Accepted Answer · 2018-08-27 19:19:20Z

1

I suggest that the best way would be to create a column group (collapsible) and put info to it.

  {
    headerName: 'Roles',
    children: [
        {
            headerName: "Top Role", field: "topRole", columnGroupShow: 'closed', width: 100, 
            cellRenderer: () => { return 'SuperAdmin'; }
        },
        {
            headerName: "Role: 1", columnGroupShow: 'open', width: 150,
            cellRenderer: () => { return 'SuperAdmin'; }
        },
        {
            headerName: "Role: 2", columnGroupShow: 'open', width: 150,
            cellRenderer: () => { return 'Support'; }
        }
    ]
  }

Here is a simple example: https://plnkr.co/edit/i3somDDT9Xdnln32xUy1?p=preview

You can define the single field to display top role from the existing and then via collapse button display all user roles.

More details about column groups

answered Aug 27, 2018 at 19:19

un.spike

5,1533 gold badges23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hoàng Nguyễn Over a year ago

Thank you for nice solution. In my case, I just make role names as join strings with commas then put them all in one column each row.

Collectives™ on Stack Overflow

Ag-grid + Angular 6 - Display nested array in column

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related