<tr>
  <td width="1%"></td>
  <th
    ng-if="indexPattern.timeFieldName"
    data-test-subj="docTableHeaderField"
    scope="col"
  >
    <span>Time <button
      id="docTableHeaderFieldSort{{indexPattern.timeFieldName}}"
      tabindex="0"
      aria-label="{{ getAriaLabelForColumn(indexPattern.timeFieldName) }}"
      class="docTableHeaderButton"
      ng-class="headerClass(indexPattern.timeFieldName)"
      role="button"
      ng-click="cycleSortOrder(indexPattern.timeFieldName)"
      tooltip="Sort by time"
    ></button>
    </span>
  </th>
  <th
    ng-repeat="name in columns"
    data-test-subj="docTableHeaderField"
    scope="col"
  >
    <span class="table-header-name">
      {{name | shortDots}}
      <button
        id="docTableHeaderFieldSort{{name}}"
        tabindex="0"
        aria-label="{{ getAriaLabelForColumn(name) }}"
        class="docTableHeaderButton"
        ng-class="headerClass(name)"
        ng-click="cycleSortOrder(name)"
        tooltip="{{tooltip(name)}}"
        tooltip-append-to-body="1"
      ></button>
    </span>
    <button
      class="fa fa-remove table-header-move"
      ng-click="onRemoveColumn(name)"
      ng-if="canRemoveColumn(name)"
      tooltip-append-to-body="1"
      tooltip="Remove column"
      aria-label="Remove {{name}} column"
    ></button>
    <button
      class="fa fa-angle-double-left table-header-move"
      ng-click="moveColumnLeft(name)"
      ng-if="canMoveColumnLeft(name)"
      tooltip-append-to-body="1"
      tooltip="Move column to the left"
      aria-label="Move {{name}} column to the left"
    ></button>
    <button
      class="fa fa-angle-double-right table-header-move"
      ng-click="moveColumnRight(name)"
      ng-if="canMoveColumnRight(name)"
      tooltip-append-to-body="1"
      tooltip="Move column to the right"
      aria-label="Move {{name}} column to the right"
    ></button>
  </th>
</tr>
