1.1.5

Author: syshex

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 1.1.5 (June 21, 2017)
+
+* Row Click Handler added
+
 ### 1.1.4 (June 12, 2017)
 
 * Fix- delegate now doesn't use echo

README.md

@@ -2,7 +2,7 @@
 
 vue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js.
 
-### VUE 1 : 1.1.4
+### VUE 1 : 1.1.5
 
 ### Vue 2 : [jbaysolutions/vue2-bootstrap-table](https://github.com/jbaysolutions/vue2-bootstrap-table)
 
@@ -281,6 +281,36 @@ There must be a javascript function called `renderTestColumn`  :
 </script>
 ```
 
+### ROW Click Handler
+
+To add a Row click handler function:
+
+````html
+
+    <vue-bootstrap-table
+            [...]
+            :row-click-handler=handleRowFunction
+    >
+    </vue-bootstrap-table>
+````
+
+On your Vue instance :
+
+````javascript
+data: {
+        handleRowFunction: handleRow,
+}
+````
+
+And have the javascript function declared like so:
+
+````javascript
+var handleRow = function (event, entry) {
+    console.log("CLICK ROW: " + JSON.stringify(entry));
+};
+````
+
+Where event in the `MouseEvent` and `entry` e the complete entry corresponding to the row.
 
 ### AJAX Configuration
 
@@ -432,6 +462,10 @@ If you have a feature request, please add it as an issue or make a pull request.
 
 ## Changelog
 
+### 1.1.5
+
+* Row Click Handler added
+
 ### 1.1.4
 
 * Fix- delegate now doesn't use echo

dist/vue-bootstrap-table.js

@@ -36,6 +36,7 @@ <h1>Vue Bootstrap Table</h1>
                     :paginated="paginated"
                     :multi-column-sortable="multiColumnSortable"
                     :ajax="ajax"
+                    :row-click-handler=handleRowFunction
             >
             </vue-bootstrap-table>
         </div>

dist/vue-bootstrap-table.js.map

@@ -1,6 +1,6 @@
 {
   "name": "vue-bootstrap-table2",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A sortable and searchable vue table, as a Vue component, using bootstrap styling.",
   "keywords": [
     "table",

dist/vue-bootstrap-table.min.js

@@ -45,7 +45,7 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="entry in filteredValuesSorted " track-by="$index">
+                    <tr v-for="entry in filteredValuesSorted " track-by="$index" @click="rowClickHandler($event, entry)">
                         <td v-for="column in displayColsVisible" track-by="$index"
                             v-show="column.visible"  :class="column.cellstyle">
                             <span v-if="column.renderfunction!==false" v-html="column.renderfunction( column.name, entry )"></span>
@@ -307,6 +307,14 @@
                     }
                 }
             },
+            /**
+             * Function to handle row clicks
+             */
+            rowClickHandler: {
+                type: Function,
+                required: false,
+                default: function () {}
+            },
         },
         data: function () {
             return {

index.html

@@ -10,6 +10,10 @@ var renderfu = function ( colname, entry) {
         '</div><span>'+JSON.stringify(entry)+'</span>';
 };
 
+var handleRow = function (event, entry) {
+    console.log("CLICK ROW: " + JSON.stringify(entry));
+};
+
 new Vue({
     el: '#app',
     components: {
@@ -21,6 +25,7 @@ new Vue({
         showPicker: true,
         paginated: true,
         multiColumnSortable: true,
+        handleRowFunction: handleRow,
         ajax: {
             enabled: false,
             url: "http://localhost:9430/data/test",