0

Ok, so i am creating this reusable table using PrimeNG 9.

<p-table [paginator]="true" [rows]="10" dataKey="id" [value]="rows">

The table works fine for me except for 2 factors.

  1. When there are 10 rows, there exists only 1 page. But when I programmatically add the new row to the list of rows, the 11th item must appear in the page 2 of the paginator but the new page isn't created or shown in the paginator n thus cannot be seen. (P.S.- Row is added to the value list of the table, but the page is not created to view it)
  2. When there are 11 rows, and there exists 2 pages (10 + 1 rows) and the 11th item (page 2) is deleted, the page does not get deleted and I don't know how to programmatically delete this page. (P.S.- the item is deleted from the table. Just the page is not).

In both cases, table.reset() works (table is the @viewchild) but the page sort, filters and other configs are lost.

Is there a way we can control the creation or deletion of a page in the paginator since it does not happen automatically? Or any other workarounds for this?

Thanks in advance.

Got a Solution:

The updating of the array should happen in the same component as the table, for the pagination part to also re-render. Updating the row array data elsewhere (service or parent component) somehow did not trigger the change in the paginator.

GhOsT
  • 216
  • 2
  • 5

1 Answers1

1
Every time you do crud operation
Clone or Delete
you need to assign the updated values to Array which is used to populate values in the table 
**[value] = new Array values.**

For instance :
1.After deleting the selected product 
deleteSelectedProducts() {
       // will delete selected product 
        });
    }

2.Need to call the api to get updated product list
and assign that array list to the table **value property**.
**[value] = new Array values.**
INDERPREET THIARA
  • 159
  • 1
  • 8
  • Thanks Inder.. Yes, i am doing the very same. I am passing the array with the row data to another service where the process happens.. A new array instance is created where the the deleted row is removed, or the new row is added, and then is assigned to the passed reference. The items reflect in the table values. No issues here. Its just that the pagination part is not updating along with the values. The numbers in the pagination part below the table does not alter. – GhOsT Aug 05 '21 at 07:33
  • I have checked the code and i have noticed it array is passed to child component to populate the table and CRUD operation take place inside child component . After perfoming CRUD operation updated array list is not assigned or passed to child component table . So once the table gets the updated list problem solved !!! – INDERPREET THIARA Aug 05 '21 at 16:28
  • No. The data is sent from the parent component to the child component with the table. The child then sends the data to a service where the data is manipulated. In this case, a new array is created with the addition or deletion of the row. This alters the table content as expected. But the pagination part does not change. Now i have a solution and you idea helped me. – GhOsT Aug 06 '21 at 04:50