Use data table with additional fields on column level

Question

I use PrimeNG beta 17 with Angular 2 and in my template I utilize a data table as follows:

<p-dataTable [value]="dataColumns" [(selection)]="selectedInputColumns">
      <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
      <p-column field="label" header="Column name"></p-column>
      <p-column header="Column Type">
          <template pTemplate type="body">
                <p-selectButton [options]="availableColumnTypes" [(ngModel)]="selectedColumnType"></p-selectButton>
              </template>
      </p-column>
 </p-dataTable>

Inside one column of the data table (header "Column Type") I want to have an additional select button (user can choose between three states), thus we have one additional information per table line.

The Select Button component from PrimeNG offers the onChange event, being raised once the user changes the value. My question is whether inside the event handling I can obtain the information which line of the data table was clicked, since I need to store the additional information per table line.

anusreemn anusreemn · Accepted Answer · 2017-04-21T07:01:35

@Emdee,

Please find my suggestions below:

I think you need a listBox rather than a selectButton
You can get the current row data within <template> using rowData

Updated template:

<p-dataTable [value]="dataColumns" [(selection)]="selectedInputColumns">
      <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
      <p-column field="label" header="Column name"></p-column>
      <p-column header="Column Type">
          <template let-rdata="rowData" let-rindex="rowIndex" pTemplate type="body">
                {{ rdata }} {{ rindex }} <!-- current row-data is obtainable at rdata and index at rindex -->
                <p-listbox [options]="availableColumnTypes" [(ngModel)]="selectedColumnType"></p-listbox>
              </template>
      </p-column>
 </p-dataTable>

Please try out and let me know if it works.

Use data table with additional fields on column level

1 Answers