Yrkki/cv-generator-fe

<table class="table table-condensed" aria-describedby="table">
  <thead>
    <tr [ngClass]="portfolioService.toolbarService.pagination ? 'tryKeepTogether' : ''">
      <th scope="col" style="width: 5%; text-align: right;">{{ toTitleCase(entities['Id']?.node) }}</th>
      <th scope="col" style="width: 10%; text-align: right;">{{ toTitleCase(entities['From']?.node) }}</th>
      <th scope="col" style="width: 10%; text-align: right;">{{ toTitleCase(entities['To']?.node) }}</th>
      <th scope="col" style="width: 28%">{{ toTitleCase(entities['Project name']?.node) }}</th>
      <th scope="col" style="width: 16%">{{ toTitleCase(entities['Industry']?.node) }}</th>
      <th scope="col" style="width: 16%">{{ toTitleCase(entities['Project type']?.node) }}</th>
      <th scope="col" style="width: 15%">{{ toTitleCase(entities['Role']?.node) }}</th>
    </tr>
  </thead>
  <tbody
    *ngFor="let project of truncatorService.truncated(sorterService.sorted(filtered.Projects)); let i = index; trackBy: trackByFn">
    <tr [ngClass]="{
        'contemporary': getDecryptedProjectPeriod(project) === 'Contemporary Period',
        'warning': getDecryptedProjectPeriod(project) === 'Modern Age',
        'info': getDecryptedProjectPeriod(project) === 'Renaissance',
        'success': getDecryptedProjectPeriod(project) === 'Dark Ages',
        'tryKeepTogether': portfolioService.toolbarService.pagination }" class="list-row">
      <td style="text-align: right;">{{ project['Id'] }}</td>
      <td style="text-align: right;">{{ getJsDateValueFromExcel(project['From']) | date:dateFormat }}</td>
      <td style="text-align: right;">{{ getJsDateValueFromExcel(project['To']) | date:dateFormat }}</td>
      <td>
        <a [ngStyle]="getFrequencyStyle(frequency(project))"
          title="{{ frequency(project)[1].Label + '\n\n' + ui['Go to this project']?.text }}"
          href="/{{ componentName }}#project{{ project['Id'] }}">{{ project['Project name'] }}</a>
      </td>
      <td>{{ project['Industry'] }}</td>
      <td>{{ project['Project type'] }}</td>
      <td>{{ project['Role'] }}</td>
    </tr>
  </tbody>
</table>
<ng-container *ngIf="truncatorService.remainingLength(filtered.Projects) > 0">
  <span class="more">+{{ truncatorService.remainingLength(filtered.Projects) }}&nbsp;more… </span>
</ng-container>