[PBNTR-532] Add multiple pagination components example and dynamic ke…

…y copy (#3715)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBNTR-532](https://runway.powerhrg.com/backlog_items/PBNTR-532) updates
the react pagination kit doc example and copy to show a dev how to
implement dynamic keys to keep multiple pagination components on a page
in sync.

**Screenshots:** Screenshots to visualize your addition/change
<img width="1078" alt="for PR page change doc example and copy"
src="https://github.com/user-attachments/assets/a65c5670-9715-4d26-9516-a64a6260b91e">


**How to test?** Steps to confirm the desired behavior:
1. Go to the react pagination kit page [Page Change doc
example](https://pr3715.playbook.beta.px.powerapp.cloud/kits/pagination/react#page-change)
and see the updated copy.
2. Click on any number or the forward/backward carets in either the top
or bottom pagination bar: the table data should update and both
pagination bars should update to the new activePage number.

#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
~~- [ ] **TESTS** I have added test coverage to my code.~~

Co-authored-by: Nida Ghuman <[email protected]>

playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -22,6 +22,16 @@ const PaginationPageChange = (props) => {
 
     return (
       <div className="App">
+      <Pagination
+          current={activePage}
+          key={`pagination-top-${activePage}`}
+          marginBottom="xs"
+          onChange={onPageChange}
+          range={5}
+          total={totalPages}
+          {...props}
+      />
+
       <Table 
           marginBottom="xs"
           responsive="none" 
@@ -49,7 +59,8 @@ const PaginationPageChange = (props) => {
       </Table>
 
       <Pagination
-          current={1}
+          current={activePage}
+          key={`pagination-bottom-${activePage}`}
           onChange={onPageChange}
           range={5}
           total={totalPages}

playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md

@@ -1 +1,3 @@
-You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+
+To ensure synchronization between multiple pagination components on a single page, use unique, dynamic keys for each pagination instance. Each Pagination component should have its own dynamic key that reflects the current active page: this example uses `pagination-top-${activePage}` and `pagination-bottom-${activePage}`.