Table - Column Reorder without Dynamic column
Posted: 15 May 2020, 12:05
I'm creating a table in which I need to reorder the column. We have all the columns in template file which is not the requirement as per Documentation. But my HTML file is very complex and cannot be defined in component file..so how i can achieve reordering..any help?? code for html file is below
Code: Select all
<div class="adhoc_table_wrap">
<p-table
#dt
[value]="adhocTasks"
[columns]="cols"
[rows]="50"
(onPage)="onPage($event)"
[paginator]="true"
[pageLinks]="3"
[totalRecords]="totalRecords"
[rowsPerPageOptions]="[20, 50, 100]"
scrollable="true"
scrollHeight="500"
scrollWidth="1200"
[reorderableColumns]="true"
[lazy]="true"
[responsive]="false"
(onFilter)="onFiltering($event, dt)"
selectionMode="single"
[(selection)]="selectedRow"
(onSort)="buildSort($event)"
[contextMenu]="cm"
>
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 150px">Team</th>
<th style="width: 200px">Ticker</th>
<th *ngIf="!isHidden('industry')" style="width: 150px" pReorderableColumn>
Industry
</th>
<th *ngIf="!isHidden('sector')" style="width: 120px" pReorderableColumn>Sector</th>
<th style="width: 150px">Stage</th>
<th pSortableColumn="priority" style="width: 100px">
Priority
<p-sortIcon field="priority"></p-sortIcon>
</th>
<th style="width: 200px">
Processor
<a
class="assigneeOption assigned"
(click)="
assigneeFilterClick('assigned');
dt.filter('assigned', 'assigneeOption');
buildFilter($event, 'assigneeOption')
"
>
<i
class="fa fa-user"
aria-hidden="true"
title="Assigned"
>
</i>
</a>
<a
class="assigneeOption unassigned"
(click)="
assigneeFilterClick('unassigned');
dt.filter('unassigned', 'assigneeOption');
buildFilter($event, 'assigneeOption')
"
>
<i
class="fa fa-user-times"
aria-hidden="true"
title="Unassigned"
>
</i>
</a>
<a
class="assigneeOption all"
(click)="
assigneeFilterClick('all');
dt.filter('all', 'assigneeOption');
buildFilter($event, 'assigneeOption')
"
>
<i class="fa fa-users" aria-hidden="true" title="All">
</i>
</a>
</th>
<th style="width: 200px">
Reviewer
<a
class="reviewerOption reviewed"
(click)="
reviewerFilterClick('reviewed');
dt.filter('reviewed', 'reviewerOption');
buildFilter($event, 'reviewerOption')
"
>
<i
class="fa fa-user"
aria-hidden="true"
title="Assigned"
>
</i>
</a>
<a
class="reviewerOption unreviewed"
(click)="
reviewerFilterClick('unreviewed');
dt.filter('unreviewed', 'reviewerOption');
buildFilter($event, 'reviewerOption')
"
>
<i
class="fa fa-user-times"
aria-hidden="true"
title="Unassigned"
>
</i>
</a>
<a
class="reviewerOption all"
(click)="
reviewerFilterClick('all');
dt.filter('all', 'reviewerOption');
buildFilter($event, 'reviewerOption')
"
>
<i class="fa fa-users" aria-hidden="true" title="All">
</i>
</a>
</th>
<th style="width: 120px">
Est. Start Date
<a
class="assigneeOption"
(click)="
estStartDateClear();
dt.filter('', 'estimatedStartDate');
buildFilter($event, 'estimatedStartDate')
"
>
<i
class="fa fa-close"
aria-hidden="true"
title="Clear Filter"
>
</i>
</a>
</th>
<th style="width: 150px">
Est. End Date
<a
class="assigneeOption"
(click)="
estEndDateClear();
dt.filter('', 'estimatedEndDate');
buildFilter($event, 'estimatedEndDate')
"
>
<i
class="fa fa-close"
aria-hidden="true"
title="Clear Filter"
>
</i>
</a>
</th>
<th *ngIf="!isHidden('startDate')" style="width: 120px">
Start Date
<a
class="assigneeOption"
(click)="
startDateClear();
dt.filter('', 'startDate');
buildFilter($event, 'startDate')
"
>
<i
class="fa fa-close"
aria-hidden="true"
title="Clear Filter"
>
</i>
</a>
</th>
<th style="width: 120px">End Date</th>
<th style="width: 100px">Capturing Effort</th>
<th style="width: 100px">Reviewing Effort</th>
<th *ngIf="!isHidden('totalEffort')" style="width: 100px">
Estimated Effort
</th>
<th *ngIf="!isHidden('IssueId')" style="width: 150px">
Issue Id
<a
class="assigneeOption assigned issueType acq"
[ngClass]="{ actived: activeTab === 'acq_tab' }"
(click)="
acq_click('acq_tab');
issueTypeFilterClick('acq');
dt.filter('ACQ', 'issue_type');
buildFilter($event, 'issue_type')
"
>
<i
class="fa fa-font"
aria-hidden="true"
title="ACQ Issues"
>
</i>
</a>
<a
class="assigneeOption unassigned issueType prod"
[ngClass]="{ actived: activeTab === 'prod_tab' }"
(click)="
acq_click('prod_tab');
issueTypeFilterClick('prod');
dt.filter('PROD', 'issue_type');
buildFilter($event, 'issue_type')
"
>
<i
class="fa fa-product-hunt"
aria-hidden="true"
title="PROD Issues"
>
</i>
</a>
<a
class="assigneeOption issueType all"
[ngClass]="{ actived: activeTab === 'all_tab' }"
(click)="
acq_click('all_tab');
issueTypeFilterClick('all');
dt.filter('ALL', 'issue_type');
buildFilter($event, 'issue_type')
"
>
<i
class="fa fa-close"
aria-hidden="true"
title="All Issues"
>
</i>
</a>
</th>
<th *ngIf="!isHidden('country')" style="width: 150px">
Country
</th>
<th *ngIf="!isHidden('region')" style="width: 150px">Region</th>
</tr>
<tr>
<th style="width: 150px">
<p-multiSelect
class="team-multiselect"
[maxSelectedLabels]="1"
[options]="team_list"
[(ngModel)]="adhocFilters.team_filter"
(onPanelShow)="teamFilterOpen()"
(onPanelHide)="
dt.filter(adhocFilters.team_filter, 'team_filter');
teamFilterClosed()
"
></p-multiSelect>
</th>
<th style="width: 200px">
<div style="width:100%;">
<span style="width:77%; float: left">
<p-autoComplete
[suggestions]="filteredTickers"
field="displayticker"
dataKey="companyid"
appendTo="body"
[style]="{ width: '100%' }"
[(ngModel)]="adhocFilters.ticker"
[inputStyle]="{ width: '100%' }"
(completeMethod)="
get_pattern_match_ticker($event)
"
[minLength]="1"
(onSelect)="
dt.filter($event.companyid, 'ticker');
buildFilter($event, 'ticker')
"
(onClear)="
dt.filter($event.company_id, 'ticker');
buildFilter($event, 'ticker')
"
>
</p-autoComplete>
</span>
<span
style="float:right; font-size: 12px; margin-left:0px"
>
<p-checkbox
[(ngModel)]="selectAll"
binary="true"
(onChange)="selectAllClicked($event)"
[(ngClass)]="showDelete"
name="selectAll"
*ngIf="show == true"
>
</p-checkbox>
</span>
<span
class="add-query-container del"
*ngIf="selectedForDelete.length != 0"
>
<i
class="fa fa-trash"
aria-hidden="true"
title="Delete adhoc task"
(click)="showDeleteConfirmation()"
label="Show"
>
</i>
</span>
</div>
</th>
<th *ngIf="!isHidden('industry')" style="width: 150px" pReorderableColumn>
<p-autoComplete
[suggestions]="filteredIndustry"
field="name"
dataKey="industryid"
[style]="{ width: '100%' }"
[inputStyle]="{ width: '100%' }"
(completeMethod)="getPatternMatchIndustry($event)"
[minLength]="2"
(onSelect)="
dt.filter($event.industryid, 'industry');
buildFilter($event, 'industry')
"
[(ngModel)]="adhocFilters.industry"
(onClear)="
dt.filter($event.industryid, 'industry');
buildFilter($event, 'industry')
"
>
</p-autoComplete>
</th>
<th *ngIf="!isHidden('sector')" style="width: 120px" pReorderableColumn>
<p-autoComplete
[suggestions]="filteredSector"
field="name"
dataKey="sectorid"
[style]="{ width: '100%' }"
[inputStyle]="{ width: '100%' }"
(completeMethod)="getPatternMatchSector($event)"
[minLength]="0"
(onSelect)="
dt.filter($event.sectorid, 'sector');
buildFilter($event, 'sector')
"
[(ngModel)]="adhocFilters.sector"
(onClear)="
dt.filter($event.sectorid, 'sector');
buildFilter($event, 'sector')
"
>
</p-autoComplete>
</th>
<th style="width: 150px">
<p-multiSelect
class="stage-multiselect"
[maxSelectedLabels]="1"
[options]="stage_list"
(onChange)="stageFilterClicked($event)"
[(ngModel)]="adhocFilters.stageId"
(onPanelShow)="stageFilterOpen()"
(onPanelHide)="
dt.filter(adhocFilters.stageId, 'stageId');
stageFilterClosed()
"
></p-multiSelect>
</th>
<th style="width: 100px">
<p-multiSelect
class="priority-multiselect"
[maxSelectedLabels]="1"
[options]="priority_list"
(onChange)="priorityFilterClicked($event)"
[(ngModel)]="adhocFilters.priority"
(onPanelShow)="priorityFilterOpen()"
(onPanelHide)="
dt.filter(adhocFilters.priority, 'priority');
priorityFilterClosed()
"
></p-multiSelect>
</th>
<th style="width: 200px">
<p-autoComplete
[suggestions]="patternMatchAnalystList"
field="fullname"
dataKey="capuserid"
appendTo="body"
[inputStyle]="{ width: '100%' }"
(completeMethod)="getPatternMatchAnalyst($event)"
[minLength]="1"
(onSelect)="
dt.filter($event.capuserid, 'captureUser');
buildFilter($event, 'captureUser')
"
[(ngModel)]="adhocFilters.captureUser"
(onClear)="
dt.filter($event.capuserid, 'captureUser');
buildFilter($event, 'captureUser')
"
>
</p-autoComplete>
</th>
<th style="width: 200px">
<p-autoComplete
[suggestions]="patternMatchAnalystList"
field="fullname"
dataKey="capuserid"
appendTo="body"
[style]="{ width: '100%' }"
[inputStyle]="{ width: '100%' }"
(completeMethod)="getPatternMatchAnalyst($event)"
[minLength]="1"
(onSelect)="
dt.filter($event.capuserid, 'reviewUser');
buildFilter($event, 'reviewUser')
"
[(ngModel)]="adhocFilters.reviewUser"
(onClear)="
dt.filter($event.capuserid, 'reviewUser');
buildFilter($event, 'reviewUser')
"
>
</p-autoComplete>
</th>
<th style="width: 120px">
<p-multiSelect
id="editingColumn"
[options]="columnOptions"
[filter]="false"
[showToggleAll]="false"
[(ngModel)]="cols"
style=""
defaultLabel="Columns"
(onChange)="onSelectPopulateColumndata($event)"
[panelStyle]="{ minWidth: '12em' }"
></p-multiSelect>
<input
*ngIf="!estStartFilterBoolean"
(mousedown)="
dateFilterClicked(
'estStartFilterBoolean',
'showEstStartFilter'
)
"
type="text"
/>
<input
id="showEstStartFilter"
*ngIf="estStartFilterBoolean"
type="text"
iname="daterangeInput"
daterangepicker
[(ngModel)]="estStartDateFilter"
[options]="{
locale: { format: 'DD MMM YYYY' },
maxDate: '2024-01-01',
startDate: '2018-05-31'
}"
(selected)="
dt.filter($event, 'estimatedStartDate');
buildFilter($event, 'estimatedStartDate')
"
/>
</th>
<th style="width: 150px">
<input
*ngIf="!estEndFilterBoolean"
(mousedown)="
dateFilterClicked(
'estEndFilterBoolean',
'showEstEndFilter'
)
"
type="text"
/>
<input
id="showEstEndFilter"
*ngIf="estEndFilterBoolean"
type="text"
iname="daterangeInput"
daterangepicker
[(ngModel)]="estEndDateFilter"
[options]="{
locale: { format: 'DD MMM YYYY' },
startDate: '2018-05-31',
maxDate: '2024-01-01',
timePicker: 'false'
}"
(selected)="
dt.filter($event, 'estimatedEndDate');
buildFilter($event, 'estimatedEndDate')
"
/>
</th>
<th *ngIf="!isHidden('startDate')" style="width: 120px">
<input
*ngIf="!startFilterBoolean"
(mousedown)="
dateFilterClicked(
'startFilterBoolean',
'showStartFilter'
)
"
type="text"
/>
<input
id="showStartFilter"
*ngIf="startFilterBoolean"
type="text"
iname="daterangeInput"
daterangepicker
[(ngModel)]="startDateFilter"
[options]="{
locale: { format: 'DD MMM YYYY' },
startDate: '2018-05-31'
}"
(selected)="
dt.filter($event, 'startDate');
buildFilter($event, 'startDate')
"
/>
</th>
<th style="width: 120px"></th>
<th style="width: 100px"></th>
<th style="width: 100px"></th>
<th *ngIf="!isHidden('totalEffort')" style="width: 100px"></th>
<th *ngIf="!isHidden('IssueId')" style="width: 150px">
<p-autoComplete
[suggestions]="issue_keys"
dataKey="issueid"
appendTo="body"
[style]="{ width: '100%' }"
[inputStyle]="{ width: '100%' }"
(completeMethod)="get_pattern_match_issues($event)"
[(ngModel)]="adhocFilters.issue_adhoctaskids"
[minLength]="3"
(onSelect)="
dt.filter(
issues
? issues[adhocFilters.issue_adhoctaskids]
: '',
'issue_adhoctaskids'
);
buildFilter($event, 'issue_adhoctaskids')
"
(onClear)="
dt.filter(
issues
? issues[adhocFilters.issue_adhoctaskids]
: '',
'issue_adhoctaskids'
);
buildFilter($event, 'issue_adhoctaskids')
"
>
</p-autoComplete>
</th>
<th *ngIf="!isHidden('country')" style="width: 150px">
<p-autoComplete
[suggestions]="filteredCountry"
field="name"
dataKey="countryid"
appendTo="body"
[style]="{ width: '100%' }"
[(ngModel)]="adhocFilters.country"
[inputStyle]="{ width: '100%' }"
(completeMethod)="search_country_pattern($event)"
[minLength]="1"
(onSelect)="
dt.filter($event.countryid, 'country');
buildFilter($event, 'country')
"
(onClear)="
dt.filter($event.countryid, 'ticker');
buildFilter($event, 'country')
"
>
</p-autoComplete>
</th>
<th *ngIf="!isHidden('region')" style="width: 150px">
<p-multiSelect
class="region-multiselect"
[maxSelectedLabels]="1"
[options]="region_list"
[(ngModel)]="adhocFilters.region_filter"
(onPanelShow)="regionFilterOpen()"
(onChange)="regionFilterClicked($event)"
(onPanelHide)="
dt.filter(
adhocFilters.region_filter,
'region_filter'
);
regionFilterClosed()
"
></p-multiSelect>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td style="width: 150px">
{{
tickerTeamMap
? tickerTeamMap[rowData.company_id]
: "----"
}}
</td>
<td style="width: 200px">
<div style="width:100%;">
<span>{{
tickerMap ? tickerMap[rowData.company_id] : "----"
}}</span>
<span style="font-size: 12px; float: right">
<p-checkbox
name="deleteTicker"
value="{{ rowData.adhocTaskId }}"
[(ngModel)]="selectedForDelete"
(onChange)="checkChanged($event)"
*ngIf="show == true"
>
</p-checkbox>
</span>
</div>
</td>
<td *ngIf="!isHidden('industry')" style="width: 150px">
{{ industryMap ? industryMap[rowData.company_id] : "" }}
</td>
<td *ngIf="!isHidden('sector')" style="width: 120px">
{{ sectorMap ? sectorMap[rowData.company_id] : "" }}
</td>
<td style="width: 150px">
<a
class="stageOption prev-stage"
(click)="changeStage('prev', rowData)"
*ngIf="
rowData.stageId &&
[2, 3].indexOf(rowData.stageId) > -1
"
>
<i
class="fa fa-chevron-circle-left"
aria-hidden="true"
title="Prev Stage"
>
</i>
</a>
<span>{{
stageIdMap ? stageIdMap[rowData.stageId] : ""
}}</span>
<a
class="stageOption next-stage"
*ngIf="
rowData.stageId &&
[1, 2, 3].indexOf(rowData.stageId) > -1
"
(click)="changeStage('next', rowData)"
>
<i
class="fa fa-chevron-circle-right"
aria-hidden="true"
title="Next Stage"
>
</i>
</a>
</td>
<td style="width: 100px">
<div
*ngIf="!rowData.editing"
(click)="editRow(rowData, 'priority')"
>
<span
[ngStyle]="{
color:
rowData.priority === 1 ||
rowData.priority === '1'
? 'red'
: ''
}"
>
{{ rowData.priority }}
</span>
<span style="float: right"
><i class="fa fa-edit"></i
></span>
</div>
<p-dropdown
*ngIf="rowData.editing"
[options]="getConstants('priority')"
(onChange)="
updateAdhocTask($event, rowData, 'update_priority')
"
></p-dropdown>
</td>
<td style="width: 200px">
<span class="assignee-span">{{
userMap ? userMap[rowData.captureUser] : ""
}}</span>
<p-autoComplete
class="assignee-autocomplete"
[suggestions]="patternMatchAnalystList"
field="fullname"
dataKey="capuserid"
appendTo="body"
[forceSelection]="true"
[inputStyle]="{ width: '100%' }"
(completeMethod)="getPatternMatchAnalyst($event)"
[minLength]="2"
(onSelect)="
updateAdhocTask($event, rowData, 'update_user', {
user_type: 1,
is_self_assign: false
})
"
placeholder="{{
userMap ? userMap[rowData.captureUser] : ''
}}"
>
</p-autoComplete>
<a
class="removeAssignee"
(click)="
updateAdhocTask($event, rowData, 'update_user', {
user_type: 1,
is_unassign: true
})
"
[hidden]="
!userMap ||
!rowData ||
!userMap[rowData.captureUser]
"
>
<i
class="fa fa-close"
aria-hidden="true"
title="Remove Assignee"
>
</i>
</a>
<a
class="actionIcon"
(click)="
updateAdhocTask($event, rowData, 'update_user', {
user_type: 1,
is_self_assign: true
})
"
[hidden]="
!userMap ||
userMap[rowData.captureUser] == user_name
"
>
<i
class="fa fa-user"
aria-hidden="true"
title="Self Assign"
>
</i>
</a>
</td>
<td style="width: 200px">
<span class="assignee-span">{{
userMap ? userMap[rowData.reviewUser] : ""
}}</span>
<p-autoComplete
class="assignee-autocomplete"
[suggestions]="patternMatchAnalystList"
field="fullname"
dataKey="capuserid"
appendTo="body"
[forceSelection]="true"
[inputStyle]="{ width: '100%' }"
(completeMethod)="getPatternMatchAnalyst($event)"
[minLength]="2"
(onSelect)="
updateAdhocTask($event, rowData, 'update_user', {
user_type: 2,
is_self_assign: false
})
"
placeholder="{{
userMap ? userMap[rowData.reviewUser] : ''
}}"
>
</p-autoComplete>
<a
class="removeAssignee"
(click)="
updateAdhocTask($event, rowData, 'update_user', {
user_type: 2,
is_unassign: true
})
"
[hidden]="
!userMap || !rowData || !userMap[rowData.reviewUser]
"
>
<i
class="fa fa-close"
aria-hidden="true"
title="Remove Assignee"
>
</i>
</a>
<a
class="actionIcon"
(click)="
updateAdhocTask($event, rowData, 'update_user', {
user_type: 2,
is_self_assign: true
})
"
[hidden]="
!userMap || userMap[rowData.reviewUser] == user_name
"
>
<i
class="fa fa-user"
aria-hidden="true"
title="Self Assign"
>
</i>
</a>
</td>
<td style="width: 120px">
<div
style="width: 100%; height: 20px"
(mouseover)="dateCellHover(rowData, $event)"
>
<span>{{ rowData.estimatedStartDate }}</span>
<a
style="float: right"
*ngIf="
rowData.estimatedStartDate &&
rowData.initializeDate
"
(click)="
updateAdhocTask(
$event,
rowData,
'update_est_startdate',
{ clear: true }
)
"
>
<i class="fa fa-close"></i>
</a>
<a
*ngIf="rowData.initializeDate"
style="float: right"
iname="daterangeInput"
daterangepicker
timePicker="false"
[options]="{
singleDatePicker: true,
maxDate: '2024-01-01',
locale: { format: 'DD MMM YYYY' }
}"
(selected)="
updateAdhocTask(
$event,
rowData,
'update_est_startdate'
)
"
>
<i class="fa fa-edit"></i>
</a>
</div>
</td>
<td style="width: 150px">
<div
style="width: 100%; height: 20px"
(mouseover)="dateCellHover(rowData, $event)"
>
<span>{{ rowData.estimatedEndDate }}</span>
<a
style="float: right"
*ngIf="rowData.initializeDate"
(click)="
updateAdhocTask(
$event,
rowData,
'update_est_enddate',
{
type: 'next_month'
}
)
"
pTooltip="Next Month"
>
<i class="fa fa-fast-forward"></i>
</a>
<a
style="float: right"
*ngIf="rowData.initializeDate"
(click)="
updateAdhocTask(
$event,
rowData,
'update_est_enddate',
{
type: 'current_month'
}
)
"
pTooltip="Current Month"
>
<i class="fa fa-play"></i>
</a>
<a
style="float: right"
*ngIf="
rowData.estimatedEndDate &&
rowData.initializeDate
"
(click)="
updateAdhocTask(
$event,
rowData,
'update_est_enddate',
{
clear: true
}
)
"
>
<i class="fa fa-close"></i>
</a>
<a
*ngIf="rowData.initializeDate"
style="float: right"
iname="daterangeInput"
daterangepicker
timePicker="false"
[options]="{
singleDatePicker: true,
locale: { format: 'DD MMM YYYY' },
maxDate: '2024-01-01'
}"
(selected)="
updateAdhocTask(
$event,
rowData,
'update_est_enddate'
)
"
>
<i class="fa fa-edit"></i>
</a>
</div>
</td>
<td *ngIf="!isHidden('startDate')" style="width: 120px">
{{ rowData.startDate | date: "dd MMM yyyy" }}
</td>
<td style="width: 120px">
{{ rowData.endDate | date: "dd MMM yyyy" }}
</td>
<td style="width: 100px">
{{ rowData.captureEffort }}
<i
(mousedown)="editWorkLog(rowData, 1, $event, logPanel)"
class="fa fa-edit"
></i>
</td>
<td style="width: 100px">
{{ rowData.reviewEffort }}
<i
(mousedown)="editWorkLog(rowData, 2, $event, logPanel)"
class="fa fa-edit"
></i>
</td>
<td *ngIf="!isHidden('totalEffort')" style="width: 100px">
<input
class="effort-log"
type="number"
[(ngModel)]="rowData.totalEffort"
(keydown.enter)="
updateAdhocTask(
$event,
rowData,
'update_total_effort'
)
"
(blur)="
updateAdhocTask(
$event,
rowData,
'update_total_effort'
)
"
/>
</td>
<td *ngIf="!isHidden('IssueId')" style="width: 150px">
<div [ngClass]="{ issueLoading: rowData.issueLoading }">
<img
*ngIf="rowData.issueLoading"
style="margin-right: 8px;"
src="../assets/Images/loader.gif"
alt=""
/>
<tag-input
[allowDupes]="false"
[modelAsStrings]="true"
class="issue-token-container"
[(ngModel)]="issueLinks[rowData.adhocTaskId]"
(ngModelChange)="
issueLinks?.length &&
(issueLinks[rowData.adhocTaskId] = $event)
"
(onAdd)="onIssueAdd($event, rowData)"
(onRemove)="onIssueRemove($event, rowData)"
(onSelect)="goToIssue($event)"
[onAdding]="onAdding"
[onRemoving]="onRemoving.bind(this)"
placeholder="Add Issue"
secondaryPlaceholder="Add Issue"
></tag-input>
<span class="issue-link-container">
<a
*ngFor="
let link of issueLinks[rowData.adhocTaskId]
"
(click)="goToIssue(link)"
class="issue-link"
>
{{ link }}
</a>
</span>
</div>
</td>
<td *ngIf="!isHidden('country')" style="width: 150px">
{{
countryRegionMap && countryRegionMap[rowData.company_id]
? countryRegionMap[rowData.company_id].country
: ""
}}
</td>
<td *ngIf="!isHidden('region')" style="width: 150px">
<div
*ngIf="
countryRegionMap &&
countryRegionMap[rowData.company_id] &&
countryRegionMap[rowData.company_id].region
"
>
<span
*ngFor="
let region of countryRegionMap[
rowData.company_id
].region;
let i = index
"
>{{ masterRegionMap[region]
}}<span
*ngIf="
i <
countryRegionMap[rowData.company_id].region
.length -
1
"
>,
</span></span
>
</div>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage" let-columns>
<tr *ngIf="emptyDataMessage">
<td [attr.colspan]="columns.length">
{{ emptyDataMessage }}
</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="adhoc_work_footer">
<div class="select-tab">
<p-dropdown
[style]="{ width: '250px' }"
[options]="typeListarray"
[(ngModel)]="selectedTypes"
(onChange)="onselectedType($event)"
></p-dropdown>
</div>
<div class="add-query-container" *ngIf="show == true">
<i
class="fa fa-plus-circle"
aria-hidden="true"
title="Add adhoc task"
(click)="showDialog()"
label="Show"
>
</i>
</div>
</div>
<span class="total_record"> Total records: {{ totalRecords }} </span>