openproject/public/templates/timelines/timeline_table.html

<table class="tl-main-table">
  <thead>
    <tr>
      <th class="tl-first-column" ng-style="{height: height}">{{I18n.t('js.timelines.filter.column.name')}}</th>
      <th ng-repeat="key in columns">{{I18n.t('js.timelines.filter.column.' + key)}}</th>
    </tr>
  </thead>

  <tbody>
    <tr timeline-grouping-label
        ng-repeat-start="row in rows"
        ng-if="isGrouping"
        ng-show="showGroupingLabel()">
      <td class="tl-grouping" colspan="{{columns.length + 1}}">
        <span class="tl-word-ellipsis">{{row.firstLevelGroupingName}}</span>
      </td>
    </tr>

    <tr timeline-table-row
        ng-repeat-end
        ng-class="{
          'tl-first-row': $first,
          'tl-last-row': $last,
          'tl-project-row': rowObjectType === 'Project'
        }"
        ng-if="!(hideTreeRoot && $first || rowObjectType === 'Project' && excludeEmpty && !row.childNodes)"
        ng-show="rowObjectType === 'Project' && row.level === 1 || (row.ancestors | ancestorsExpanded)">

      <td ng-class="[
            'tl-first-column',
            'tl-indent-' + indent,
            row.childNodes.length > 0 && (row.isExpanded() && 'tl-expanded' || 'tl-collapsed')
          ]">
        <a ng-click="row.expanded = !row.expanded" ng-if="row.childNodes.length > 0">{{row.expanded && '-' || '+'}}</a>

        <span class="tl-word-ellipsis">
          <span ng-if="changeDetected">
            <a title="{{I18n.t('js.timelines.change')}}"
               ng-class="{
                 'icon tl-icon-added': rowObject.isNewlyAdded(),
                 'icon tl-icon-deleted': rowObject.isDeleted(),
                 'icon tl-icon-changed': !rowObject.isDeleted() && !rowObject.isNewlyAdded()
               }" />
          </span>

          <span>
            <a modal title="{{row.text}}" target="row.url" ng-class="{'tl-discreet-link': true, 'tl-project': rowObjectType === 'Project'}">{{row.text}}</a>
          </span>
        </span>
      </td>

      <td option-column
          ng-repeat="option in columns">
        <span class="tl-historical" ng-show="rowObject.does_historical_differ(option)">
          <a href="javascript://" title="{{I18n.t('js.timelines.change')}}"
             ng-class="[
               'icon',
               'tl-icon-' + isDateOption(option) && (rowObject | historicalDateKind:option) || 'tl-icon-changed'
             ]">
            {{rowObject.historical()[option] || I18n.t('js.timelines.empty')}}
          </a>
          <br/>
        </span>

        <span ng-class="[
          'tl-column',
          isDateOption(option) && 'tl-current',
          isDateOption(option) && rowObject.does_historical_differ(option) && 'tl-' + (rowObject | historicalDateKind:option)
        ]">
          {{rowObject | getOptionColumn:option}}
        </span>
      </td>
    </tr>
  </tbody>

</table>