PrimeNG 9 : Creating a new page or deleting an existing page in a paginated p-table - How?

Question

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.

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)
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.

INDERPREET THIARA INDERPREET THIARA · Accepted Answer · 2021-08-04T18:29:28

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.**

PrimeNG 9 : Creating a new page or deleting an existing page in a paginated p-table - How?

1 Answers