Customize PrimeNg <p-dataTable> column names

Question

My HTML page has 2 tables and both of them has different column names. My first table has column as Application ID and Application Type where as my second table has columns File Name and Checkbox s(to select and delete file). For this scenario I have to use PrimeNg data table i.e. <p-dataTable>. Can I customize the data table column names? Please guide me how to achieve this?

So far what i did is:

table.ts as below

folderData = FolderData[];

(model) FolderData.ts as below

appID: string;
appType: string;
filename: string;
checkBox: boolean;

table.html as below

**First Data Table**
<p-dataTable [value]="folderData ">
  <p-header [style]="{'width': '100%'}">
    <div class="ui-helper-clearfix">
      Big Table
    </div>
  </p-header>

  <p-column field="Col1" header="Application ID" [sortable]="true" [style]="{'width': '200px'}"></p-column>
  <p-column field="Col2" header="Application Name" [sortable]="true" [style]="{'width': '200px'}"></p-column>
</p-dataTable>

**Second Data Table**
<p-dataTable [value]="folderData ">
  <p-header [style]="{'width': '100%'}">
    <div class="ui-helper-clearfix">
      Big Table
    </div>
  </p-header>

  <p-column field="Col1" header="File Name" [sortable]="true" [style]="{'width': '200px'}"></p-column>
  <p-column field="Col2" header="" [sortable]="true" [style]="{'width': '200px'}"><input type="checkbox"></p-column>
</p-dataTable>

I am not able to figure out how to customize the column names so I have har codded them. Please guide.

Answer 1

I have same problem with yours, and I ımplemented like below

 <p-dataTable [value]="datasource" selectionMode="single" [(selection)]="selectedRow"
                                     dataKey="grpCode"
                                     [lazy]="true" [totalRecords]="totalRecords"
                                     (onLazyLoad)="loadMainGroupsLazy($event)"
                                     [rows]="perPageRecord" [paginator]="true" [pageLinks]="3"
                                     [rowsPerPageOptions]="[5,10,20]">
                            <p-column field="grpCode">
                                <ng-template pTemplate="header">
                                    Plan Kodu
                                    <a style="cursor: pointer" (click)="sort(2)">
                            <span
                                [ngClass]="getDirection(2)"></span>
                                    </a>
                                </ng-template>
                            </p-column>
                            <p-column field="isMandatory">
                                <ng-template pTemplate="header">
                                    Zorunlu mu?
                                    <a style="cursor: pointer" (click)="sort(3)">
                                        <span [ngClass]="getDirection(3)"></span>
                                    </a>
                                </ng-template>
                                <ng-template let-col let-plan="rowData" let-ri="rowIndex" pTemplate="body">
                                    <p-checkbox [(ngModel)]="plan[col.field]" binary="true"></p-checkbox>
                                </ng-template>
                            </p-column>
                            <p-column field="validityStartDate">
                                <ng-template pTemplate="header">
                                    Başlangıç Tarihi
                                    <a style="cursor: pointer" (click)="sort(3)">
                                        <span [ngClass]="getDirection(3)"></span>
                                    </a>
                                </ng-template>
                                <ng-template let-col let-plan="rowData" let-ri="rowIndex" pTemplate="body">
                                    <span>{{plan[col.field] | date: 'yyyy-mm-dd'}}</span>
                                </ng-template>
                            </p-column>
                            <p-column field="validityEndDate">
                                <ng-template pTemplate="header">
                                    Bitiş Tarihi
                                    <a style="cursor: pointer" (click)="sort(3)">
                                        <span [ngClass]="getDirection(3)"></span>
                                    </a>
                                </ng-template>
                                <ng-template let-col let-plan="rowData" let-ri="rowIndex" pTemplate="body">
                                    <span>{{plan[col.field] | date: 'yyyy-mm-dd'}}</span>
                                </ng-template>
                            </p-column>

                        </p-dataTable>

Answer 2

In HTML side, you have to bind the name of the property of your object in 'field'.

Instead of :

<p-column field="Col1" header="Application ID" [sortable]="true" [style]="{'width': '200px'}"></p-column>

Try:

<p-column field="appID" header="Application ID" [sortable]="true" [style]="{'width': '200px'}"></p-column>