Skip to content

Commit aa9cb56

Browse files
author
Rubanraj Ravichandran
committed
Merge branch 'develop'
2 parents d099ffb + a509db7 commit aa9cb56

File tree

5 files changed

+351
-20
lines changed

5 files changed

+351
-20
lines changed

‎README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -432,8 +432,18 @@ columns: [
432432
| filter.type | Defines the type of filter. Currently basic filter is supported. |Empty string |
433433
| filter.placeholder | Placeholder is **`hint`** text for filter text box | Empty string |
434434
| filter.case_sensitive | Enable/Disable case sensitive filtering. | false |
435+
435436
# 9. Pagination & Info
436437
Pagination component is built based on Bootstrap 4 pagination template. You can enable or disable pagination and pagination info details based on your choice.
438+
439+
| ![Default pagination component](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination.png) |
440+
|:--:|
441+
| *Default pagination component* |
442+
443+
| ![Default pagination info compoent](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_info.png) |
444+
|:--:|
445+
| *Default pagination info compoent* |
446+
437447
## 9.1. Example
438448
```vue
439449
<template>
@@ -495,6 +505,10 @@ Currently you can override "Previous" & "Next" button icon/text.
495505
```
496506
After applying the above custom template to **`previous`** and **`next`** button, pagination component will look like this.
497507

508+
| ![Pagination after applying slot](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_slot.png) |
509+
|:--:|
510+
| *Pagination after applying slot* |
511+
498512
### 9.3.2. Pagination info
499513

500514
```vue
@@ -510,6 +524,10 @@ After applying the above custom template to **`previous`** and **`next`** butto
510524
```
511525
After applying the above custom template to pagination info , pagination info component will look like this.
512526

527+
| ![Pagination info after applying slot](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_info_slot.png) |
528+
|:--:|
529+
| *Pagination info after applying slot* |
530+
513531
#### 9.3.2.1. props
514532
From **`slot-scope="props"`** you can access the following attributes.
515533

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-bootstrap4-table",
3-
"version": "1.0.8",
3+
"version": "1.0.9",
44
"main": "dist/vue-bootstrap4-table.umd.js",
55
"module": "dist/vue-bootstrap4-table.esm.js",
66
"unpkg": "dist/vue-bootstrap4-table.min.js",
@@ -101,5 +101,6 @@
101101
"type": "git",
102102
"url": "https://github.com/rubanraj54/vue-bootstrap4-table"
103103
},
104-
"homepage": "https://rubanraj54.gitbook.io"
104+
"homepage": "https://rubanraj54.gitbook.io",
105+
"license": "MIT"
105106
}

‎src/App.vue

