How can I obtain the rowIndex of an expanded row in Primeng?

Question

How can I obtain the rowIndex of an expanded row in Primeng?

 <p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single">
...</p-dataTable>

There is a similar example below:

<ng-template let-col let-period="rowData" let-ri="rowIndex"   pTemplate="body">...</ng-template>

specifically for the DataTable component

angular typescript

Answer 1

Answer №1

If you want to expand a row in your ng-template, use the code snippet below:

<ng-template let-i="rowIndex">
   <button (click)="expand(i)"> expand </button>
</ng-template>

To retrieve the rowindex when the button is clicked during expansion, implement the following logic:

expand(i){
    //... your logic to expand the row...
    this.expandedRowIndex = i;
}

  <p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single" (onRowExpand)="onRowExpand($event)">

Update 1: To expand the entire row with a click, use the onRowExpand property of the <p-datatable>.

onRowExpand(cc){
    console.log(cc)
    //logs the entire object which is clicked     
  }

This method is triggered when the row is expanded.

https://i.sstatic.net/FcCYj.png

Check out the LIVE DEMO here

Answer 2

If you want to expand a row in your ng-template, use the code snippet below:

<ng-template let-i="rowIndex">
   <button (click)="expand(i)"> expand </button>
</ng-template>

To retrieve the rowindex when the button is clicked during expansion, implement the following logic:

expand(i){
    //... your logic to expand the row...
    this.expandedRowIndex = i;
}

  <p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single" (onRowExpand)="onRowExpand($event)">

Update 1: To expand the entire row with a click, use the onRowExpand property of the <p-datatable>.

onRowExpand(cc){
    console.log(cc)
    //logs the entire object which is clicked     
  }

This method is triggered when the row is expanded.

https://i.sstatic.net/FcCYj.png

Check out the LIVE DEMO here

Answer 3

Answer №2

<ng-template let-i="rowIndex" let-line pTemplate="rowexpansion">

rowIndex has likely been included in rowExpansion by now, it's functional for me in the most recent release.

Answer 4

<ng-template let-i="rowIndex" let-line pTemplate="rowexpansion">

rowIndex has likely been included in rowExpansion by now, it's functional for me in the most recent release.

Answer 5

Answer №3

Utilize this in the following way:

<ng-template pTemplate="content" let-data="$implicit" let-index="index">
                        <tr [pSelectableRow]="data">
                            <td>
                                {{index + 1}}

Answer 6

Utilize this in the following way:

<ng-template pTemplate="content" let-data="$implicit" let-index="index">
                        <tr [pSelectableRow]="data">
                            <td>
                                {{index + 1}}

How can I obtain the rowIndex of an expanded row in Primeng?

Answer №1

Answer №2

Answer №3

Similar questions

Encountering an issue while running Angular 2 and Node.js server with the command 'npm

Tips for integrating jwt token into axios request

The issue arises when TypeScript declarations contain conflicting variables across multiple dependencies

Is the Prisma model not reachable through Prisma Client?

IntelliSense in VSCode is unable to recognize the `exports` property within the package.json file

Develop a custom function in Typescript that resolves and returns the values from multiple other functions

Help needed: Encountered an error stating "Module not found: Error can't resolve 'child_process', any solutions to resolve this issue?

Steps to extract key and value from a collection in Firebase database

Generate types based on properties of a nested interface dynamically

An unexpected error occurred during Azure Pipeline's end-to-end testing: Chrome encountered an issue while attempting to launch and exited in an

What is the best way to solve the Hackerrank Binary Tree problem using TypeScript and output the

Searching for a working node within a document (encountering a throw err) in the context of Express and Node

List of Ionic Cordova plugins sorted by Android version

Angular2 is designed to break down complex applications into smaller, more manageable parts

An array of objects in Typescript utilizing a generic type with an enum

Differences between Angular components and TypeScript classes in models

Save information for each session with a set expiration time

Utilizing Angular2 with Firebase for efficient denormalized data queries

Setting up the TypeScript compiler locally in the package.json file

Seamless animation with Angular 4