member_webapp/@overflow/notification/component/list/list.component.html

<h1>Notifications</h1>
<div class="ui-g-12" dir="rtl">
    <button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
</div>

<p-table [value]="notifications" selectionMode="single"  (onRowSelect)="onRowSelect($event)" >
    <ng-template pTemplate="header">
        <tr>
            <th style="width:9em">Date</th>
            <th style="width:12em">Title</th>
            <th pResizableColumn>Message</th>
            <th style="width:8em">User</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
      <tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
          <td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
          <td>{{notification.title}}</td>
          <td>{{notification.message}}</td>
          <td>{{notification.member.name}}</td>
      </tr>
  </ng-template>
</p-table>
<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>