1 |
|
2 | Copyright IBM Corp. 2016, 2018
|
3 |
|
4 | This source code is licensed under the Apache-2.0 license found in the
|
5 | LICENSE file in the root directory of this source tree.
|
6 | -->
|
7 |
|
8 |
|
9 | <table class="{{@root.prefix}}--data-table {{#if truncate}}{{@root.prefix}}--data-table--overflow-truncate{{/if}}{{#if sticky}} {{@root.prefix}}--data-table--sticky-header{{/if}}{{#if zebra}} {{@root.prefix}}--data-table--zebra{{/if}}{{#if small}} {{@root.prefix}}--data-table--compact{{/if}}{{#if tall}} {{@root.prefix}}--data-table--tall{{/if}}{{#if sort}} {{@root.prefix}}--data-table--sort{{/if}}{{#if displayOverflowMenus}} {{@root.prefix}}--data-table--visible-overflow-menu{{/if}} {{#if short}}{{@root.prefix}}--data-table--short{{/if}} {{#if static}}{{@root.prefix}}--data-table--static{{/if}}" >
|
10 | <thead>
|
11 | <tr>
|
12 | {{#each columns}}
|
13 | <th {{#if checkbox}} class="{{@root.prefix}}--table-column-checkbox" {{/if}}{{#if section}}class="{{@root.prefix}}--table-expand"{{/if}} {{#if numerical}} class="{{@root.prefix}}--data-table--numerical-cell"{{/if}} {{#if section}} data-event="expandAll"{{/if}}>
|
14 |
|
15 | {{#if checkbox}}
|
16 | <input data-event="select-all" id="{{checkboxId}}" class="{{@root.prefix}}--checkbox" type="checkbox" value="{{checkboxValue}}" name="{{checkboxName}}">
|
17 | <label for="{{checkboxId}}" class="{{@root.prefix}}--checkbox-label" aria-label="{{title}}"></label>
|
18 | {{else if (and section ../hasExpandAll)}}
|
19 | <button class="{{@root.prefix}}--table-expand__button">
|
20 | {{ carbon-icon 'ChevronRight16' class=(add @root.prefix '--table-expand__svg') }}
|
21 | </button>
|
22 | {{else if (not menu)}}
|
23 |
|
24 | {{#if sortable}}
|
25 | <button class="{{@root.prefix}}--table-sort" data-event="sort" title="{{title}}">
|
26 | <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
|
27 | {{carbon-icon 'ArrowDown16' class=(add @root.prefix '--table-sort__icon')}}
|
28 | {{carbon-icon 'Arrows16' class=(add @root.prefix '--table-sort__icon-unsorted')}}
|
29 | {{#if ../truncate}}
|
30 | <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
|
31 | <span class="{{@root.prefix}}--tooltip__caret"></span>
|
32 | <p class="{{@root.prefix}}--tooltip__text">{{title}}</p>
|
33 | </div>
|
34 | {{/if}}
|
35 | </button>
|
36 |
|
37 | {{else if small}}
|
38 | {{title}}
|
39 | {{else}}
|
40 | <span class="{{@root.prefix}}--table-header-label">{{title}}</span>
|
41 | {{/if}}
|
42 | {{/if}}
|
43 | </th>
|
44 | {{/each}}
|
45 | </tr>
|
46 | </thead>
|
47 | <tbody>
|
48 | {{#each rows as |row|}}
|
49 |
|
50 | <tr{{#if row.sectionContent}} class="{{@root.prefix}}--parent-row" data-parent-row {{/if}} {{#if row.disabled}} class="{{@root.prefix}}--row-disabled" {{/if}}>
|
51 | {{#each ../columns as |column index|}}
|
52 | {{#with (lookup row column.name) as |data|}}
|
53 | {{#if @first }}
|
54 | <th {{#if column.numerical}} class="{{@root.prefix}}--data-table--numerical-cell" {{/if}} scope="row">
|
55 |
|
56 | {{#if ../../truncate}}
|
57 | <span class="{{@root.prefix}}--table-cell-content" aria-describedby="label-tooltip">{{data}}
|
58 | {{#if ../../../tall }}
|
59 | {{#if (and row.secondaryText column.secondary)}}
|
60 | <div class="{{@root.prefix}}--data-table--cell-secondary-text">
|
61 | {{row.secondaryText}}
|
62 | </div>
|
63 | {{/if}}
|
64 | {{/if}}
|
65 | </span>
|
66 | <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
|
67 | <span class="{{@root.prefix}}--tooltip__caret"></span>
|
68 | <p class="{{@root.prefix}}--tooltip__text">{{data}}</p>
|
69 | </div>
|
70 |
|
71 | {{else}}
|
72 | {{data}}
|
73 | {{#if ../../../tall}}
|
74 | {{#if (and row.secondaryText column.secondary)}}
|
75 | <div class="{{@root.prefix}}--data-table--cell-secondary-text">
|
76 | {{row.secondaryText}}
|
77 | </div>
|
78 | {{/if}}
|
79 | {{/if}}
|
80 | {{/if}}
|
81 | </th>
|
82 | {{else}}
|
83 | <td {{#if column.numerical}} class="{{@root.prefix}}--data-table--numerical-cell" {{/if}}>
|
84 |
|
85 | {{#if ../../truncate}}
|
86 | <span class="{{@root.prefix}}--table-cell-content" aria-describedby="label-tooltip">{{data}}
|
87 | {{#if ../../../tall }}
|
88 | {{#if (and row.secondaryText column.secondary)}}
|
89 | <div class="{{@root.prefix}}--data-table--cell-secondary-text">
|
90 | {{row.secondaryText}}
|
91 | </div>
|
92 | {{/if}}
|
93 | {{/if}}
|
94 | </span>
|
95 | <div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="{{@root.prefix}}--tooltip" data-avoid-focus-on-open>
|
96 | <span class="{{@root.prefix}}--tooltip__caret"></span>
|
97 | <p class="{{@root.prefix}}--tooltip__text">{{data}}</p>
|
98 | </div>
|
99 |
|
100 | {{else}}
|
101 | {{data}}
|
102 | {{#if ../../../tall}}
|
103 | {{#if (and row.secondaryText column.secondary)}}
|
104 | <div class="{{@root.prefix}}--data-table--cell-secondary-text">
|
105 | {{row.secondaryText}}
|
106 | </div>
|
107 | {{/if}}
|
108 | {{/if}}
|
109 | {{/if}}
|
110 | </td>
|
111 | {{/if}}
|
112 | {{/with}}
|
113 | {{/each}}
|
114 | </tr>
|
115 |
|
116 | {{#if row.sectionContent}}
|
117 | <tr class="{{@root.prefix}}--expandable-row {{@root.prefix}}--expandable-row--hidden" data-child-row>
|
118 | <td colspan="{{../columns.length}}">
|
119 | <div class="{{@root.prefix}}--child-row-inner-container">
|
120 | {{{row.sectionContent}}}
|
121 | </div>
|
122 | </td>
|
123 | </tr>
|
124 | {{/if}}
|
125 | {{/each}}
|
126 | </tbody>
|
127 | </table>
|
128 | {{#if sticky}}
|
129 | </section>
|
130 | {{/if}}
|
131 |
|
132 | {{#if (not small)}}</div>{{/if}}
|
133 |
|
\ | No newline at end of file |