Add row click event (#12)

* Use emit for row click instead of onClick prop

Author: thepill

README.md

@@ -87,6 +87,8 @@ rows          =>    Rows.                          =>   [
                                                         ]
 perPage       =>    Number of rows per.. page      =>   10 (default)            // Results per page
 onClick       =>    Func. to execute on click      =>   console.log             // Function, row 1st param
+clickable     =>    Rows are clickable.            =>   true (default)          //row is passed in the event payload
+                    Will fire `row-click` event                                 //see react to click on row (below)
 sortable      =>    Cause column-click to sort     =>   true (default)          // Whether sortable
 searchable    =>    Add fuzzy search functionality =>   true (default)          // Whether searchable
 exactSearch   =>    Disable fuzzy search           =>   true (default)          // Whether only exact matches are returned
@@ -101,3 +103,28 @@ customButtons =>    Custom buttons thingy          =>   [
                                                             }
                                                         ]
 ```
+
+### React to click on row
+
+The datatable will emit the `row-click` event if `clickable` is set to `true` (default).
+
+The events payload will contain the `row object`, you can bind to the event like this:
+
+```html
+<datatable v-on:row-click="onRowClick"></datatable>
+
+<script>
+var app = new Vue({
+  el: '#app',
+  ...
+  methods: {
+    onRowClick: function (row) {
+      //row contains the clicked object from `rows`
+      console.log(row)
+    }
+  },
+})
+</script>
+...
+
+```

src/DataTable.vue

@@ -56,7 +56,7 @@
 			</thead>
 
 			<tbody>
-				<tr v-for="(row, index) in paginated" :class="onClick ? 'clickable' : ''" @click="click(row, index)">
+				<tr v-for="(row, index) in paginated" :class="{ clickable : clickable }" @click="click(row)">
 					<td v-for="column in columns" :class="column.numeric ? 'numeric' : ''" v-if="!column.html">
 						{{ collect(row, column.field) }}
 					</td>
@@ -111,7 +111,7 @@
 			title: '',
 			columns: {},
 			rows: {},
-			onClick: {},
+			clickable: {default: true},
 			customButtons: {default: () => []},
 			perPage: {default: 10},
 			sortable: {default: true},
@@ -164,9 +164,12 @@
 				this.searching = !this.searching;
 			},
 
-			click: function(row, index) {
-				if (this.onClick)
-					this.onClick(row, index);
+			click: function(row) {
+				if(!this.clickable){
+					return
+				}
+
+				this.$emit('row-click', row)
 			},
 
 			exportExcel: function() {