To the moon and back

- Added support for height, resizable, and fixedHeader
- Killed off $gridjs.render in favor of new and improved $gridjs.helper function
- Fixed style overrides
- Fixed per-table stylesheets
- Moved most dependencies to Skypack
- Added code examples matching those on Grid.js website that also serve as test proofs

Signed-off-by: Daniel Sieradski <[email protected]>

Author: selfagency

.eslintrc.js

@@ -4,16 +4,11 @@ module.exports = {
     browser: true,
     node: true
   },
-  extends: [
-    'plugin:vue/essential',
-    'eslint:recommended',
-    '@vue/prettier',
-    'plugin:import/errors',
-    'plugin:import/warnings'
-  ],
+  extends: ['plugin:vue/recommended', 'eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings'],
   parserOptions: {
     parser: 'babel-eslint'
   },
+  plugins: ['html'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

README.md

@@ -12,6 +12,8 @@ A Vue wrapper component for [Grid.js](https://gridjs.io).
 npm install gridjs-vue
 ```
 
+Also available on unpkg and Skypack!
+
 ### Component Registration
 
 #### Local Registration
@@ -47,7 +49,7 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
 
 ```html
 <template>
-  <grid :columns="columns" :rows="rows"></grid>
+  <grid :columns="columns" :rows="rows" ref="myTable"></grid>
 </template>
 
 <script>
@@ -78,9 +80,12 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
   "autoWidth": true,
   "className": undefined,
   "columns": [""],
+  "fixedHeader": false,
   "from": undefined,
+  "height": undefined,
   "language": undefined,
   "pagination": false,
+  "resizable": true,
   "rows": undefined,
   "search": false,
   "server": undefined,
@@ -99,9 +104,12 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
     :auto-width="autoWidth"
     :class-name="className"
     :columns="columns"
+    :fixed-header="fixedHeader"
     :from="from"
+    :height="height"
     :language="language"
     :pagination="pagination"
+    :resizable="resizable"
     :rows="rows"
     :search="search"
     :server="server"
@@ -187,28 +195,37 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
         // Boolean to automatically set table width
         autoWidth: true / false,
 
-        // Object with CSS class names
+        // Object with CSS class definitions (see Grid.js API)
         className: {},
 
-        // Localization dictionary object
+        // Boolean to fix positioning of table header
+        fixedHeader: true / false,
+
+        // CSS string setting explicit table height
+        height: '500px',
+
+        // Localization dictionary object (see Grid.js API)
         language: {},
 
         // Boolean or pagination settings object
         pagination: true / false || {},
 
-        // Boolean
+        // Boolean to enable column resizing
+        resizable: true / false || {}
+
+        // Boolean to enable search bar
         search: true / false || {},
 
         // Boolean or sort settings object
         sort: true / false || {},
 
-        // Object with CSS styles
-        style: {},
+        // Object with CSS styles (see Grid.js API)
+        styles: {},
 
         // String with name of theme or 'none' to disable
         theme: 'mermaid' || 'none',
 
-        // String with css width value
+        // CSS string setting explicit table width
         width: '100%',
       }
     }
@@ -218,39 +235,38 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
 
 ### 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.
-
-#### \$gridjs.uuid
+#### \$gridjs.helper
 
-Returns a unique identifier that can be used to reference the current cell.
+Simplifies use of Vue components in table formatters.
 
 Usage:
 
 ```js
-const ref = this.$gridjs.uuid()
-```
-
-#### \$gridjs.h
+const components = { MyComponent }
+const template = `<my-component :content="content"></my-component>`
+const data = {
+  content: '🥳'
+}
 
-Renders a [Preact virtual DOM instance](https://gridjs.io/docs/examples/virtual-dom). Grid.js is built in Preact, so why not take advantage of it?
+this.$gridjs.helper(components, template, data)
+```
 
-Usage:
+Example:
 
 ```js
-this.columns = [
-  {
-    name: 'Actions',
-    formatter: (cell, row) => {
-      return this.$gridjs.h('button', {
-        onClick: () => alert(`
-          Editing "${row.cells[0].data}"
-        `)
-      }, 'Edit')
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          name: 'Name',
+          formatter: cell =>
+            this.$gridjs.helper({ MyComponent }, `<my-component :content="content"></my-component>`, { content: cell })
+        }
+      ]
     }
-  },
-  { ... },
-  { ... }
-]
+  }
+}
 ```
 
 #### \$gridjs.html
@@ -264,47 +280,33 @@ this.columns = [
   {
     name: 'Model',
     formatter: cell => this.$gridjs.html(`<b>${cell}</b>`)
-  },
-  { ... },
-  { ... }
+  }
 ]
 ```
 
-#### \$gridjs.render
+#### \$gridjs.h
 
