feat: force-render

Author: afshinm

docs/examples/force-render.md

@@ -0,0 +1,47 @@
+---
+id: force-render
+title: forceRender
+---
+
+import { Grid } from "gridjs";
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useRef } from "react";
+
+
+Using `updateConfig()` and `forceUpdate()` function, you can update the config of an existing instance and re-render the
+container.
+
+In this example, we render a Grid.js instance, and then we attempt to update the config object and re-render it after 2 seconds:
+
+<CodeBlock children={
+`
+function () {
+  const wrapper = useRef(null);
+  
+  useEffect(() => {
+    // initial setup
+    const grid = new Grid({
+      columns: ['Name', 'Email', 'Phone Number'],
+      data: [
+        ['John', '[email protected]', '(353) 01 222 3333'],
+      ]
+    }).render(wrapper.current);
+    
+    setTimeout(() => {
+      // lets update the config
+      grid.updateConfig({
+        search: true,
+        data: [
+          ['John', '[email protected]', '(353) 01 222 3333'],
+          ['Mark', '[email protected]',   '(01) 22 888 4444'],
+        ]
+      }).forceRender();
+    }, 2000);
+  });
+  
+  return (
+    <div ref={wrapper} />
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useRef }} />

docs/examples/from.md

@@ -37,7 +37,7 @@ function () {
           </tr>
           <tr>
             <td>Mike</td>
-            <td>[email protected]</td>
+            <td><b>[email protected]</b></td>
           </tr>
         </tbody>
       </table>

docs/examples/hello-world.md

@@ -5,7 +5,7 @@ title: Hello, World!
 
 import { Grid } from "gridjs";
 import CodeBlock from "@theme/CodeBlock"
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 :::tip
 You can interact with the following editor!
@@ -38,3 +38,37 @@ function () {
 `
 } live={true} scope={{ Grid, CodeBlock, useEffect }} />
 
+<br/>
+
+Or you can update the config using `updateConfig`:
+
+<CodeBlock children={
+`
+const grid = new Grid({
+  data: [
+    ['John', '[email protected]', '(353) 01 222 3333'],
+    ['Mark', '[email protected]',   '(01) 22 888 4444']
+  ]
+}).updateConfig({
+  columns: ['Name', 'Email', 'Phone Number'],
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  const wrapper = useRef(null);
+  
+  ${code}
+  
+  useEffect(() => {
+    grid.render(wrapper.current);
+  });
+  
+  return (
+    <div id="wrapper" ref={wrapper} />
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useRef }} />
+

sidebars.js

@@ -41,6 +41,7 @@ module.exports = {
       type: 'category',
       label: 'Advanced',
       items: [
+        'examples/force-render',
         'examples/cell-formatting',
         'examples/html-cells',
         'examples/multi-sort',