Merge branch 'develop'

Author: Rubanraj Ravichandran

README.md

@@ -432,8 +432,18 @@ columns: [
 | filter.type | Defines the type of filter. Currently basic filter is supported. |Empty string  |
 | filter.placeholder | Placeholder is **`hint`** text for filter text box | Empty string |
 | filter.case_sensitive | Enable/Disable case sensitive filtering. | false |
+
 # 9. Pagination & Info
 Pagination component is built based on Bootstrap 4 pagination template. You can enable or disable pagination and pagination info details based on your choice.
+    
+| ![Default pagination component](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination.png) | 
+|:--:| 
+| *Default pagination component* |
+
+| ![Default pagination info compoent](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_info.png) | 
+|:--:| 
+| *Default pagination info compoent* |
+
 ## 9.1. Example
 ```vue
 <template>
@@ -495,6 +505,10 @@ Currently you can override "Previous" & "Next" button icon/text.
 ```
 After applying the above custom template to **`previous`** and  **`next`** button, pagination component will look like this.
 
+| ![Pagination after applying slot](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_slot.png) | 
+|:--:| 
+| *Pagination after applying slot* |
+
 ### 9.3.2. Pagination info
 
 ```vue
@@ -510,6 +524,10 @@ After applying the above custom template to **`previous`** and  **`next`** butto
 ```
 After applying the above custom template to pagination info , pagination info component will look like this.
 
+| ![Pagination info after applying slot](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_info_slot.png) | 
+|:--:| 
+| *Pagination info after applying slot* |
+
 #### 9.3.2.1. props
 From **`slot-scope="props"`** you can access the following attributes.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-bootstrap4-table",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "main": "dist/vue-bootstrap4-table.umd.js",
     "module": "dist/vue-bootstrap4-table.esm.js",
     "unpkg": "dist/vue-bootstrap4-table.min.js",
@@ -101,5 +101,6 @@
         "type": "git",
         "url": "https://github.com/rubanraj54/vue-bootstrap4-table"
     },
-    "homepage": "https://rubanraj54.gitbook.io"
+    "homepage": "https://rubanraj54.gitbook.io",
+    "license": "MIT"
 }

src/App.vue

@@ -1,10 +1,10 @@
 <template>
     <div id="app">
-        <vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
+        <vue-bootstrap4-table :rows="rows" :columns="columns" :config="config" :actions="actions" @on-select-rows="onSelectRows" @refresh-data="onRefreshData" @on-test="testone">
             <template slot="pagination-info" slot-scope="props">
-                This page total is {{props.currentPageRowsLength}} |
-                Filterd results total is {{props.filteredRowsLength}} |
-                Original data total is {{props.originalRowsLength}}
+                    This page total is {{props.currentPageRowsLength}} |
+                    Filterd results total is {{props.filteredRowsLength}} |
+                    Original data total is {{props.originalRowsLength}}
             </template>
         </vue-bootstrap4-table>
     </div>
@@ -18,16 +18,15 @@
         data: function() {
             return {
                 rows: [],
-                columns: [
-                    {
+                columns: [{
                         label: "id",
                         name: "id",
                         filter: {
                             type: "simple",
                             placeholder: "id"
                         },
                         sort: true,
-                        uniqueId: true
+                        // uniqueId: true
                     },
                     {
                         label: "First Name",
@@ -82,8 +81,98 @@
                     rows_selectable: true,
                     multi_column_sort: false,
                     // highlight_row_hover_color:"grey",
-                    card_title: "Vue Bootsrap 4 advanced table"
-                }
+                    card_title: "Vue Bootsrap 4 advanced table",
+                    global_search: {
+                        placeholder: "Enter custom Search text",
+                        visibility: true,
+                        case_sensitive: false // default false
+                    },
+                    per_page_options: [1, 15, 20, 30],
+                    show_reset_button: true,
+                    show_refresh_button: true,
+                },
+                msg : "msg from parent",
+                actions: [
+                    {
+                        btn_text: "test",
+                        event_name: "on-test",
+                        event_payload: {
+                            msg: "my custom msg"
+                        }
+                    },
+                    {
+                        btn_text: "test2",
+                        event_name: "on-test-two"
+                    },
+                    {
+                        btn_text: "test3",
+                        event_name: "on-test-three"
+                    }
+                ],
+            }
+        },
+        methods: {
+            onSelectRows(payload) {
+                console.log(payload);
+            },
+            testone(payload) {
+                console.log(payload);
+            },
+            onRefreshData() {
+                let dummy = [{
+                    "name": {
+                        "first_name": "asdf",
+                        "last_name": "afds"
+                    },
+                    "id": 1,
+                    "age": 27,
+                    "address": {
+                        "city": "Port asdf",
+                        "street": "311 Marlen Skyway Suite 457",
+                        "postcode": "59419",
+                        "country": "Mayotte"
+                    },
+                    "salary": 2574,
+                    "email": "franecki.asfd@gmail.com",
+                    "website": "reichert.info",
+                    "mobile": "+1-704-796-2565"
+                }, {
+                    "name": {
+                        "first_name": "xcv",
+                        "last_name": "asdf"
+                    },
+                    "id": 2,
+                    "age": 23,
+                    "address": {
+                        "city": "asdf",
+                        "street": "asdf Tiara Valleys",
+                        "postcode": "df-4010",
+                        "country": "sdfa"
+                    },
+                    "salary": 2126,
+                    "email": "rlittle@macejkovic.biz",
+                    "website": "wisoky.com",
+                    "mobile": "+asf"
+                }, {
+                    "name": {
+                        "first_name": "asdfsdf",
+                        "last_name": "asdf"
+                    },
+                    "id": 3,
+                    "age": 30,
+                    "address": {
+                        "city": "asf",
+                        "street": "7729 Ashleigh Radial Apt. 649",
+                        "postcode": "54914-6608",
+                        "country": "Papua New Guinea"
+                    },
+                    "salary": 3805,
+                    "email": "delasfia.becker@cormier.com",
+                    "website": "ksdfuhlman.com",
+                    "mobile": "220.872.2938 x35208"
+                }];
+
+                this.rows = dummy;
             }
         },
         components: {

src/components/Filters/Simple.vue

@@ -1,20 +1,23 @@
 <template>
     <div class="input-group">
         <input ref="simple_filter_input" type="text" class="form-control" :placeholder="column.filter.placeholder" @keyup.stop="updateFilter($event)">
-        <div class="input-group-append" @click="clearFilter">
+        <div class="input-group-append vbt-simple-filter-clear" @click="clearFilter">
             <span class="input-group-text">
                 <slot name="clear-simple-filter-icon">
                     &#x24E7;
                 </slot>
             </span>
         </div>
     </div>
-    <!-- <input type="search" class="form-control" :placeholder="column.filter.placeholder" @keyup.stop="updateFilter($event)"> -->
 </template>
 
 <script>
     import _ from "lodash";
 
+    import {
+        EventBus
+    } from '../../event-bus.js';
+
     export default {
         name: "Simple",
         props: {
@@ -28,6 +31,11 @@
         data: function() {
             return {};
         },
+        mounted() {
+            EventBus.$on('reset-query', () => {
+                $(this.$refs.simple_filter_input).val("");
+            });
+        },
         methods: {
             clearFilter() {
                 $(this.$refs.simple_filter_input).val("");
@@ -48,7 +56,7 @@
 </script>
 
 <style scoped>
-    .input-group-append {
+    .input-group-append.vbt-simple-filter-clear {
         cursor: pointer;
     }
 </style>