1 <cd-alert-panel type=
"error"
3 i18n
>Failed to load data.
</cd-alert-panel>
5 <div class=
"dataTables_wrapper">
7 <div *
ngIf=
"onlyActionHeader"
8 class=
"dataTables_header clearfix">
9 <div class=
"cd-datatable-actions">
10 <ng-content select=
".only-table-actions"></ng-content>
13 <div class=
"dataTables_header clearfix"
16 <div class=
"cd-datatable-actions">
17 <ng-content select=
".table-actions"></ng-content>
22 <ng-content select=
".table-filters"></ng-content>
25 <!-- column filters -->
26 <div *
ngIf=
"columnFilters.length !== 0"
27 class=
"btn-group widget-toolbar">
29 class=
"btn-group tc_filter_name">
31 class=
"btn btn-light dropdown-toggle"
32 data-toggle=
"dropdown">
33 <i [ngClass]=
"[icons.large, icons.filter]"></i>
34 {{ selectedFilter.column.name }}
37 class=
"dropdown-menu px-1"
39 <li *
ngFor=
"let filter of columnFilters"
43 (click)=
"onSelectFilter(filter); false">{{ filter.column.name }}
</a>
48 class=
"btn-group tc_filter_option">
50 class=
"btn btn-light dropdown-toggle"
51 [class.disabled]=
"selectedFilter.options.length === 0"
52 data-toggle=
"dropdown">
53 {{ selectedFilter.value ? selectedFilter.value.formatted: 'Any' }}
56 class=
"dropdown-menu px-1"
58 <li *
ngFor=
"let option of selectedFilter.options"
62 (click)=
"onChangeFilter(selectedFilter, option); false">{{ option.formatted }}
63 <i *
ngIf=
"selectedFilter.value !== undefined && (selectedFilter.value.raw === option.raw)"
64 [ngClass]=
"[icons.check]"></i>
70 <!-- end column filters -->
73 <div class=
"input-group search"
75 <span class=
"input-group-prepend">
76 <span class=
"input-group-text">
77 <i [ngClass]=
"[icons.search]"></i>
80 <input class=
"form-control"
83 (keyup)=
"updateFilter()">
84 <div class=
"input-group-append">
87 (click)=
"onClearSearch()">
88 <i class=
"icon-prepend {{ icons.destroy }}"></i>
94 <!-- pagination limit -->
95 <div class=
"input-group dataTables_paginate">
96 <input class=
"form-control"
100 [value]=
"userConfig.limit"
101 (click)=
"setLimit($event)"
102 (keyup)=
"setLimit($event)"
103 (blur)=
"setLimit($event)">
105 <!-- end pagination limit-->
107 <!-- show hide columns -->
108 <div class=
"widget-toolbar">
111 class=
"dropdown tc_menuitem tc_menuitem_cluster">
113 class=
"btn btn-light dropdown-toggle tc_columnBtn"
114 data-toggle=
"dropdown">
115 <i [ngClass]=
"[icons.large, icons.table]"></i>
118 class=
"dropdown-menu px-3">
119 <ng-container *
ngFor=
"let column of columns">
120 <li *
ngIf=
"column.name !== ''" >
121 <div class=
"custom-control custom-checkbox">
122 <input class=
"custom-control-input"
124 (change)=
"toggleColumn($event)"
127 [checked]=
"!column.isHidden">
128 <label class=
"custom-control-label"
129 [for]=
"column.prop">{{ column.name }}
</label>
136 <!-- end show hide columns -->
138 <!-- refresh button -->
139 <div class=
"widget-toolbar tc_refreshBtn"
140 *
ngIf=
"fetchData.observers.length > 0">
142 <button type=
"button"
143 class=
"btn btn-light"
144 (click)=
"refreshBtn()">
145 <i [ngClass]=
"[icons.large, icons.refresh]"
146 [class.fa-spin]=
"updating || loadingIndicator"></i>
149 <!-- end refresh button -->
151 <div class=
"dataTables_header clearfix"
152 *
ngIf=
"toolHeader && columnFiltered">
153 <!-- filter chips for column filters -->
154 <div class=
"filter-chips">
155 <span *
ngFor=
"let filter of columnFilters">
156 <span *
ngIf=
"filter.value"
157 class=
"badge badge-info mr-2">
158 <span class=
"mr-2">{{ filter.column.name }}: {{ filter.value.formatted }}
</span>
159 <a class=
"badge-remove"
160 (click)=
"onChangeFilter(filter); false">
161 <i [ngClass]=
"[icons.destroy]"
162 aria-hidden=
"true"></i>
166 <a class=
"tc_clearSelections"
168 (click)=
"onClearFilters(); false">
169 <ng-container i18n
>Clear filters
</ng-container>
172 <!-- end filter chips for column filters -->
174 <ngx-datatable #table
175 class=
"bootstrap cd-datatable"
176 [cssClasses]=
"paginationClasses"
177 [selectionType]=
"selectionType"
178 [selected]=
"selection.selected"
179 (select)=
"onSelect($event)"
180 [sorts]=
"userConfig.sorts"
181 (sort)=
"changeSorting($event)"
182 [columns]=
"tableColumns"
183 [columnMode]=
"columnMode"
185 [rowClass]=
"getRowClass()"
186 [headerHeight]=
"header ? 'auto' : 0"
187 [footerHeight]=
"footer ? 'auto' : 0"
188 [limit]=
"userConfig.limit > 0 ? userConfig.limit : undefined"
189 [loadingIndicator]=
"loadingIndicator"
190 [rowIdentity]=
"rowIdentity()"
191 [rowHeight]=
"'auto'">
193 <!-- Row Detail Template -->
194 <ngx-datatable-row-detail rowHeight=
"auto"
196 <ng-template let-row=
"row"
197 let-expanded=
"expanded"
198 ngx-datatable-row-detail-template
>
199 <!-- Table Details -->
200 <ng-content select=
"[cdTableDetail]"></ng-content>
202 </ngx-datatable-row-detail>
204 <ngx-datatable-footer>
205 <ng-template ngx-datatable-footer-template
206 let-rowCount=
"rowCount"
207 let-pageSize=
"pageSize"
208 let-selectedCount=
"selectedCount"
209 let-curPage=
"curPage"
211 let-isVisible=
"isVisible">
212 <div class=
"page-count">
213 <span *
ngIf=
"selectionType">
214 {{ selectedCount }}
<ng-container i18n=
"X selected">selected
</ng-container> /
216 <span *
ngIf=
"rowCount != data?.length">
217 {{ rowCount }}
<ng-container i18n=
"X found">found
</ng-container> /
220 {{ data?.length ||
0 }}
<ng-container i18n=
"X total">total
</ng-container>
223 <datatable-pager [pagerLeftArrowIcon]=
"paginationClasses.pagerLeftArrow"
224 [pagerRightArrowIcon]=
"paginationClasses.pagerRightArrow"
225 [pagerPreviousIcon]=
"paginationClasses.pagerPrevious"
226 [pagerNextIcon]=
"paginationClasses.pagerNext"
230 [hidden]=
"!((rowCount / pageSize) > 1)"
231 (change)=
"table.onFooterPage($event)">
234 </ngx-datatable-footer>
238 <!-- cell templates that can be accessed from outside -->
239 <ng-template #tableCellBoldTpl
241 <strong>{{ value }}
</strong>
244 <ng-template #sparklineTpl
247 <cd-sparkline [data]=
"value"
248 [isBinary]=
"row.cdIsBinary"></cd-sparkline>
251 <ng-template #routerLinkTpl
254 <a [routerLink]=
"[row.cdLink]"
255 [queryParams]=
"row.cdParams">{{ value }}
</a>
258 <ng-template #checkIconTpl
260 <i [ngClass]=
"[icons.check]"
261 [hidden]=
"!(value | boolean)"></i>
264 <ng-template #perSecondTpl
270 <ng-template #executingTpl
273 <i [ngClass]=
"[icons.spinner, icons.spin]"
274 *
ngIf=
"row.cdExecuting"></i>
276 <span *
ngIf=
"row.cdExecuting"
277 class=
"text-muted italic">({{ row.cdExecuting }})
</span>
280 <ng-template #classAddingTpl
282 <span class=
"{{useCustomClass(value)}}">{{ value }}
</span>
285 <ng-template #badgeTpl
288 <span *
ngFor=
"let item of (value | array); last as last">
290 [ngClass]=
"(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'badge-primary')"
291 *
ngIf=
"(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item">
292 {{ (column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item }}
294 <span *
ngIf=
"!last"> </span>
301 <span>{{ value | map:column?.customTemplateConfig }}
</span>
304 <ng-template #truncateTpl
307 <span data-toggle=
"tooltip"
308 [title]=
"value">{{ value | truncate:column?.customTemplateConfig?.length:column?.customTemplateConfig?.omission }}
</span>
311 <ng-template #rowDetailsTpl
313 let-isExpanded=
"expanded"
314 ngx-datatable-cell-template
>
315 <a href=
"javascript:void(0)"
316 [class.expand-collapse-icon-right]=
"!isExpanded"
317 [class.expand-collapse-icon-down]=
"isExpanded"
318 class=
"expand-collapse-icon tc_expand-collapse"
319 title=
"Expand/Collapse Row"
321 (click)=
"toggleExpandRow(row, isExpanded)">