angular-4-data-table/libs/datatable/src/components/table/table.component.html at 2d4ef6704f485126b489ec6349173948905a30a3 · brunano21/angular-4-data-table · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<div class="data-table-wrapper">
  <span class="sr-only" role="status" aria-live="polite" aria-atomic="false" aria-relevant="text">
    <span [textContent]="reloadNotification"></span>
    <span [textContent]="paginationNotification"></span>
    <span [textContent]="sortNotification"></span>
    <span [textContent]="columnSelectorNotification"></span>
  </span>

  <data-table-header *ngIf="header"></data-table-header>

  <div class="data-table-box">
    <table class="table data-table" [id]="id">
      <caption class="sr-only" [textContent]="title"></caption>
      <thead>
      <tr>
        <td [hide]="!expandColumnVisible" class="expand-column-header">
        </td>
        <th scope="col" [hide]="!indexColumnVisible" class="index-column-header">
          <span [textContent]="indexColumnHeader"></span>
        </th>
        <td [hide]="!selectColumnVisible" class="select-column-header">
          <input [hide]="!multiSelect"
                 type="checkbox"
                 [(ngModel)]="selectAllCheckbox"
                 [disabled]="itemCount === 0"
                 [title]="labels.selectAllRows"
                 [attr.aria-label]="labels.selectAllRows"/>
        </td>
        <th *ngFor="let column of columns, index as i" #th
            [hide]="!column.visible"
            [class.sortable]="column.sortable"
            [class.resizable]="column.resizable"
            scope="col"
            [attr.aria-sort]="column.sortable ? (column.property === sortBy ? (sortAsc ? 'ascending' : 'descending') : 'none') : null"
            [ngClass]="column.styleClassObject" class="column-header" [style.width]="column.width | px" >
          <button *ngIf="column.sortable" (click)="headerClicked(column, $event)"
                  [attr.aria-controls]="column.sortable ? id : null"
                  [disabled]="itemCount === 0"
                  [attr.aria-labelledby]="'col-'+id+'-'+i"
                  [title]="!sortAsc ? labels.sortAscending : labels.sortDescending">
            <span *ngIf="!column.headerTemplate" [id]="'col-'+id+'-'+i"
                  [textContent]="column.header"></span>
            <span *ngIf="column.headerTemplate" [ngTemplateOutlet]="column.headerTemplate"
                  [ngTemplateOutletContext]="{column: column}"></span>
            <span class="column-sort-icon" *ngIf="column.sortable">
              <i [hide]="column.property === sortBy" class="fa fa-sort column-sortable-icon"
                aria-hidden="true"></i>
              <i [hide]="column.property !== sortBy" class="fa"
                [ngClass]="{'fa-sort-asc': sortAsc, 'fa-sort-desc': !sortAsc}" aria-hidden="true"></i>
            </span>
            <span *ngIf="column.resizable" class="column-resize-handle"
                  (mousedown)="resizeColumnStart($event, column, th)"></span>
          </button>
          <span *ngIf="!column.sortable">
            <span *ngIf="!column.headerTemplate"
                  [textContent]="column.header"></span>
            <span *ngIf="column.headerTemplate" [ngTemplateOutlet]="column.headerTemplate"
                  [ngTemplateOutletContext]="{column: column}"></span>
            <span class="column-sort-icon" *ngIf="column.sortable">
               <i [hide]="column.property === sortBy" class="fa fa-sort column-sortable-icon"
                  aria-hidden="true"></i>
               <i [hide]="column.property !== sortBy" class="fa"
                  [ngClass]="{'fa-sort-asc': sortAsc, 'fa-sort-desc': !sortAsc}" aria-hidden="true"></i>
            </span>
            <span *ngIf="column.resizable" class="column-resize-handle"
                  (mousedown)="resizeColumnStart($event, column, th)"></span>
          </span>
        </th>
      </tr>
      </thead>
      <tbody *ngFor="let item of items; let index=index" class="data-table-row-wrapper"
             dataTableRow #row [item]="item" [index]="index" (selectedChange)="onRowSelectChanged(row)" (rowExpandEvent)="onRowExpandButtonClicked(row,$event)">
      </tbody>
      <tbody *ngIf="itemCount === 0 && noDataMessage">
        <tr>
          <td [attr.colspan]="columnCount">{{ noDataMessage }}</td>
        </tr>
      </tbody>
      <tbody class="substitute-rows" *ngIf="pagination && substituteRows">
      <tr *ngFor="let item of substituteItems, let index = index"
          [class.row-odd]="(index + items.length) % 2 === 0"
          [class.row-even]="(index + items.length) % 2 === 1" role="presentation">
        <td [hide]="!expandColumnVisible"></td>
        <td [hide]="!indexColumnVisible">&nbsp;</td>
        <td [hide]="!selectColumnVisible"></td>
        <td *ngFor="let column of columns" [hide]="!column.visible">
      </tr>
      </tbody>
    </table>
    <div class="busy" *ngIf="showReloading && reloading">
      <i><i class="fa fa-spin fa-cog fa-2x"></i></i>
    </div>
  </div>

  <data-table-pagination *ngIf="pagination" [limits]="pageLimits"></data-table-pagination>
</div>