Adding new columns to user lists in groups

Dev
2

Hello, welcome to meta :wave:

You can use the group-index-table-header-after-username and group-index-table-row-after-username outlets to insert a header/row next to the username column.

For example:

image
image1104×334 23 KB

For the header, you can use the TableHeaderToggle component.
For the row, you can use for example <div class="directory-table__cell directory-table__cell--status">{{this.args.member}} – you can access data with {{this.args.member}}

You will need to fix the grid CSS to include a new column.

.group-members--can-manage {
    grid-template-columns: 3fr repeat(5, minmax(min-content, 1fr)) 3em;
                                      ^
}

If you want to move the column, the positioning is a bit tricky because of display: contents; however, using order can work.

On a side note, you might have issues getting the user’s status. In my tests, the data was not reflected in member with a user suspended or silenced (silencedTillDate or suspendedTillDate are undefined). I’m not sure if there is a bug here. I did not dig up more, for now!

I hope that helps.

5 Likes