0
[email protected] created
Hi,
how is it possible to apply the same styling with the dotted row seperator and everything else from the p-table on p-treeTable.
Currently it looks like in the Screenshot. First Screenshot is the default "ASP.NET Zero Angular Metronic Theme p-table" and second screenshot is the p-treeTable
Implementation:
<p-treeTable
#dataTable
class="p-table"
[value]="files"
[columns]="cols"
[lazy]="true"
[loading]="loading"
[totalRecords]="totalRecords"
[rows]="10"
[rowsPerPageOptions]="[5,10,20,50]"
[sortMode]="'single'"
selectionMode="single"
(onNodeSelect)="onBusinessCaseSelect($event)"
(onLazyLoad)="loadBusinessCases($event)"
[scrollable]="true"
ScrollWidth="100%"
[tableStyle]="{'min-width': '50rem'}"
>
<p-table #dataTable (onLazyLoad)="getArticles($event)" [value]="primengTableHelper.records"
[rows]="primengTableHelper.defaultRecordsCountPerPage" [paginator]="false" [lazy]="true"
[scrollable]="true" scrollWidth="100%"
[tableStyle]="{'min-width': '50rem'}"
[resizableColumns]="primengTableHelper.resizableColumns">
<!-- Table Header -->
<ng-template pTemplate="header">
<tr>
<th style="width: 130px" [hidden]="!isGrantedAny('Pages.Articles.Edit', 'Pages.Articles.Delete')">
{{l('Actions')}}
</th>
<th style="width: 150px" pSortableColumn="articleName">
{{l('ArticleName')}}
<p-sortIcon field="articleName"></p-sortIcon>
</th>
<th style="width: 100px" pSortableColumn="unit">
{{l('Unit')}}
<p-sortIcon field="unit"></p-sortIcon>
</th>
<th style="width: 300px" pSortableColumn="description">
{{l('Description')}}
<p-sortIcon field="description"></p-sortIcon>
</th>
<th style="width: 300px" pSortableColumn="articleGroup">
{{l('ArticleGroup')}}
<p-sortIcon field="articleGroup"></p-sortIcon>
</th>
</tr>
</ng-template>
<!-- Table Body -->
<ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
<tr>
<td style="width: 130px" [hidden]="!isGrantedAny('Pages.Articles.Edit', 'Pages.Articles.Delete')">
<div class="btn-group dropdown" dropdown container="body">
<button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
<i class="fa fa-cog"></i> <span class="caret"></span> {{l("Actions")}}
</button>
<ul class="dropdown-menu" *dropdownMenu>
<li>
<a *ngIf="permission.isGranted('Pages.Articles.Edit')"
class="dropdown-item"
[routerLink]="['/app/main/articles/articles/createOrEdit']"
[queryParams]="{id: record.article.id}">
{{l('Edit')}}
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:;"
*ngIf="permission.isGranted('Pages.Articles.Delete')"
(click)="deleteArticle(record.article)">
{{l('Delete')}}
</a>
</li>
</ul>
</div>
</td>
<td style="width: 150px">
<span class="p-column-title">{{l('ArticleName')}}</span>
{{record.article.name}}
</td>
<td style="width: 100px">
<span class="p-column-title">{{l('Unit')}}</span>
{{record.unitName}}
</td>
<td style="width: 300px">
<span class="p-column-title">{{l('Description')}}</span>
{{record.article.description}}
</td>
<td style="width: 300px">
<span class="p-column-title">{{l('ArticleGroup')}}</span>
{{record.articleGroupName}}
</td>
</tr>
</ng-template>
</p-table>
<p-treeTable
#dataTable
class="p-table"
[value]="files"
[columns]="cols"
[lazy]="true"
[loading]="loading"
[totalRecords]="totalRecords"
[rows]="10"
[rowsPerPageOptions]="[5,10,20,50]"
[sortMode]="'single'"
selectionMode="single"
(onNodeSelect)="onBusinessCaseSelect($event)"
(onLazyLoad)="loadBusinessCases($event)"
[scrollable]="true"
ScrollWidth="100%"
[tableStyle]="{'min-width': '50rem'}"
>
<!-- Table Header -->
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ttSortableColumn]="col.field">
{{ col.header }}
<p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
</th>
</tr>
</ng-template>
<!-- Table Body -->
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
<tr [ttSelectableRow]="rowNode">
<td *ngFor="let col of columns; let i = index">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
<!-- Empty Message -->
<ng-template pTemplate="emptymessage">
<tr>
<td [attr.colspan]="cols.length" class="text-center">
{{ 'NoRecordsFound' | localize }}
</td>
</tr>
</ng-template>
</p-treeTable>
Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)