another attempt at importing cssing

Author: selfagency

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier', 'plugin:import/errors', 'plugin:import/warnings'],
   parserOptions: {
     parser: 'babel-eslint'
   },

README.md

@@ -1,92 +1,75 @@
 # gridjs-vue
 
-![gridjs-vue](https://user-images.githubusercontent.com/2541728/84843482-ffc31c00-b015-11ea-95e8-dc6fb3931ad5.png)
+<center><img src="https://user-images.githubusercontent.com/2541728/84843482-ffc31c00-b015-11ea-95e8-dc6fb3931ad5.png" alt="gridjs-vue logo" /></center>
 
-A [Vue.js](https://vuejs.org) wrapper component for [Grid.js](https://grid.io)
-
-### 🏠 [Homepage](https://gridjs.io)
+A Vue wrapper component for [Grid.js](https://gridjs.io).
 
 ## Install
 
 ```sh
-yarn install gridjs-vue || npm install gridjs-vue
+npm install gridjs-vue
 ```
 
-## Component Registration
+### Component Registration
 
-### Global Registration
+#### Local Registration
 
-```js
-/* in `main.js` or wherever you specify your global components */
-import Grid from 'gridjs-vue'
+```html
+<script>
+  import Grid from 'gridjs-vue'
 
-Vue.use(Grid)
+  export default {
+    components: {
+      Grid
+    }
+  }
+</script>
 ```
 
-### Local Registration
+#### Global Registration
 
-```vue
-<script>
+```js
+/* in `main.js` or wherever you specify your global components */
 import Grid from 'gridjs-vue'
 
-export default {
-  components: {
-    Grid
-  }
-}
-</script>
+Vue.use(Grid)
 ```
 
 ## Usage
 
-Pass `cols` and either `rows`, `from`, or `server` as a data source. Everything else is optional.
+Pass `cols` (an array of column headers) and either `rows`, `from`, or `server` as a data source to the component. Everything else is optional.
 
 Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific configuration options.
 
-```vue
+### Basic Example
+
+```html
 <template>
-  <grid
-    :auto-width="autoWidth"
-    :cols="cols"
-    :from="from"
-    :language="language"
-    :pagination="pagination"
-    :rows="rows"
-    :search="search"
-    :server="server"
-    :sort="sort"
-    :width="width"
-  ></grid>
+  <grid :cols="cols" :rows="rows"></grid>
 </template>
 
 <script>
-import Grid from 'gridjs-vue'
-
-export default {
-  name: 'MyTable',
-  components: {
-    Grid
-  },
-  data() {
-    return {
-      autoWidth: true / false, // boolean to automatically set table width
-      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
-      theme: 'mermaid', // string with name of theme or 'none' to disable
-      width: '100%' // string with css width value
+  import Grid from 'gridjs-vue'
+
+  export default {
+    name: 'Cars',
+    components: {
+      Grid
+    },
+    data() {
+      return {
+        cols: ['Make', 'Model', 'Year', 'Color'],
+        rows: [
+          ['Ford', 'Fusion', '2011', 'Silver'],
+          ['Chevrolet', 'Cruz', '2018', 'White']
+        ]
+      }
     }
   }
-}
 </script>
 ```
 
-### Default settings
+### Default Options
 
 ```json
 {
@@ -104,6 +87,85 @@ export default {
 }
 ```
 
+### Extended Options
+
+```html
+<template>
+  <grid
+    :auto-width="autoWidth"
+    :cols="cols"
+    :from="from"
+    :language="language"
+    :pagination="pagination"
+    :rows="rows"
+    :search="search"
+    :server="server"
+    :sort="sort"
+    :width="width"
+  ></grid>
+</template>
+
+<script>
+  import Grid from 'gridjs-vue'
+
+  export default {
+    name: 'MyTable',
+    components: {
+      Grid
+    },
+    data() {
+      return {
+        // REQUIRED:
+
+        // An array containing strings of column headers
+        cols: ['col 1', 'col 2'],
+
+        // AND EITHER an array containing row data
+        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 a server settings object
+        server() ({
+          url: 'https://api.com/search?q=my%20query',
+          then: res => res.data.map(col => [col1.data, col2.data]),
+          handle: res => res.status === 404
+            ? { data: [] } : res.ok
+            ? res.json() : new Error('Something went wrong')
+        }),
+
+        // OPTIONAL:
+
+        // Boolean to automatically set table width
+        autoWidth: true / false,
+
+        // Localization dictionary object
+        language: {},
+
+        // Boolean or pagination settings object
+        pagination: true / false || {},
+
+        // Boolean or search settings object
+        search: true / false || {},
+
+        // Boolean or sort settings object
+        sort: true / false || {},
+
+        // String with name of theme or 'none' to disable
+        theme: 'mermaid',
+
+        // String with css width value
+        width: '100%',
+      }
+    }
+  }
+</script>
+```
+
 ## 🤝 Contributing
 
 Originally authored by [Daniel Sieradski](https://twitter.com/self_agency).