Change attribute names to match GridJS API

Signed-off-by: Daniel Sieradski <daniel@self.agency>
grid-js · Jun 8, 2021 · 995c66b · 995c66b
1 parent abdaa15
commit 995c66b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+## [Unreleased]
+
 ## [5.0.1] - 2021-06-08
 
 - Major update!

diff --git a/README.md b/README.md
@@ -39,15 +39,15 @@ Vue.use(GridGlobal)
 
 ## Usage
 
-Pass `cols` (an array of column headers) and either `rows`, `from`, or `server` as a data source to the component. Everything else is optional. Pass in new data to update the table.
+Pass `columns` (an array of column headers) and either `rows`, `from`, or `server` as a data source to the component. Everything else is optional. Pass in new data to update the table.
 
 Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific configuration options. This module may lag behind the main Grid.js module somewhat, so check the API version badge at the top of this README.
 
 ### Basic Example
 
 ```html
 <template>
-  <grid :cols="cols" :rows="rows"></grid>
+  <grid :columns="columns" :rows="rows"></grid>
 </template>
 
 <script>
@@ -60,7 +60,7 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
     },
     data() {
       return {
-        cols: ['Make', 'Model', 'Year', 'Color'],
+        columns: ['Make', 'Model', 'Year', 'Color'],
         rows: [
           ['Ford', 'Fusion', '2011', 'Silver'],
           ['Chevrolet', 'Cruz', '2018', 'White']
@@ -76,16 +76,16 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
 ```json
 {
   "autoWidth": true,
-  "classNames": undefined,
-  "cols": [""],
+  "className": undefined,
+  "columns": [""],
   "from": undefined,
   "language": undefined,
   "pagination": false,
   "rows": undefined,
   "search": false,
   "server": undefined,
   "sort": false,
-  "styles": undefined,
+  "style": undefined,
   "theme": "mermaid",
   "width": "100%"
 }
@@ -97,16 +97,16 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
 <template>
   <grid
     :auto-width="autoWidth"
-    :class-names="classNames"
-    :cols="cols"
+    :class-name="className"
+    :columns="columns"
     :from="from"
     :language="language"
     :pagination="pagination"
     :rows="rows"
     :search="search"
     :server="server"
     :sort="sort"
-    :styles="styles"
+    :style="style"
     :width="width"
   ></grid>
 </template>
@@ -124,11 +124,10 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
         // REQUIRED:
 
         // An array containing strings of column headers
-        // `columns` in the Grid.js API
-        cols: ['col 1', 'col 2'],
+        columns: ['col 1', 'col 2'],
 
         // OR an array containing objects defining column headers
-        cols: [
+        columns: [
           {
             name: 'Column 1',
             id: 'col1'
@@ -189,8 +188,7 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
         autoWidth: true / false,
 
         // Object with CSS class names
-        // `className` in the Grid.js API
-        classNames: {},
+        className: {},
 
         // Localization dictionary object
         language: {},
@@ -205,11 +203,10 @@ Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific co
         sort: true / false || {},
 
         // Object with CSS styles
-        // `style` in the Grid.js API
-        styles: {},
+        style: {},
 
         // String with name of theme or 'none' to disable
-        theme: 'mermaid',
+        theme: 'mermaid' || 'none',
 
         // String with css width value
         width: '100%',
@@ -240,7 +237,7 @@ Renders a [Preact virtual DOM instance](https://gridjs.io/docs/examples/virtual-
 Usage:
 
 ```js
-this.cols = [
+this.columns = [
   {
     name: 'Actions',
     formatter: (cell, row) => {
@@ -263,7 +260,7 @@ Renders [HTML in a formatter function](https://gridjs.io/docs/examples/html-cell
 Example:
 
 ```js
-this.cols = [
+this.columns = [
   {
     name: 'Model',
     formatter: cell => this.$gridjs.html(`<b>${cell}</b>`)
@@ -290,7 +287,7 @@ import FormatterComponent from './FormatterComponent.vue'
 
 [...]
 
-this.cols = [
+this.columns = [
   {
     name: 'Model',
     formatter: cell => {

diff --git a/src/gridjs-vue.mjs b/src/gridjs-vue.mjs
@@ -28,11 +28,11 @@ export default {
       type: Boolean,
       default: true
     },
-    classNames: {
+    className: {
       type: Object,
       default: undefined
     },
-    cols: {
+    columns: {
       type: [Array, Function],
       default: undefined
     },
@@ -99,14 +99,14 @@ export default {
     options() {
       let options = {
         autoWidth: this.autoWidth,
-        columns: this.cols ? this.cols : [this.dict.error.columnsUndefined],
+        columns: this.columns ? this.columns : [this.dict.error.columnsUndefined],
         data: this.tabularData,
         pagination: this.pagination,
         sort: this.sort,
         width: this.width
       }
 
-      if (this.classNames) options.className = this.classNames
+      if (this.className) options.className = this.className
       if (this.from)
         options.from =
           typeof this.from === 'string'
@@ -115,7 +115,7 @@ export default {
       if (this.language) options.language = this.language
       if (this.search) options.search = this.search
       if (this.server) options.server = this.server
-      if (this.styles) options.style = this.styles
+      if (this.style) options.style = this.style
 
       return options
     },
@@ -132,10 +132,10 @@ export default {
     autoWidth() {
       this.update()
     },
-    classNames() {
+    className() {
       this.update()
     },
-    cols() {
+    columns() {
       this.update()
     },
     from() {
@@ -159,7 +159,7 @@ export default {
     sort() {
       this.update()
     },
-    styles() {
+    style() {
       this.update()
     },
     theme() {

diff --git a/test/gridjs-vue-test-no-theme.mjs b/test/gridjs-vue-test-no-theme.mjs
@@ -7,7 +7,7 @@ export default {
   },
   data() {
     return {
-      cols: ['Permit Type', 'Capacity', 'Issued', 'Waiting', 'Notified', '%Sold'],
+      columns: ['Permit Type', 'Capacity', 'Issued', 'Waiting', 'Notified', '%Sold'],
       rows: [
         ['Commuter', 1000, 150, 20, 10, 15],
         ['Disability', 50, 50, 0, 0, 100],
@@ -21,6 +21,6 @@ export default {
     }
   },
   template: `
-    <div><grid :cols="cols" :rows="rows" :search="true" :sort="true" theme="none"></grid></div>
+    <div><grid :columns="columns" :rows="rows" :search="true" :sort="true" theme="none"></grid></div>
   `
 }
diff --git a/test/gridjs-vue-test.mjs b/test/gridjs-vue-test.mjs
@@ -7,7 +7,7 @@ export default {
   },
   data() {
     return {
-      cols: ['Permit Type', 'Capacity', 'Issued', 'Waiting', 'Notified', '%Sold'],
+      columns: ['Permit Type', 'Capacity', 'Issued', 'Waiting', 'Notified', '%Sold'],
       rows: [
         ['Commuter', 1000, 150, 20, 10, 15],
         ['Disability', 50, 50, 0, 0, 100],
@@ -21,6 +21,6 @@ export default {
     }
   },
   template: `
-    <div><grid :cols="cols" :rows="rows" :search="true" :sort="true"></grid></div>
+    <div><grid :columns="columns" :rows="rows" :search="true" :sort="true"></grid></div>
   `
 }