feat: virtual dom

docs/examples/react-cells.md

@@ -0,0 +1,109 @@
+---
+id: react-cells
+title: React Component in cells
+keywords:
+ - javascript
+ - table
+ - javascript table
+ - gridjs
+ - grid js
+ - react
+ - react component
+---
+
+import { Grid, h, createRef as gCreateRef, Component as gComponent } from "gridjs";
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useRef } from "react";
+import ReactDOM from 'react-dom';
+import * as faker from 'faker';
+
+Grid.js uses Preact to render the elements and that means that you can take advantage of Preact's Virtual DOM and render
+complex cells. In this example, we want to render React components in our cells.
+
+First of all, let's import `Component` and `createRef` from Grid.js:
+```js
+import { 
+  Grid,
+  h,
+  createRef as gCreateRef,
+  Component as gComponent 
+} from "gridjs";
+```
+
+:::info
+`gComponent` and `gCreateRef` are both coming from Grid.js package. 
+I have renamed them in this example to avoid naming conflicts with React. 
+:::
+
+Next, we can create a component named `ReactComponent`, that takes one input (our React component) mounts it to our table:
+
+```js
+class ReactComponent extends gComponent {
+  ref = gCreateRef(null);
+
+  componentDidMount() {
+    ReactDOM.render(this.props.element, this.ref.current);
+  }
+
+  render() {
+    return h('div', { ref: this.ref });
+  }
+}
+```
+
+Here is the finalized example:
+
+<CodeBlock children={
+`
+class ReactComponent extends gComponent {
+  ref = gCreateRef(null);
+
+  componentDidMount() {
+    ReactDOM.render(this.props.element, this.ref.current)
+  }
+
+  render() {
+    return h('div', { ref: this.ref });
+  }
+}
+const grid = new Grid({
+  columns: [
+    'Name',
+    'Email',
+    'Actions'
+  ],
+  data: Array(5).fill().map(x => [
+    faker.name.findName(),
+    faker.internet.email(),
+    h(ReactComponent, { element: <b>Boom!!</b> })
+  ])
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  ${code}
+
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    grid.render(wrapperRef.current);
+  });
+
+  return (
+    <div ref={wrapperRef} />
+  );
+}
+`
+} live={true} scope={{ 
+  Grid,
+  CodeBlock,
+  useEffect,
+  useRef,
+  faker, 
+  h,
+  gComponent,
+  gCreateRef,
+  ReactDOM 
+}} />

docs/examples/virtual-dom.md

@@ -0,0 +1,78 @@
+---
+id: virtual-dom
+title: Virtual DOM
+keywords:
+ - javascript
+ - table
+ - javascript table
+ - gridjs
+ - grid js
+ - preact
+ - virtual DOM
+ - vdom
+---
+
+import { Grid, h } from "gridjs";
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useRef } from "react";
+import * as faker from 'faker';
+
+Grid.js uses Preact to render the elements and that means that you can take advantage of Preact's Virtual DOM and render
+complex cells.
+
+Simply, import `h` from the `gridjs` package:
+
+```js
+import { h } from "gridjs";
+```
+
+Then, create a custom Preact component:
+
+```js
+function bold(text) {
+  return h('b', {}, text);
+}
+```
+
+Finally, connect the component to Grid.js:
+
+<CodeBlock children={
+`
+function bold(text) {
+  return h('b', {}, text);
+}
+const grid = new Grid({
+  columns: [
+      'Name',
+      'Email'
+   ],
+  data: Array(5).fill().map(x => [
+    faker.name.findName(),
+    bold(faker.internet.email())
+  ])
+});
+`
+}
+ transformCode={(code) => 
+`
+function () {
+  ${code}
+
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    grid.render(wrapperRef.current);
+  });
+
+  return (
+    <div ref={wrapperRef} />
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useRef, faker, h }} />
+
+<br/>
+
+:::tip
+Explore [Preact's documentation](https://preactjs.com/guide/v10/components) for more details.
+:::

sidebars.js

@@ -61,6 +61,8 @@ module.exports = {
         'examples/force-render',
         'examples/cell-formatting',
         'examples/html-cells',
+        'examples/virtual-dom',
+        'examples/react-cells',
         'examples/multi-sort',
         'examples/custom-sort',
         'examples/i18n',