in dashboards-notifications/public/pages/Emails/components/tables/RecipientGroupsTable.tsx [52:122]
constructor(props: RecipientGroupsTableProps) {
super(props);
this.state = {
total: 0,
from: 0,
size: 5,
search: '',
sortField: 'name',
sortDirection: SortDirection.ASC,
items: [],
selectedItems: [],
loading: true,
};
this.columns = [
{
field: 'name',
name: 'Name',
sortable: true,
truncateText: true,
width: '150px',
},
{
field: 'email_group.recipient_list',
name: 'Email addresses',
sortable: true,
truncateText: true,
width: '450px',
render: (
recipient_list: RecipientGroupItemType['email_group']['recipient_list']
) => {
const emails = recipient_list.map((recipient) => recipient.recipient);
return (
<div>
{emails.slice(0, 5).join(', ')}
{emails.length > 5 && (
<span>
{' '}
<ModalConsumer>
{({ onShow }) => (
<EuiLink
onClick={() =>
onShow(DetailsListModal, {
header: `Email addresses (${emails.length})`,
title: 'Email addresses',
items: emails,
})
}
>
{emails.length - 5} more
</EuiLink>
)}
</ModalConsumer>
</span>
)}
</div>
);
},
},
{
field: 'description',
name: 'Description',
sortable: true,
truncateText: true,
width: '300px',
render: (description: string) => description || '-',
},
];
this.refresh = this.refresh.bind(this);
}