1 <div class=
"dataTables_wrapper">
3 <div *
ngIf=
"onlyActionHeader"
4 class=
"dataTables_header clearfix">
5 <div class=
"cd-datatable-actions">
6 <ng-content select=
".only-table-actions"></ng-content>
9 <div class=
"dataTables_header clearfix"
12 <div class=
"cd-datatable-actions">
13 <ng-content select=
".table-actions"></ng-content>
17 <!-- column filters -->
18 <div *
ngIf=
"columnFilters.length !== 0"
19 class=
"btn-group widget-toolbar">
21 placement=
"bottom-right"
22 class=
"tc_filter_name">
23 <button ngbDropdownToggle
26 <i [ngClass]=
"[icons.large, icons.filter]"></i>
27 {{ selectedFilter.column.name }}
30 <ng-container *
ngFor=
"let filter of columnFilters">
31 <button ngbDropdownItem
32 (click)=
"onSelectFilter(filter); false">{{ filter.column.name }}
</button>
38 placement=
"bottom-right"
39 class=
"tc_filter_option">
40 <button ngbDropdownToggle
42 [class.disabled]=
"selectedFilter.options.length === 0">
43 {{ selectedFilter.value ? selectedFilter.value.formatted: 'Any' }}
46 <ng-container *
ngFor=
"let option of selectedFilter.options">
47 <button ngbDropdownItem
48 (click)=
"onChangeFilter(selectedFilter, option); false">
49 {{ option.formatted }}
50 <i *
ngIf=
"selectedFilter.value !== undefined && (selectedFilter.value.raw === option.raw)"
51 [ngClass]=
"[icons.check]"></i>
57 <!-- end column filters -->
60 <div class=
"input-group search"
62 <span class=
"input-group-text">
63 <i [ngClass]=
"[icons.search]"></i>
65 <input aria-label=
"search"
69 (keyup)=
"updateFilter()">
73 (click)=
"onClearSearch()">
74 <i class=
"icon-prepend {{ icons.destroy }}"></i>
79 <!-- pagination limit -->
80 <div class=
"input-group dataTables_paginate"
82 <input aria-label=
"table pagination"
87 [value]=
"userConfig.limit"
88 (click)=
"setLimit($event)"
89 (keyup)=
"setLimit($event)"
90 (blur)=
"setLimit($event)">
92 <!-- end pagination limit-->
94 <!-- show hide columns -->
95 <div class=
"widget-toolbar">
99 <button ngbDropdownToggle
100 class=
"btn btn-light tc_columnBtn"
101 title=
"toggle columns">
102 <i [ngClass]=
"[icons.large, icons.table]"></i>
104 <div ngbDropdownMenu
>
105 <ng-container *
ngFor=
"let column of columns">
106 <button ngbDropdownItem
107 *
ngIf=
"column.name !== ''"
108 (click)=
"toggleColumn(column); false;">
109 <div class=
"custom-control custom-checkbox py-0">
110 <input class=
"custom-control-input"
113 id=
"{{ column.prop }}{{ tableName }}"
114 [checked]=
"!column.isHidden">
115 <label class=
"custom-control-label"
116 for=
"{{ column.prop }}{{ tableName }}">{{ column.name }}
</label>
123 <!-- end show hide columns -->
125 <!-- refresh button -->
126 <div class=
"widget-toolbar tc_refreshBtn"
127 *
ngIf=
"fetchData.observers.length > 0">
129 <button type=
"button"
130 [class]=
"'btn btn-' + status.type"
131 [ngbTooltip]=
"status.msg"
132 (click)=
"refreshBtn()"
134 <i [ngClass]=
"[icons.large, icons.refresh]"
135 [class.fa-spin]=
"updating || loadingIndicator"></i>
138 <!-- end refresh button -->
140 <div class=
"dataTables_header clearfix"
141 *
ngIf=
"toolHeader && columnFiltered">
142 <!-- filter chips for column filters -->
143 <div class=
"filter-chips">
144 <span *
ngFor=
"let filter of columnFilters">
145 <span *
ngIf=
"filter.value"
146 class=
"badge badge-info me-2">
147 <span class=
"me-2">{{ filter.column.name }}: {{ filter.value.formatted }}
</span>
148 <a class=
"badge-remove"
149 (click)=
"onChangeFilter(filter); false">
150 <i [ngClass]=
"[icons.destroy]"
151 aria-hidden=
"true"></i>
155 <a class=
"tc_clearSelections"
157 (click)=
"onClearFilters(); false">
158 <ng-container i18n
>Clear filters
</ng-container>
161 <!-- end filter chips for column filters -->
163 <ngx-datatable #table
164 class=
"bootstrap cd-datatable"
165 [cssClasses]=
"paginationClasses"
166 [selectionType]=
"selectionType"
167 [selected]=
"selection.selected"
168 (select)=
"onSelect($event)"
169 [sorts]=
"userConfig.sorts"
170 (sort)=
"changeSorting($event)"
171 [columns]=
"tableColumns"
172 [columnMode]=
"columnMode"
174 [rowClass]=
"getRowClass()"
175 [headerHeight]=
"header ? 'auto' : 0"
176 [footerHeight]=
"footer ? 'auto' : 0"
178 [externalPaging]=
"serverSide"
179 [externalSorting]=
"serverSide"
180 [limit]=
"userConfig.limit > 0 ? userConfig.limit : undefined"
181 [offset]=
"userConfig.offset >= 0 ? userConfig.offset : 0"
182 (page)=
"changePage($event)"
183 [loadingIndicator]=
"loadingIndicator"
184 [rowIdentity]=
"rowIdentity()"
185 [rowHeight]=
"'auto'">
187 <!-- Row Selection Template-->
188 <ng-template #rowSelectionTpl
190 let-isSelected=
"isSelected"
191 ngx-datatable-cell-template
>
192 <input type=
"checkbox"
193 [attr.aria-label]=
"isSelected ? 'selected' : 'select'"
194 [checked]=
"isSelected"
195 class=
"cd-datatable-checkbox" />
198 <!-- Row Detail Template -->
199 <ngx-datatable-row-detail rowHeight=
"auto"
201 <ng-template let-row=
"row"
202 let-expanded=
"expanded"
203 ngx-datatable-row-detail-template
>
204 <!-- Table Details -->
205 <ng-content select=
"[cdTableDetail]"></ng-content>
207 </ngx-datatable-row-detail>
209 <ngx-datatable-footer>
210 <ng-template ngx-datatable-footer-template
211 let-rowCount=
"rowCount"
212 let-pageSize=
"pageSize"
213 let-selectedCount=
"selectedCount"
214 let-curPage=
"curPage"
216 let-isVisible=
"isVisible">
217 <div class=
"page-count">
218 <span *
ngIf=
"selectionType">
219 {{ selectedCount }}
<ng-container i18n=
"X selected">selected
</ng-container> /
222 <!-- rowCount might have different semantics with or without serverSide.
223 We treat serverSide (backend-driven tables) as a specific case.
225 <span *
ngIf=
"!serverSide else serverSideTpl">
226 <span *
ngIf=
"rowCount != data?.length">
227 {{ rowCount }}
<ng-container i18n=
"X found">found
</ng-container> /
229 {{ data?.length ||
0 }}
<ng-container i18n=
"X total">total
</ng-container>
232 <ng-template #serverSideTpl
>
234 {{ data?.length ||
0 }}
<ng-container i18n=
"X found">found
</ng-container> /
235 {{ rowCount }}
<ng-container i18n=
"X total">total
</ng-container>
239 <cd-table-pagination [page]=
"curPage"
242 [hidden]=
"!((rowCount / pageSize) > 1)"
243 (pageChange)=
"table.onFooterPage($event)"></cd-table-pagination>
245 </ngx-datatable-footer>
249 <!-- cell templates that can be accessed from outside -->
250 <ng-template #tableCellBoldTpl
252 <strong>{{ value }}
</strong>
255 <ng-template #sparklineTpl
258 <cd-sparkline [data]=
"value"
259 [isBinary]=
"row.cdIsBinary"></cd-sparkline>
262 <ng-template #routerLinkTpl
265 <a [routerLink]=
"[row.cdLink]"
266 [queryParams]=
"row.cdParams">{{ value }}
</a>
269 <ng-template #checkIconTpl
271 <i [ngClass]=
"[icons.check]"
272 [hidden]=
"!(value | boolean)"></i>
275 <ng-template #perSecondTpl
278 {{ value | dimless }} /s
281 <ng-template #executingTpl
285 <i [ngClass]=
"[icons.spinner, icons.spin]"
286 *
ngIf=
"row.cdExecuting"></i>
287 <span [ngClass]=
"column?.customTemplateConfig?.valueClass">
290 <span *
ngIf=
"row.cdExecuting"
291 [ngClass]=
"column?.customTemplateConfig?.executingClass ? column.customTemplateConfig.executingClass : 'text-muted italic'">({{ row.cdExecuting }})
</span>
294 <ng-template #classAddingTpl
296 <span class=
"{{ value | pipeFunction:useCustomClass:this }}">{{ value }}
</span>
299 <ng-template #badgeTpl
302 <span *
ngFor=
"let item of (value | array); last as last">
304 [ngClass]=
"(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'badge-primary')"
305 *
ngIf=
"(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item">
306 {{ (column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item }}
308 <span *
ngIf=
"!last"> </span>
315 <span>{{ value | map:column?.customTemplateConfig }}
</span>
318 <ng-template #truncateTpl
321 <span data-toggle=
"tooltip"
322 [title]=
"value">{{ value | truncate:column?.customTemplateConfig?.length:column?.customTemplateConfig?.omission }}
</span>
325 <ng-template #rowDetailsTpl
327 let-isExpanded=
"expanded"
328 ngx-datatable-cell-template
>
329 <a href=
"javascript:void(0)"
330 [class.expand-collapse-icon-right]=
"!isExpanded"
331 [class.expand-collapse-icon-down]=
"isExpanded"
332 class=
"expand-collapse-icon tc_expand-collapse"
333 title=
"Expand/Collapse Row"
335 (click)=
"toggleExpandRow(row, isExpanded, $event)">
339 <ng-template #timeAgoTpl
341 <span data-toggle=
"tooltip"
342 [title]=
"value | cdDate">{{ value | relativeDate }}
</span>
345 <ng-template #pathTpl
347 <span data-toggle=
"tooltip"
349 class=
"font-monospace">{{ value | path }}
350 <cd-copy-2-clipboard-button *
ngIf=
"value"
353 [showIconOnly]=
"true">
354 </cd-copy-2-clipboard-button>