feat: adding fixedHeader, height and ReactWrapper exampels

docs/config/fixedHeader.md

@@ -0,0 +1,11 @@
+---
+id: fixedHeader
+title: fixedHeader 
+---
+
+Fixes the header to the top of the table
+
+ - `optional`
+ - Default: `false`
+ - Type: `boolean`
+ - Example: [Fixed Header](../examples/fixed-header.md)

docs/config/height.md

@@ -0,0 +1,13 @@
+---
+id: height
+title: height 
+---
+
+To set the height of the table. 
+
+ - Default: `auto`
+ - Type: `string`
+
+:::note
+`height` sets the height of the table excluding search, pagination, etc.
+:::

docs/examples/fixed-header.md

@@ -0,0 +1,38 @@
+---
+id: fixed-header
+title: Fixed Header 
+keywords:
+ - javascript
+ - table
+ - javascript table
+ - gridjs
+ - grid js
+ - fixed header
+---
+
+import { LiveExample } from "../../lib/liveExample.js";
+
+Simply add `height` and `fixedHeader` to your Grid.js config object to enable fixed header feature:
+
+<LiveExample children={
+`
+const grid = new Grid({
+  columns: [
+      'Name',
+      'Email',
+      'Title',
+   ],
+  sort: true,
+  pagination: true,
+  fixedHeader: true,
+  height: '400px',
+  data: Array(50).fill().map(x => [
+    faker.name.findName(),
+    faker.internet.email(),
+    faker.name.title(),
+  ])
+});
+`
+} />
+
+<br/>

docs/examples/react-cells.md

@@ -11,69 +11,42 @@ keywords:
  - react component
 ---
 
-import ReactDOM from 'react-dom';
 import { LiveExample } from "../../lib/liveExample.js";
+import { _ } from "gridjs-react";
 
 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.
+complex cells. In this example, we want to render React components in the table 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";
-```
+First of all, make sure you have the React wrapper library, [`gridjs-react`](https://github.com/grid-js/gridjs-react), installed:
 
-:::info
-`gComponent` and `gCreateRef` are both coming from Grid.js package. 
-I have renamed them in this example to avoid naming conflicts with React. 
-:::
+```bash
+npm install gridjs-react --save
+```
 
-Next, we can create a component named `ReactComponent`, that takes one input (our React component) mounts it to our table:
+Then, import the `_` function from `gridjs-react` package:
 
 ```js
-class ReactComponent extends gComponent {
-  ref = gCreateRef(null);
-
-  componentDidMount() {
-    ReactDOM.render(this.props.element, this.ref.current);
-  }
-
-  render() {
-    return h('div', { ref: this.ref });
-  }
-}
+import { _ } from "gridjs-react";
 ```
-
-Here is the finalized example:
+ 
+And use it in your table header or body cells. Here is the finalized example:
 
 <LiveExample 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',
+    { 
+      name: 'Email',
+      formatter: (cell) => _(<i>{cell}</i>)
+    },
     'Actions'
   ],
   data: Array(5).fill().map(x => [
     faker.name.findName(),
     faker.internet.email(),
-    h(ReactComponent, { element: <b>Boom!!</b> })
+    _(<button className={"py-2 px-4 border rounded-md text-white bg-blue-600"} onClick={() => alert('clicked!')}>Edit</button>)
   ])
 });
 `
-} scope={{ ReactDOM }} />
+} scope={{ _ }} />

package.json

@@ -18,7 +18,7 @@
     "emotion": "^10.0.27",
     "faker": "^4.1.0",
     "gridjs": "file:../gridjs",
-    "gridjs-react": "^1.5.0",
+    "gridjs-react": "^1.11.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },

sidebars.js

@@ -16,7 +16,9 @@ module.exports = {
       'config/className',
       'config/language',
       'config/width',
+      'config/height',
       'config/autoWidth',
+      'config/fixedHeader',
       'config/search',
       'config/sort',
       'config/pagination',
@@ -36,6 +38,7 @@ module.exports = {
         'examples/sorting',
         'examples/loading-state',
         'examples/wide-table',
+        'examples/fixed-header',
       ]
     }, {
       type: 'category',