-1

I have created a datatable in angular 4 using prime ng primeface. I am able to bind the table from remote server. I have given the column name and header like 

{ field: 'StudentId', header: 'Student Code' },
      { field: 'Dept', header: 'Department' },
      { field: 'PassoutYear', header: 'Passout Year' },

and Html will be like 

 <p-dataTable #dt [value]="Studentlist" exportFilename="Studentlist" reorderableColumns="true" resizableColumns="true" columnResizeMode="expand" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [responsive]="true" [rows]="8" [paginator]="true"   scrollHeight="300px">
        <p-header>STUDENT RECORDER</p-header>
        <p-header>
            <div style="text-align:left">
                <p-multiSelect [options]="columnOptions" [(ngModel)]="cols"></p-multiSelect>
            </div>
        </p-header>

        <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [sortable]="true" [filter]="true" [editable]="true" filterMatchMode="startsWith" filterPlaceholder="Search"></p-column>

But here I want to display the data table dynamically. I.e. the number of columns will not be fixed. So my table should accept even it is a single column or it is any number of columns. How it is possible?

adarshkavallore
  • 31
  • 1
  • 4
  • you should use angular-pipe , where you should call pipe on cols array. go and search about it if you didn't get it. i will leave a answer for you – Vala Khosravi Oct 04 '17 at 13:50
  • how we can implement it using pipe?because column heading and the contents also will be dynamic and have n limit in count. – adarshkavallore Oct 11 '17 at 10:42

1 Answers1

0

Try like this :

this.Studentlist = [{
    StudentId: 1000230,
    Dept: 'Computer Science',
    PassoutYear: 2017
}]

this.cols = [{
    field: 'StudentId',
    header: 'Student Code'
}, {
    field: 'Dept',
    header: 'Department'
}, {
    field: 'PassoutYear',
    header: 'Passout Year'
}]

<p-dataTable [value]="Studentlist">
    <p-column class="a" *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
Chandru
  • 10,864
  • 6
  • 38
  • 53
  • this.Studentlist = [{ StudentId: 1000230, Dept: 'Computer Science', PassoutYear: 2017 }] here the column names are changing next api call..in that case how we can achive? – adarshkavallore Oct 11 '17 at 10:43