fix css module issue and update to latest grid.js api

Author: selfagency

README.md

@@ -74,6 +74,7 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
 ```json
 {
   "autoWidth": true,
+  "classNames": undefined,
   "cols": [""],
   "from": undefined,
   "language": undefined,
@@ -82,6 +83,7 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
   "search": false,
   "server": undefined,
   "sort": false,
+  "styles": undefined,
   "theme": "mermaid",
   "width": "100%"
 }
@@ -93,6 +95,7 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
 <template>
   <grid
     :auto-width="autoWidth"
+    :class-names="classNames"
     :cols="cols"
     :from="from"
     :language="language"
@@ -101,6 +104,7 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
     :search="search"
     :server="server"
     :sort="sort"
+    :styles="styles"
     :width="width"
   ></grid>
 </template>
@@ -117,19 +121,43 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
       return {
         // REQUIRED:
 
-        // An array containing strings of column headers
+        // An array containing strings of column headers (`columns` in the Grid.js API)
         cols: ['col 1', 'col 2'],
 
-        // AND EITHER an array containing row data
+        // AND EITHER an array containing row data (`data` in the Grid.js API)
         rows: [
           ['row 1 col 1', 'row 1 col 2'],
           ['row 2 col 1', 'row 2 col 2']
         ],
 
-        // OR a string of an HTML table selector to import
-        from: '.my-element'
+        // OR an array containing JSON row data
+        rows: [
+          { 'col 1': 'row 1', 'col 2': 'row 1' },
+          { 'col 1': 'row 2', 'col 2': 'row 2' }
+        ]
+
+        // OR a function returning an array of row data
+        rows() {
+          return [
+            { 'col 1': 3 + 4, 'col 2': 5 + 6 },
+            { 'col 1': 1 * 2, 'col 2': 7 * 8 }
+          ]
+        }
 
-        // OR a server settings object
+        // OR a string of an HTML table selector to import
+        from: '.my-element',
+
+        // OR a function returning an HTML table string
+        from() {
+          return `
+            <table>
+              <tr><th>column 1</th></tr>
+              <tr><td>${1 * 2}</td></tr>
+            </table>
+          `
+        }
+
+        // OR a server settings function or object
         server() ({
           url: 'https://api.com/search?q=my%20query',
           then: res => res.data.map(col => [col1.data, col2.data]),
@@ -143,18 +171,24 @@ 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 (`className` in the Grid.js API)
+        classNames: {},
+
         // Localization dictionary object
         language: {},
 
         // Boolean or pagination settings object
         pagination: true / false || {},
 
-        // Boolean or search settings object
-        search: true / false || {},
+        // Boolean
+        search: true / false,
 
         // Boolean or sort settings object
         sort: true / false || {},
 
+        // Object with CSS styles (`style` in the Grid.js API)
+        styles: {},
+
         // String with name of theme or 'none' to disable
         theme: 'mermaid',
 

babel.config.js

@@ -5,11 +5,14 @@ module.exports = {
     format: ['cjs', 'esm', 'umd'],
     bundleNodeModules: true,
     minify: true,
-    moduleName: 'Grid'
+    moduleName: 'Grid',
+    extractCSS: false
   },
   plugins: {
     vue: {
-      runtimeHelpers: true
+      target: 'browser',
+      runtimeHelpers: true,
+      css: true
     },
     babel: {
       presets: ['vue', ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]],
@@ -18,5 +21,6 @@ module.exports = {
       configFile: false
     },
     'node-resolve': true
-  }
+  },
+  external: 'crypto'
 }