Primeng: Dynamic collumns with template

[darianferrer]

Hi, I've a component that wraps a DataTable with some default options (lazy loading, paginator, etc.). When using this wrapper component in a host component, I can specify the DataTable columns with a Column's list in the host (input property in DataTable wrapper component) or inside the template (and my wrapper has a Query for Column components so it can update the DataTable). The problem I'm facing is that I want to allow templates in the last option, it's posible?

Here is a sample of the wrapper and a host components:

DataTable wrapper:
`
@Component({
selector: 'datatable',
templateUrl: 'templates/resources/datatable.html',
directives: [DataTable, Column],
inputs: ['items', 'columns']
})
export class DataTableWrapper implements OnInit {

public items: Array<any> = [];
public columns: Column[];

constructor(@Query(Column) cols: QueryList<Column>, changeDetector: ChangeDetectorRef) {
    cols.changes.subscribe(_ => {
        if (cols.length) {
            this.columns = cols.toArray();
            changeDetector.markForCheck();
        }
    });
}

}`

<p-dataTable [value]="items" > <p-column *ngFor="let col of columns" [field]="col.field" [header]="col.header"> </p-column> </p-dataTable>

Host component:
Option 1:
<datatable [items]="items" [columns]="columns">
Option 2:
<datatable [items]="items"> <p-column field="displayName" header="Display Name"> </p-column> <p-column field="description" header="Description"> </p-column> <p-column field="enabled" header="Enabled"> <template let-item="rowData"> <i class="fa {{item.enabled ? 'fa-check-square-o' : 'fa-square-o'}}"></i> </template> </p-column> </datatable>

[brian428]

For what it's worth, I did it like this:

<p-dataTable [value]="myData"
    (onRowClick)="onRowClick( $event.data )"
    (onRowSelect)="onRowSelect( $event )" (onRowUnselect)="onRowUnselect( $event )"
    (onHeaderCheckboxToggle)="onToggleAllRowsSelect( $event )">
  <p-column [style]="{ 'width':'38px' }" selectionMode="multiple"></p-column>

  <p-column
    *ngFor="let thisColumn of ( state.userPreferencesChanged$ | async )?.defaults.dataColumns;
            trackBy: trackByColumnKey; let columnIndex=index"
    field="{{ thisColumn.key }}" header="{{ thisColumn.header }}">

    <template
      *ngIf="thisColumn.type === 'string' || thisColumn.type === undefined"
      let-col let-data="rowData" pTemplate type="body">
      <span class="col-string">{{ data[ col.field ] }}</span>
    </template>

    <template
      *ngIf="thisColumn.type === 'date'"
      let-col let-data="rowData" pTemplate type="body">
      <span class="col-date">{{ data[ col.field ] | date:'short' }}</span>
    </template>

    <template
      *ngIf="thisColumn.type === 'string[]'"
      let-col let-data="rowData" pTemplate type="body">
      <span class="col-string-array">{{ data[ col.field ]?.join( ", " ) }}</span>
    </template>

  </p-column>

</p-dataTable>

[cagataycivici]

Thanks for sharing.