feat: xml example

Author: afshinm

docs/examples/server-side-search.md

@@ -15,7 +15,8 @@ import { Grid } from "gridjs";
 import CodeBlock from "@theme/CodeBlock"
 import { useEffect, useRef } from "react";
 
-Add `server` config to your search definition to enable server-side search:
+Add `server` config to your search definition to enable server-side search. Note that in this example, we have to handle
+the HTTP status code 404 ourselves because api.scryfall.com return 404 error if there is no matching record in `?q=` query string:
 
 <CodeBlock children={
 `
@@ -29,6 +30,13 @@ const grid = new Grid({
   columns: ['Name', 'Language', 'Released At', 'Artist'],
   server: {
     url: 'https://api.scryfall.com/cards',
+    handle: (res) => {
+      // no matching records found
+      if (res.status === 404) return {data: []};
+      if (res.ok) return res.json();
+      
+      throw Error('oh no :(');
+    },
     then: data => data.data.map(card => [card.name, card.lang, card.released_at, card.artist])
   } 
 });

docs/examples/xml.md

@@ -0,0 +1,67 @@
+---
+id: xml
+title: Import XML
+keywords:
+ - javascript
+ - table
+ - javascript table
+ - gridjs
+ - grid js
+ - import
+ - import data
+ - import xml
+ - xml
+---
+
+import { Grid } from "gridjs";
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useRef } from "react";
+
+Using the `handler` callback you can parse and handle HTTP calls yourself. The dafault handler tries to cast the response
+to a JSON format but you can override it to parse the data in a different format.
+
+In this example, we are parsing `https://gridjs.io/sitemap.xml` which is a XML formatted document:
+
+<CodeBlock children={
+`
+const grid = new Grid({
+  sort: true,
+  search: true,
+  pagination: true,
+  columns: ['Location', 'Change Frequency', 'Priority'],
+  server: {
+    url: 'https://gridjs.io/sitemap.xml',
+    handle: (res) => {
+      return res.text().then(str => (new window.DOMParser()).parseFromString(str, "text/xml"));
+    },
+    then: data => {
+      return Array.from(data.querySelectorAll('url'))
+        .map(row => [
+          row.querySelector('loc').innerHTML,
+          row.querySelector('changefreq').innerHTML,
+          row.querySelector('priority').innerHTML,
+        ]);
+    }
+  }
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  ${code}
+ 
+  const wrapperRef = useRef(null);
+   
+  useEffect(() => {
+    grid.render(wrapperRef.current);
+  });
+  
+  return (
+    <div ref={wrapperRef} />
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useRef }} />
+
+<br/>

docs/hello-world.md

@@ -68,11 +68,15 @@ import "gridjs/dist/theme/mermaid.css";
 
 ### React
 
+Here is an example of using Grid.js in a React app (without the `gridjs-react` wrapper)
+
 ```jsx
 import { Grid } from "gridjs";
 import "gridjs/dist/theme/mermaid.css";
 
 function helloWorld () {
+  const wrapperRef = useRef(null);
+
   const grid = new Grid({
     columns: ['Name', 'Email', 'Phone Number'],
     data: [
@@ -82,14 +86,15 @@ function helloWorld () {
   });
 
   useEffect(() => {
-    grid.render(document.getElementById('wrapper'));
+    grid.render(wrapperRef.current);
   });
 
-  return (
-    <div id="wrapper" />
-  );
+  return <div ref={wrapperRef} />;
 }
-
 ```
 
+:::tip
+Above example is just to demonstrate how to import and initiate Grid.js. 
+Please use the `gridjs-react` component instead. See [React integration](./integrations/react.md).
+:::
 

sidebars.js

@@ -42,6 +42,7 @@ module.exports = {
         'examples/import-async',
         'examples/server',
         'examples/from',
+        'examples/xml',
       ]
     }, {
       type: 'category',