Btukfyl

I am currently developing the user interface of a web application using angular6. I have a p-dataTable component (primeNG) with several rows, each row has as a first column a checkbox and as last one a disabled button by default.

The goal is opening a dialog if I select a row by clicking it's checkbox and then clicking it's dialog trigger button after unable that button (and just that one, not the rest of row buttons).

I thought I could get the row selected index and style the button via CSS with nth-child(index) but I read p-columns in a p-datatable doesn't create an index.

It looks like something trivial, but I'm not able to unable just the button of the selected row.

I'll appreciate your help.

That's a simplified markup example:

    <p-datatable [value]="data" scrollable="true" scrollHeight="350px [(selection)]="selectedItems" columnResizeMode="expand">

        <p-header>

            <div class="ui-helper-clearfix">Example Table</div>

        </p-header>

        <p-column class="checkbox" selectionMode="multiple"></p-column>

        <p-column class="data-column" field="dataColumn1" header="Column1"></p-column>

        <p-column class="data-column" field="dataColumn2"header="Column2"></p-column>

        <p-column>

            <ng-template>

                <button type="button" class="btn" icon="fa fa-user" [disabled]="??????"></button>

            </ng-template>

        </p-column>

    </p-datatable>

Thanks in advance and greetings!

I've found a solution:

First of all I need a ng-template inside my checkbox p-column in order to have a rowIndex variable to be read in the class component through a function triggered in the event onChange of the checkbox.

There I save this value in a class variable called "indexSelected" that I'll be watching in the ng-template of the buttons p-column. I'll be comparing this rowIndex value with the "indexSelected" to keep disabled or not my buttons.

This is my code:

Template:

   <p-datatable [value]="data" scrollable="true" scrollHeight="350px [(selection)]="selectedItems" columnResizeMode="expand">

    <p-header>

        <div class="ui-helper-clearfix">Example Table</div>

    </p-header>

    <p-column selectionMode="multiple" [styleClass]="'colsmall'">

        <ng-template let-riCheck="rowIndex" pTemplate="body">

            <p-checkbox  (onChange)="selectRow(riCheck); "></p-checkbox>

        </ng-template>

    </p-column>

    <p-column class="data-column" field="dataColumn1" header="Column1"></p-column>

    <p-column class="data-column" field="dataColumn2"header="Column2"></p-column>

    <p-column header="Acciones" styleClass="colmedium" frozen="true">

        <ng-template pTemplate="body" let-ri="rowIndex">

            <button type="button" pButton icon="fa-user" (click)="goToEditContact();" [disabled]="indexSelected != ri"></button>

            <button type="button" pButton icon="fa-ellipsis-h" class="ui-button-inverted" (click)="mostrarMasOpciones($event, op)" [disabled]="indexSelected != ri"></button>

        </ng-template>

    </p-column>

</p-datatable>

Class Component:

...



selectRow (index) {

    this.indexSelected = index;

}



...