feat: adding server-side plugins

Author: afshinm

docs/examples/server-side-pagination.md

@@ -0,0 +1,46 @@
+---
+id: server-side-pagination
+title: Server Side Pagination
+---
+
+import { Grid, html } from "gridjs";
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useRef } from "react";
+
+<CodeBlock children={
+`
+const grid = new Grid({
+  columns: ['Pokemon', 'URL'],
+  pagination: {
+    limit: 5,
+    server: {
+      url: (prev, page, limit) => \`\${prev}?limit=\${limit}&offset=\${page * limit}\`
+    }
+  },
+  server: {
+    url: 'https://pokeapi.co/api/v2/pokemon',
+    then: data => data.results.map(pokemon => [
+      pokemon.name, html(\`<a href='\${pokemon.url}'>Link to \${pokemon.name}</a>\`)
+    ]),
+    total: data => data.count
+  } 
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  ${code}
+ 
+  const wrapperRef = useRef(null);
+   
+  useEffect(() => {
+    grid.render(wrapperRef.current);
+  });
+  
+  return (
+    <div ref={wrapperRef} />
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useRef, html }} />

docs/examples/server-side-search.md

@@ -0,0 +1,42 @@
+---
+id: server-side-search
+title: Server Side Search
+---
+
+import { Grid } from "gridjs";
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useRef } from "react";
+
+<CodeBlock children={
+`
+const grid = new Grid({
+  search: {
+    server: {
+      url: (prev, keyword) => \`\${prev}?search=\${keyword}\`
+    }
+  },
+  columns: ['Title', 'Director', 'Producer'],
+  server: {
+    url: 'https://swapi.dev/api/films/',
+    then: data => data.results.map(movie => [movie.title, movie.director, movie.producer])
+  } 
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  ${code}
+ 
+  const wrapperRef = useRef(null);
+   
+  useEffect(() => {
+    grid.render(wrapperRef.current);
+  });
+  
+  return (
+    <div ref={wrapperRef} />
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useRef }} />

docs/examples/server-side-sort.md

@@ -0,0 +1,63 @@
+---
+id: server-side-sort
+title: Server Side Sorting
+---
+
+import { Grid, html } from "gridjs";
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useRef } from "react";
+
+Server side search:
+
+<CodeBlock children={
+`
+const grid = new Grid({
+  sort: {
+    multiColumn: false,
+    server: {
+      url: (prev, columns) => {
+       if (!columns.length) return prev;
+       
+       const col = columns[0];
+       const dir = col.direction === 1 ? 'asc' : 'desc';
+       let colName = ['name', 'rarity'][col.index];
+       
+       return \`\${prev}&order=\${colName}&dir=\${dir}\`;
+     }
+    }
+  },
+  columns: [
+   'Name',
+   'Rarity',
+   {
+     name: 'Image',
+     width: '50px',
+     sort: false,
+     formatter: (img) => html(\`<center><img src='\${img}'/></center>\`)
+   }
+  ],
+  server: {
+    url: 'https://api.scryfall.com/cards/search?q=Inspiring',
+    then: data => data.data.map(card => [card.name, card.rarity, card.image_uris.small]),
+    total: data => data.total_cards
+  } 
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  ${code}
+ 
+  const wrapperRef = useRef(null);
+   
+  useEffect(() => {
+    grid.render(wrapperRef.current);
+  });
+  
+  return (
+    <div ref={wrapperRef} />
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useRef, html }} />

docs/examples/server.md

@@ -1,6 +1,6 @@
 ---
 id: server
-title: Server Side
+title: Import server-side data
 ---
 
 import { Grid } from "gridjs";

sidebars.js

@@ -27,6 +27,15 @@ module.exports = {
         'examples/server',
         'examples/from',
       ]
+    }, {
+      type: 'category',
+      label: 'Server-side',
+      items: [
+        'examples/server',
+        'examples/server-side-search',
+        'examples/server-side-pagination',
+        'examples/server-side-sort',
+      ]
     }, {
       type: 'category',
       label: 'Advanced',