Merge branch 'master' of github.com:spatie/vue-table-component

aivy0011 · Aug 16, 2017 · ca48883 · ca48883
2 parents 4f0c1fe + 9c35121
commit ca48883
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,12 +2,13 @@
 
 All notable changes to `vue-table-component` will be documented in this file
 
-## 1.4.0 - 2017-08-08
+## 1.4.0 - 2017-08-16
 - Fixed cell rendering: HTML is now escaped by default. If you want raw html, use the new scoped slots feature
 - Added scoped slot support to `table-columns` for custom column contents
 - Added the `filter-input-class` prop to the `table-component` component (`filterInputClass` in settings)
 - Added the `header-class` and `cell-class` props to the `table-column` component (`headerClass` and `cellClass` in settings)
 - Added a minified build: `vue-table-component/dist/index.min.js`
+- Fixed the parsing of the a date format that contains `:`
 
 ## 1.3.0 - 2017-08-07
 - Added `formatter` property

diff --git a/README.md b/README.md
@@ -12,10 +12,10 @@ Here's an example of how you can use it:
 ```html
 <table-component
      :data="[
-          { firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', editUrl: '<a href='#john'>Edit</a>', birthday: '04/10/1940', songs: 72 },
-          { firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', editUrl: '<a href='#paul'>Edit</a>', birthday: '18/06/1942', songs: 70 },
-          { firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', editUrl: '<a href='#george'>Edit</a>', birthday: '25/02/1943', songs: 22 },
-          { firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', editUrl: '<a href='#ringo'>Edit</a>', birthday: '07/07/1940', songs: 2 },
+          { firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', birthday: '04/10/1940', songs: 72 },
+          { firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', birthday: '18/06/1942', songs: 70 },
+          { firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', birthday: '25/02/1943', songs: 22 },
+          { firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', birthday: '07/07/1940', songs: 2 },
      ]"
      sort-by="songs"
      sort-order="asc"
@@ -25,7 +25,11 @@ Here's an example of how you can use it:
      <table-column show="instrument" label="Instrument"></table-column>
      <table-column show="songs" label="Songs" data-type="numeric"></table-column>
      <table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
-     <table-column show="editUrl" label="" :sortable="false" :filterable="false"></table-column>
+     <table-column label="" :sortable="false" :filterable="false">
+         <template scope="row">
+            <a :href=`#${row.firstName}`>Edit</a>
+         </template>
+     </table-column>
  </table-component>
 ```
 
@@ -179,7 +183,27 @@ Here's an example:
 
 ## Formatting values
 
-You can format the values before they get displayed by passing a function to the `formatter` prop. Here's an example Vue component that uses the feature.
+You can format values before they get displayed by using scoped slots. Here's a quick example:
+
+```html
+<table-component
+     :data="[
+          { firstName: 'John', songs: 72 },
+          { firstName: 'Paul', songs: 70 },
+          { firstName: 'George', songs: 22 },
+          { firstName: 'Ringo', songs: 2 },
+     ]"
+>
+
+     <table-column label="My custom column" :sortable="false" :filterable="false">
+         <template scope="row">
+            {{ row.firstName }} wrote {{ row.songs }} songs.
+         </template>
+     </table-column>
+ </table-component>
+```
+
+Alternatively you can pass a function to the `formatter` prop. Here's an example Vue component that uses the feature.
 
 ```vue
 <template>

diff --git a/src/classes/Row.js b/src/classes/Row.js
@@ -35,8 +35,7 @@ export default class Row {
         }
 
         if (dataType.startsWith('date')) {
-            // eslint-disable-next-line no-unused-vars
-            const [_, format]  = dataType.split(':');
+            const format  = dataType.replace('date:', '');
 
             return moment(value, format).format('YYYYMMDDHHmmss');
         }