feat: pagination

docs/examples/pagination.md

@@ -0,0 +1,76 @@
+---
+id: pagination
+title: Pagination
+---
+
+import { Grid } from "gridjs";
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useRef } from "react";
+
+Pagination can be enabled by setting `pagination: true`:
+
+<CodeBlock children={
+`
+const grid = new Grid({
+  columns: ['Name', 'Email', 'Phone Number'],
+  pagination: true,
+  data: [
+    ['John', '[email protected]', '(353) 01 222 3333'],
+    ['Mark', '[email protected]',   '(01) 22 888 4444']
+  ]
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  ${code}
+
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    grid.render(wrapperRef.current);
+  });
+
+  return (
+    <div ref={wrapperRef} />
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useRef }} />
+
+You can also change the default settings of the pagination plugin:
+
+
+<CodeBlock children={
+`
+const grid = new Grid({
+  columns: ['Name', 'Email', 'Phone Number'],
+  pagination: {
+    limit: 1
+  },
+  data: [
+    ['John', '[email protected]', '(353) 01 222 3333'],
+    ['Mark', '[email protected]',   '(01) 22 888 4444']
+  ]
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  ${code}
+
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    grid.render(wrapperRef.current);
+  });
+
+  return (
+    <div ref={wrapperRef} />
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useRef }} />
+

sidebars.js

@@ -4,6 +4,7 @@ module.exports = {
     Features: ['mdx'],
     Examples: [
       'examples/hello-world',
+      'examples/pagination',
       'examples/from'
     ]
   },