openproject/frontend/app/components/wp-table/wp-table.directive.html

<div class="work-packages-split-view--tabletimeline-content">
  <div class="work-packages-tabletimeline--table-side work-package-table--container">
    <table class="keyboard-accessible-list generic-table work-package-table">
      <colgroup>
        <col highlight-col *ngFor="let column of columns"/>
        <col highlight-col/>
      </colgroup>
      <caption class="hidden-for-sighted">
        <span>{{text.tableSummary}}</span>
        <span id="wp-table-sort-summary"></span>
        <span>{{text.tableSummaryHints}}</span>
      </caption>
      <thead class="-sticky">
      <tr>
        <th *ngFor="let column of columns"
            class="wp-table--table-header">
          <sortHeader [headerColumn]="column"
                      [locale]="column.custom_field && columns.custom_field.name_locale || locale"

                      hasDropdownMenu
                      [hasDropdownMenu-locals]="{'columns':columns, 'column':column}"
                      [hasDropdownMenu-collisionContainer]="'.work-packages-tabletimeline--table-side'"
                      [hasDropdownMenu-target]="'columnContextMenu'">
          </sortHeader>
        </th>
        <th class="wp-table--context-menu-column -short hide-when-print">
          <div class="generic-table--sort-header-outer">
            <accessible-by-keyboard
                (execute)="openColumnsModal()"
                linkClass="wp-table--columns-selection"
                linkTitle="{{text.addColumns}}"
                linkAriaLabel="{{text.addColumns}}"
            >
              <op-icon icon-classes="icon-button icon-small icon-add"></op-icon>
            </accessible-by-keyboard>
          </div>
        </th>
      </tr>
      </thead>
      <tbody class="work-package--empty-tbody" *ngIf="query.hasError || rowcount === 0">
      <tr id="empty-row-notification">
        <td [attr.colspan]="columns.length + 1">
          <span *ngIf="!query.hasError">
            <op-icon icon-classes="icon-info1 icon-context"></op-icon>
            <strong>{{text.noResults.title}}</strong>
            <span>{{text.noResults.description}}</span>
          </span>
          <span *ngIf="query.hasError">
            <op-icon icon-classes="wp-table--faulty-query-icon icon-warning icon-context"></op-icon>
            <strong>{{text.faultyQuery.title}}</strong>
            <span>{{text.faultyQuery.description}}</span>
          </span>
        </td>
      </tr>
      </tbody>
      <tbody class="results-tbody work-package--results-tbody">
      </tbody>
      <tbody *ngIf="!!tableElement"
             wpInlineCreate
             [wp-inline-create--table]="workPackageTable"
             [wp-inline-create--project-identifier]="projectIdentifier"
             [wp-inline-create--hierarchical-injector]="injector"
      >
      </tbody>
      <tfoot>
      <tr wpTableSumsRow></tr>
      </tfoot>
    </table>
  </div>

  <div class="work-packages--tabletimeline--timeline--resizer hidden-for-mobile hide-when-print">
    <wp-resizer [elementClass]="'work-packages-tabletimeline--timeline-side'"
                [resizeEvent]="'wp-resize.timeline'"
                [localStorageKey]="'openProject-timelineFlexBasis'"></wp-resizer>
  </div>

  <div class="work-packages-tabletimeline--timeline-side">
    <wp-timeline-container></wp-timeline-container>
  </div>
</div>