Reputation: 472
I want to wrap p-dataTable component inside my own component because I need to add custom styling to it (and some other stuff) and I want to have look&feel everywhere the same. What I want to provide to the user is to be able to customize editing of cells(with a context from parent component for that editing). I need a recipe how to achieve that and after 12 hours of trying I'm wondering if it is possible at all and if may be it would be easier to use p-dataTable directly in templates.
Here is a plunker: https://plnkr.co/edit/HsEZWBkTmtFRTPGpwjJR?p=preview
Below is a approximation of what I want to achieve. I want to be able for user to provide a custom editor template for a specific column e.g.: p-dropdown in Color column, so it can be used in my-data-table client component, something like:
<my-data-table [title]="title" [columns]="columns" [data]="data">
<ng-container *ngIf="column.header === 'Color'">
<ng-template pTemplate="editor">
<p-dropdown [(ngModel)]="rowData.mask" [options]="colors" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
</ng-template>
</ng-container>
</my-data-table>
Please note that it is not correct. Basically what I need is: 2 contexts i.e. p-column context and client component context (to be able to bind colors to options). Any ideas how to achieve that or something that would provide similar functionality is more than welcome.
Upvotes: 1
Views: 1914
Reputation: 383
You can have an ngIf to have two options for the templates depending on your condition.
<p-column field="fieldName" header="Header" [style]="{'width':'180px'}" [sortable]="true" [editable]="true">
<ng-template let-col let-row="rowData" pTemplate="editor">
<div *ngIf="row && 'Y'!=row.abc">{{row[col.field]}}</div>
<div *ngIf="row && 'Y'==row.abc">
<input type="text" pInputText [(ngModel)]="row[col.field]" />
</div>
</ng-template>
</p-column>
Here depending on the value of abc you can have either editable or read-only field in the datatable.
Upvotes: 2