From 6c349be92b5e7e41b5dd30afd8a82408177e1c53 Mon Sep 17 00:00:00 2001
From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com>
Date: Tue, 24 Sep 2024 10:07:56 -0400
Subject: [PATCH] [PBNTR-532] Add multiple pagination components example and
dynamic key 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
**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
---
.../pb_pagination/docs/_pagination_page_change.jsx | 13 ++++++++++++-
.../docs/_pagination_page_change_react.md | 4 +++-
2 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx b/playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
index b5c97e6fc6..3a3a4718d7 100644
--- a/playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
+++ b/playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
@@ -22,6 +22,16 @@ const PaginationPageChange = (props) => {
return (