playbook_ui_docs 14.5.0.pre.rc.6 → 14.5.0.pre.rc.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e03389fbe686b93b0e3a00dfc5dafd740cfed9ad735b69a9c5a63d3ba07f7a20
-  data.tar.gz: 26fcbef8dcc3ce150fe5b7b72bf1b3e41cbd05cf55d819d2ef469d9490b91fa4
+  metadata.gz: 7f9ae020f708e6dcede28890560329228e54697a71a5f01afe935523d878a22b
+  data.tar.gz: 792764c6d02e9dbcb61ffe1b95d0880089fdc16316fe2d70732514eb2111d243
 SHA512:
-  metadata.gz: 0611605ba48cb5c17c1142a419144f95a07d61b8151e46c927534362258b8502ee2849ec519f59f304c063ac1635bb5a5399ec544c9767d439fc2600559dd7de
-  data.tar.gz: 5a92447e1966cca59113c551e91a6335145d47cab2dd0885f250813a9c917450d5c611cffadea07311f878eb220f5f8e70c6a30b3b121aba8f52d272cebd5e4b
+  metadata.gz: 98f727a215dc9eccd1884bc3d6184ddfbeb5ed65c34c1fdc14b92494186f5b6def975f1c159135f97cb3d83eefb09489fa7719c5bddd94289e24477c0263ab6f
+  data.tar.gz: 6ec5fe85057e1c238ad524e75357e3ea009405654b9fba7b65a5cc50e05303ff7504b09148b6023e4931fc7f6f77ccaabcc4d6aa20c96337e3572551fd6b465b

data/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}

data/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}`.