Lines changed: 98 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div id="app">
3-
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
3+
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config" :actions="actions" @on-select-rows="onSelectRows" @refresh-data="onRefreshData" @on-test="testone">
44
<template slot="pagination-info" slot-scope="props">
5-
This page total is {{props.currentPageRowsLength}} |
6-
Filterd results total is {{props.filteredRowsLength}} |
7-
Original data total is {{props.originalRowsLength}}
5+
This page total is {{props.currentPageRowsLength}} |
6+
Filterd results total is {{props.filteredRowsLength}} |
7+
Original data total is {{props.originalRowsLength}}
88
</template>
99
</vue-bootstrap4-table>
1010
</div>
@@ -18,16 +18,15 @@
1818
data: function() {
1919
return {
2020
rows: [],
21-
columns: [
22-
{
21+
columns: [{
2322
label: "id",
2423
name: "id",
2524
filter: {
2625
type: "simple",
2726
placeholder: "id"
2827
},
2928
sort: true,
30-
uniqueId: true
29+
// uniqueId: true
3130
},
3231
{
3332
label: "First Name",
@@ -82,8 +81,98 @@
8281
rows_selectable: true,
8382
multi_column_sort: false,
8483
// highlight_row_hover_color:"grey",
85-
card_title: "Vue Bootsrap 4 advanced table"
86-
}
84+
card_title: "Vue Bootsrap 4 advanced table",
85+
global_search: {
86+
placeholder: "Enter custom Search text",
87+
visibility: true,
88+
case_sensitive: false // default false
89+
},
90+
per_page_options: [1, 15, 20, 30],
91+
show_reset_button: true,
92+
show_refresh_button: true,
93+
},
94+
msg : "msg from parent",
95+
actions: [
96+
{
97+
btn_text: "test",
98+
event_name: "on-test",
99+
event_payload: {
100+
msg: "my custom msg"
101+
}
102+
},
103+
{
104+
btn_text: "test2",
105+
event_name: "on-test-two"
106+
},
107+
{
108+
btn_text: "test3",
109+
event_name: "on-test-three"
110+
}
111+
],
112+
}
113+
},
114+
methods: {
115+
onSelectRows(payload) {
116+
console.log(payload);
117+
},
118+
testone(payload) {
119+
console.log(payload);
120+
},
121+
onRefreshData() {
122+
let dummy = [{
123+
"name": {
124+
"first_name": "asdf",
125+
"last_name": "afds"
126+
},
127+
"id": 1,
128+
"age": 27,
129+
"address": {
130+
"city": "Port asdf",
131+
"street": "311 Marlen Skyway Suite 457",
132+
"postcode": "59419",
133+
"country": "Mayotte"
134+
},
135+
"salary": 2574,
136+
"email": "franecki.asfd@gmail.com",
137+
"website": "reichert.info",
138+
"mobile": "+1-704-796-2565"
139+
}, {
140+
"name": {
141+
"first_name": "xcv",
142+
"last_name": "asdf"
143+
},
144+
"id": 2,
145+
"age": 23,
146+
"address": {
147+
"city": "asdf",
148+
"street": "asdf Tiara Valleys",
149+
"postcode": "df-4010",
150+
"country": "sdfa"
151+
},
152+
"salary": 2126,
153+
"email": "rlittle@macejkovic.biz",
154+
"website": "wisoky.com",
155+
"mobile": "+asf"
156+
}, {
157+
"name": {
158+
"first_name": "asdfsdf",
159+
"last_name": "asdf"
160+
},
161+
"id": 3,
162+
"age": 30,
163+
"address": {
164+
"city": "asf",
165+
"street": "7729 Ashleigh Radial Apt. 649",
166+
"postcode": "54914-6608",
167+
"country": "Papua New Guinea"
168+
},
169+
"salary": 3805,
170+
"email": "delasfia.becker@cormier.com",
171+
"website": "ksdfuhlman.com",
172+
"mobile": "220.872.2938 x35208"
173+
}];
174+
175+
this.rows = dummy;
87176
}
88177
},
89178
components: {

‎src/components/Filters/Simple.vue

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
<template>
22
<div class="input-group">
33
<input ref="simple_filter_input" type="text" class="form-control" :placeholder="column.filter.placeholder" @keyup.stop="updateFilter($event)">
4-
<div class="input-group-append" @click="clearFilter">
4+
<div class="input-group-append vbt-simple-filter-clear" @click="clearFilter">
55
<span class="input-group-text">
66
<slot name="clear-simple-filter-icon">
77
&#x24E7;
88
</slot>
99
</span>
1010
</div>
1111
</div>
12-
<!-- <input type="search" class="form-control" :placeholder="column.filter.placeholder" @keyup.stop="updateFilter($event)"> -->
1312
</template>
1413

1514
<script>
1615
import _ from "lodash";
1716
17+
import {
18+
EventBus
19+
} from '../../event-bus.js';
20+
1821
export default {
1922
name: "Simple",
2023
props: {
@@ -28,6 +31,11 @@
2831
data: function() {
2932
return {};
3033
},
34+
mounted() {
35+
EventBus.$on('reset-query', () => {
36+
$(this.$refs.simple_filter_input).val("");
37+
});
38+
},
3139
methods: {
3240
clearFilter() {
3341
$(this.$refs.simple_filter_input).val("");
@@ -48,7 +56,7 @@
4856
</script>
4957

5058
<style scoped>
51-
.input-group-append {
59+
.input-group-append.vbt-simple-filter-clear {
5260
cursor: pointer;
5361
}
5462
</style>

0 commit comments

Comments
 (0)