-Renders a Vue component. Refer to [Vue documentation](https://vuejs.org/v2/guide/render-function.html#createElement-Arguments) for advanced options.
+Renders a [Preact virtual DOM instance](https://gridjs.io/docs/examples/virtual-dom). Grid.js is built in Preact, so why not take advantage of it?
 
 Usage:
 
 ```js
-this.$gridjs.render(ref, component, { props }, { options })
-```
-
-Example:
-
-```js
-import FormatterComponent from './FormatterComponent.vue'
-
-[...]
-
 this.columns = [
   {
-    name: 'Model',
-    formatter: cell => {
-      const current = this.$gridjs.uuid()
-      this.$gridjs.render(
-        `[data-ref="${current}"]`,
-        FormatterComponent,
+    name: 'Actions',
+    formatter: (cell, row) => {
+      return this.$gridjs.h(
+        'button',
         {
-          content: cell,
-          otherProp: true
-        }
+          onClick: () =>
+            alert(`
+          Editing "${row.cells[0].data}"
+        `)
+        },
+        'Edit'
       )
-      return this.$gridjs.html(`<div data-ref="${current}"></div>`)
     }
-  },
-  { ... },
-  { ... }
+  }
 ]
 ```
 

attributes.json

@@ -5,12 +5,16 @@
   },
   "gridjs-vue/classNames": {
     "type": "object",
-    "description": "Object containing CSS class names. Default: undefined"
+    "description": "Object containing CSS class definitions. Default: undefined"
   },
-  "gridjs-vue/cols": {
+  "gridjs-vue/columns": {
     "type": "array",
     "description": "Array containing strings of column headers. Default: undefined"
   },
+  "gridjs-vue/fixedHeader": {
+    "type": "boolean",
+    "description": "Boolean to fix position of table header. Default: false"
+  },
   "gridjs-vue/from": {
     "type": ["string", "function"],
     "description": "String of HTML table selector or function returning HTML table string. Default: undefined"
@@ -27,6 +31,10 @@
     "type": ["boolean", "object"],
     "description": "Boolean or pagination settings object. Default: true"
   },
+  "gridjs-vue/resizable": {
+    "type": "boolean",
+    "description": "Boolean activating resizable columns. Default: false"
+  },
   "gridjs-vue/rows": {
     "type": ["array", "function"],
     "description": "Array containing or function returning row data. Default: undefined"

examples/advanced.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Grid.js Vue Component Test</title>
+    <script src="https://unpkg.com/vue"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script type="module">
+      import NestedHeader from './advanced/nested-header.mjs'
+      import ForceRender from './advanced/force-render.mjs'
+      import VirtualDom from './advanced/virtual-dom.mjs'
+      import MultiColumnSort from './advanced/multi-column-sort.mjs'
+      import CustomSort from './advanced/custom-sort.mjs'
+      import StockMarket from './advanced/stock-market.mjs'
+      import Events from './advanced/events.mjs'
+
+      new window.Vue({
+        el: '#app',
+        name: 'GridTestAdvanced',
+        components: {
+          NestedHeader,
+          ForceRender,
+          VirtualDom,
+          MultiColumnSort,
+          CustomSort,
+          StockMarket,
+          Events
+        },
+        template: `
+          <div>
+            <div>
+              <h2>Nested Header</h2>
+              <nested-header></nested-header>
+            </div>
+
+            <div>
+              <h2>Force Render</h2>
+              <p>This component is reactive and updates itself when you change the component's data or options in Vue. Interacting with the Grid.js instance directly should not be necessary but remains optional.</p>
+              <force-render></force-render>
+            </div>
+
+            <div>
+              <h2>Virtual DOM</h2>
+              <virtual-dom></virtual-dom>
+            </div>
+
+            <div>
+              <h2>Multi-column Sort</h2>
+              <multi-column-sort></multi-column-sort>
+            </div>
+
+            <div>
+              <h2>Custom Sort</h2>
+              <custom-sort></custom-sort>
+            </div>
+
+            <div>
+              <h2>Stock Market</h2>
+              <stock-market></stock-market>
+            </div>
+
+            <div>
+              <h2>Events</h2>
+              <events></events>
+            </div>
+          </div>
+        `
+      })
+    </script>
+  </body>
+</html>

examples/advanced/custom-sort.mjs

@@ -0,0 +1,42 @@
+import { Grid } from '../../dist/index.esm.js'
+
+export default {
+  name: 'CustomSort',
+  components: {
+    Grid
+  },
+  data() {
+    return {
+      columns: [
+        'Name',
+        'Email',
+        {
+          name: 'Phone Number',
+          sort: {
+            compare: (a, b) => {
+              const code = x => x.split(' ')[0]
+
+              if (code(a) > code(b)) {
+                return 1
+              } else if (code(b) > code(a)) {
+                return -1
+              } else {
+                return 0
+              }
+            }
+          }
+        }
+      ],
+      sort: true,
+      rows: [
+        ['John', '[email protected]', '+353 40 222 3333'],
+        ['Mark', '[email protected]', '+1 22 888 4444'],
+        ['Eoin', '[email protected]', '+355 10 878 5554'],
+        ['Nisen', '[email protected]', '+313 333 1923']
+      ]
+    }
+  },
+  template: `
+    <div><grid :columns="columns" :rows="rows" :sort="sort"></grid></div>
+  `
+}