--- Title: People list component Added: v2.0.0 Status: Active Last reviewed: 2019-01-14 --- # [People list component](../../../lib/process-services/src/lib/people/components/people-list/people-list.component.ts "Defined in people-list.component.ts") Shows a list of users (people). ![ADF People List](../../docassets/images/adf-people-list.png) ## Basic Usage Populate the users in the component class: ```ts import { UserProcessModel } from '@alfresco/adf-core'; export class SomeComponent implements OnInit { people: UserProcessModel[] = [ { id: 1, email: 'john.doe@alfresco.com', firstName: 'John', lastName: 'Doe' }, { id: 2, email: 'jane.doe@alfresco.com', firstName: 'Jane', lastName: 'Doe' } ]; onClickPeopleRow(user: UserProcessModel) { console.log('Clicked row: ', user); } onClickPeopleAction($event: Event) { console.log('Clicked action: ', $event); } ``` You can use column templates with the [people list component](people-list.component.md), since it is based on the [Datatable component](../../core/components/datatable.component.md): ```html {{entry.row.obj.firstName + ' ' + entry.row.obj.lastName}}
{{ entry.row.obj.email }}
``` ## Class members ### Properties | Name | Type | Default value | Description | | ---- | ---- | ------------- | ----------- | | actions | `boolean` | false | Toggles whether or not actions should be visible, i.e. the 'Three-Dots' menu. | | users | [`UserProcessModel`](../../core/models/user-process.model.md)`[]` | | The array of user data used to populate the people list. | ### Events | Name | Type | Description | | ---- | ---- | ----------- | | clickAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UserEventModel`](../../../lib/process-services/src/lib/task-list/models/user-event.model.ts)`>` | Emitted when the user clicks in the 'Three Dots' drop down menu for a row. | | clickRow | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UserProcessModel`](../../core/models/user-process.model.md)`>` | Emitted when the user clicks a row in the people list. |