UNPKG

6.92 kBtext/x-handlebars-templateView Raw
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 <!-- Table -->
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 <!-- checkbox th -->
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 <!-- sortable th -->
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 <!-- no sort th -->
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 <!-- the first cell of each row is a th[scope="row"], otherwise it is a td -->
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 <!-- truncated new markup -->
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 <!-- default (non truncated) -->
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 <!-- truncated new markup -->
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 <!-- default (non truncated) -->
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 <!-- Expandable child row -->
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