fix update api + scoped css

README.md

@@ -47,10 +47,11 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
 <template>
   <grid
     :auto-width="autoWidth"
-    :data="data"
+    :columns="cols"
     :from="from"
     :language="language"
     :pagination="pagination"
+    :rows="rows"
     :search="search"
     :server="server"
     :sort="sort"
@@ -69,14 +70,11 @@ export default {
   data() {
     return {
       autoWidth: true / false, // boolean to automatically set table width
-      data: {
-        // object containing arrays of columns & rows
-        cols: ['column 1', 'column 2'],
-        rows: ['row 1: col 1', 'row 1: col 2']
-      },
+      cols: ['column 1', 'column 2'], // array containing strings of column headers
       from: '.my-element', // string of HTML table selector
       language: {}, // localization dictionary object
       pagination: true / false || {}, // boolean or pagination settings object
+      rows: ['row 1: col 1', 'row 1: col 2'] // array containing row data
       search: true / false || {}, // boolean or search settings object
       server: {}, // server settings object
       sort: true / false || {}, // boolean or sort settings object
@@ -93,13 +91,11 @@ export default {
 ```json
 {
   "autoWidth": true,
-  "data": {
-    "cols": [""],
-    "rows": [""]
-  },
+  "cols": [""],
   "from": undefined,
   "language": undefined,
   "pagination": false,
+  "rows": undefined,
   "search": false,
   "server": undefined,
   "sort": false,
@@ -108,12 +104,6 @@ export default {
 }
 ```
 
-## Known Issues
-
-- The full API for updating the component's data has not yet been implemented.
-- The module currently loads CSS in the global scope. A future release will ensure that CSS is scoped solely to the component itself.
-- Presently, the `mermaid.css` stylesheet, is the only available theme for Grid.js.
-
 ## 🤝 Contributing
 
 Originally authored by [Daniel Sieradski](https://twitter.com/self_agency).

TODO.md

@@ -1,5 +1,3 @@
 ### TODOs
 | Filename | line # | TODO
 |:------|:------:|:------
-| [src/gridjs-vue.vue](src/gridjs-vue.vue#L2) | 2 | Figure out a way to scope CSS to the component rather than the global scope
-| [src/gridjs-vue.vue](src/gridjs-vue.vue#L3) | 3 | Implement full Grid.js API

attributes.json

@@ -3,14 +3,14 @@
     "type": "boolean",
     "description": "Boolean to automatically set table width. Default: true"
   },
+  "gridjs-vue/cols": {
+    "type": "array",
+    "description": "Array containing strings of column headers. Default: undefined"
+  },
   "gridjs-vue/from": {
     "type": "string",
     "description": "String of HTML table selector. Default: undefined"
   },
-  "gridjs-vue/data": {
-    "type": "object",
-    "description": "Object containing arrays of columns [cols] & rows [rows]. Default: { cols: [''], rows: [''] }"
-  },
   "gridjs-vue/language": {
     "type": "object",
     "description": "Localization dictionary object. Default: undefined"
@@ -19,6 +19,10 @@
     "type": ["boolean", "object"],
     "description": "Boolean or pagination settings object. Default: true"
   },
+  "gridjs-vue/rows": {
+    "type": "array",
+    "description": "Array containing row data. Default: undefined"
+  },
   "gridjs-vue/search": {
     "type": ["boolean", "object"],
     "description": "Boolean or search settings object. Default: false"

bili.config.js

@@ -13,7 +13,6 @@ module.exports = {
       css: true,
       runtimeHelpers: true
     },
-    // scss: true,
     babel: {
       presets: ['vue', ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]],
       runtimeHelpers: true,