Primeng: Pass rowIndex to column template

Created on 27 Apr 2016  路  1Comment  路  Source: primefaces/primeng

Expose rowIndex as a template variable in addition to existing column and rowdata;

<p-column field="color" header="Color">
            <template #col #car="rowData" #ri="rowIndex">
                {{ri}}
                <span [style.color]="car[col.field]">{{car[col.field]}}</span>
            </template>
        </p-column>
new feature

Most helpful comment

I've noticed that rowIndex is actually an absolute row index:

((page_number - 1) * items_per_page + row_number)

It's nice but if I use lazy loaded datatable rowIndex can't help me a lot because it doesn't match item's index in component's collection.

Example:
I'm lazy loading events in datatable with 5 items limit and I want to be able to remove an event from events array by index.

  • On first datatable page there is no problem with rowIndex. We can delete some event with events.splice(rowIndex, 1) for example.
events: [ {event a}, {event b}, {event c}, {event d}, {event e} ];

Clicking on 2nd row's delete button will remove events[1] element - Great!
image

  • But on page two events array gets filled with other 5 events (lazy loaded from an API) indexed from 0 to 4 again
events: [ {event f}, {event g}, {event h}, {event i}, {event j} ];

Clicking on 2nd row's delete button will remove events[6] element - but no! There is no event at position 6 :cry:
image

So I suggest renaming rowIndex to absRowIndex and adding relRowIndex variable that will return relative row index for current datatable page.

>All comments

I've noticed that rowIndex is actually an absolute row index:

((page_number - 1) * items_per_page + row_number)

It's nice but if I use lazy loaded datatable rowIndex can't help me a lot because it doesn't match item's index in component's collection.

Example:
I'm lazy loading events in datatable with 5 items limit and I want to be able to remove an event from events array by index.

  • On first datatable page there is no problem with rowIndex. We can delete some event with events.splice(rowIndex, 1) for example.
events: [ {event a}, {event b}, {event c}, {event d}, {event e} ];

Clicking on 2nd row's delete button will remove events[1] element - Great!
image

  • But on page two events array gets filled with other 5 events (lazy loaded from an API) indexed from 0 to 4 again
events: [ {event f}, {event g}, {event h}, {event i}, {event j} ];

Clicking on 2nd row's delete button will remove events[6] element - but no! There is no event at position 6 :cry:
image

So I suggest renaming rowIndex to absRowIndex and adding relRowIndex variable that will return relative row index for current datatable page.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Faigjaz picture Faigjaz  路  3Comments

mitosandov picture mitosandov  路  3Comments

jisqaqov picture jisqaqov  路  3Comments

watalberto picture watalberto  路  3Comments

lilling picture lilling  路  3Comments