✨ add render function

Author: selfagency

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+## Unreleased
+
+- Incorporate ability to use Vue components as formatters
+
 ## [0.4.1] - 2020-07-14
 
 - Update documentation
@@ -11,12 +15,12 @@ All notable changes to this project will be documented in this file. Dates are d
 - Fix global import
 - Add createRef, h, html methods
 
-## [0.3.5] - 28 June 2020
+## [0.3.5] - 2020-06-28
 
 - :wrench: another vain attempt at getting release-it to work [`48919aa`](https://gitlab.com/selfagency/vue-gridjs/commit/48919aa36f757260ca6c15922fe2765a8b3864c5)
 - Release 0.3.5 [`7ca243f`](https://gitlab.com/selfagency/vue-gridjs/commit/7ca243f23db1cdb05006a873b40f4b92bc753651)
 
-## 0.3.4 - 28 June 2020
+## 0.3.4 - 2020-06-28
 
 - fix url [`#5`](https://gitlab.com/selfagency/vue-gridjs/merge_requests/5)
 - fix css module issue and update to latest grid.js api [`5ab77cd`](https://gitlab.com/selfagency/vue-gridjs/commit/5ab77cd6dee279618d8ef23862c85570464bc159)
@@ -26,3 +30,4 @@ All notable changes to this project will be documented in this file. Dates are d
 [unreleased]: https://github.com/grid-js/gridjs-vue/compare/v0.0.1...HEAD
 [0.4.0]: https://gitlab.com/selfagency/vue-gridjs/compare/v0.3.5...v0.4.0
 [0.3.5]: https://gitlab.com/selfagency/vue-gridjs/compare/v0.3.4...v0.3.5
+[0.3.4]: https://gitlab.com/selfagency/vue-gridjs/compare/v0.3.3...v0.3.4

README.md

@@ -71,36 +71,40 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
 </script>
 ```
 
-### Grid.js Helper Functions
+### Helper Functions
 
 If you install the component globally, rather than importing it locally, the following helpers are added to the Vue prototype and are available globally.
 
-#### `this.$gridjs.createRef`
+#### `this.$gridjs.uuid`
 
-Returns a [reference to the Grid.js instance](https://gridjs.io/docs/examples/stock-market).
+Returns a unique identifier that can be used to reference the current cell.
 
-Example:
+Usage:
 
 ```js
-const ref = this.$gridjs.createRef
+const ref = this.$gridjs.uuid()
 ```
 
 #### `this.$gridjs.h`
 
 Renders a [Preact virtual DOM instance](https://gridjs.io/docs/examples/virtual-dom).
 
-Example:
+Usage:
 
 ```js
-{
-  name: 'Actions',
-  formatter: (cell, row) => {
-    return this.$gridjs.h('button', {
-      className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
-      onClick: () => alert(`Editing "${row.cells[0].data}" "${row.cells[1].data}"`)
-    } 'Edit');
-  }
-}
+this.cols = [
+  {
+    name: 'Actions',
+    formatter: (cell, row) => {
+      return this.$gridjs.h('button', {
+        className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
+        onClick: () => alert(`Editing "${row.cells[0].data}" "${row.cells[1].data}"`)
+      } 'Edit');
+    }
+  },
+  { ... },
+  { ... }
+]
 ```
 
 #### `this.$gridjs.html`
@@ -110,10 +114,43 @@ Renders [HTML in a formatter function](https://gridjs.io/docs/examples/html-cell
 Example:
 
 ```js
-{
-  name: 'Name',
+this.cols = [
+  {
+  name: 'Model',
   formatter: (cell) => this.$gridjs.html(`<b>${cell}</b>`)
-}
+  },
+  { ... },
+  { ... }
+]
+```
+
+#### `this.$gridjs.render`
+
+Renders a Vue component. Refer to [Vue documentation](https://vuejs.org/v2/guide/render-function.html#createElement-Arguments) for advanced options.
+
+```js
+this.$gridjs.render(ref, component, { props }, { options })
+```
+
+Usage:
+
+```js
+import FormatterComponent from './FormatterComponent.vue'
+
+[...]
+
+this.cols = [
+  {
+    name: 'Model',
+    formatter: cell => {
+      const current = this.$gridjs.uuid()
+      this.$gridjs.render(`[data-ref="${current}"]`, FormatterComponent, { content: cell, otherProp: true })
+      return this.$gridjs.html(`<div data-ref="${current}"></div>`)
+    }
+  },
+  { ... },
+  { ... }
+]
 ```
 
 ### Default Options