playbook_ui_docs 13.34.1.pre.alpha.pbntr258paginationkitforreact3411 → 13.34.1.pre.alpha.pbntr258paginationkitforreact3413

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 001e3e67e8783f5029de10cc6292b39f6e34ee814db14e35c7d8be038bcdb4a4
-  data.tar.gz: e317834cd3c6e2ea2bbf9dbdaf9b426fbb7e0557f1d8cfdc7f2e022efbe6550b
+  metadata.gz: f295ceaf7c925c146f404eac99994b1cff46ac282053c418f1d9ff187f9c2b74
+  data.tar.gz: fd5fb198adee2ee685759593074ab31e10fcbba13128b0bd4b7f7fbc22a95590
 SHA512:
-  metadata.gz: 791b343915eb4727d11c4bec266a39a18b487f227bbe74df171ba349ad6fcc060915c177c989f8dd235d844401ee01e9671abfd94f11392411e41474e82a258b
-  data.tar.gz: 226b3d26739fe58eefdfe7b5647f551f0fb334714c498ac40f5d06239b6a642e60f1d12e57cb487fd58b6f3bc03e5f714a528aaebd6f9edb4dda5300ddb88588
+  metadata.gz: a87997f56ff50a3b38153640bddd8d749f4f5b223e8fe210a6e2305b5f977924dce67fe62ff30f366122a53f5427a1777ad1973e7de4d814b3bf5e2e7ee3a7ec
+  data.tar.gz: 6edb081d3d4785686bd0a02519c7911b9492a615589d2d897eb8444fe23a934647063dfcc6003086991873bf4ea3988f0f31503469e2d9fd0304bc59a6219c05

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -5,14 +5,14 @@ import Pagination from '../_pagination'
 const PaginationDefault = (props) => {
 
     return (
-  <>
-     <Pagination
-         defaultPage={3}
-         pageRange={5}
-         totalPages={10}
-         {...props}
-      />
-  </>
+      <>
+        <Pagination
+            current={1}
+            range={5}
+            total={10}
+            {...props}
+          />
+      </>
     )
 }
 

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

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { Table, Pagination } from 'playbook-ui'
+
+
+import { data } from "./data";
+
+const PaginationPageChange = (props) => {
+
+  const [activePage, setActivePage] = useState(1);
+  const rowsPerPage = 3;
+  const totalPages = Math.ceil(data.length / rowsPerPage);
+
+  const onPageChange = (pageNumber) => {
+    setActivePage(pageNumber);
+  };
+
+  const currentData = data.slice(
+    (activePage - 1) * rowsPerPage,
+    activePage * rowsPerPage
+  );
+
+
+    return (
+      <div className="App">
+      <Table 
+          marginBottom="xs"
+          responsive="none" 
+          size="sm" 
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{"Column 1"}</Table.Header>
+            <Table.Header>{"Column 2"}</Table.Header>
+            <Table.Header>{"Column 3"}</Table.Header>
+            <Table.Header>{"Column 4"}</Table.Header>
+            <Table.Header>{"Column 5"}</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {currentData.map((row, index) => (
+            <Table.Row key={index}>
+              {row.map((cell, cellIndex) => (
+                <Table.Cell key={cellIndex}>{cell}</Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+ 
+      <Pagination
+          current={1}
+          onChange={onPageChange}
+          range={5}
+          total={totalPages}
+          {...props}
+      />
+    </div>
+    )
+}
+
+export default PaginationPageChange

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

@@ -0,0 +1 @@
+You can use the `onPageChange` prop to control the data of your table. This prop is callback function that will allow you control the state.

data/app/pb_kits/playbook/pb_pagination/docs/data.js

@@ -0,0 +1,23 @@
+export const data = [
+    ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
+    ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
+    ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
+    ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
+    ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
+    ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
+    ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
+    ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
+    ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
+    ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
+    ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
+    ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
+    ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
+    ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
+    ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
+    ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
+    ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
+    ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
+    ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
+    ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
+  ];
+  

data/app/pb_kits/playbook/pb_pagination/docs/example.yml

@@ -5,3 +5,4 @@ examples:
   
   react:
   - pagination_default: Default
+  - pagination_page_change: Page Change

data/app/pb_kits/playbook/pb_pagination/docs/index.js

@@ -1 +1,2 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
+export { default as PaginationPageChange } from './_pagination_page_change.jsx'