Skip to content

Commit 260fe79

Browse files
gmsagmsa
committed
1.2.4 release
1 parent a2ae0d3 commit 260fe79

10 files changed

+266
-177
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# Changelog
22

3-
### 1.2.2 (March 31, 2022)
3+
### 1.2.4 (April 1, 2022)
44

55
* dependencies update,
6-
* added right buttons slot
76
* added filter placeholder prop
87
* added column picker button label prop
98
* added table classes prop
9+
* added filter prop
1010

1111
### 1.2.1 (May 22, 2019)
1212

‎dist/vue2-bootstrap-table2.common.js

Lines changed: 50 additions & 45 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue2-bootstrap-table2.common.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue2-bootstrap-table2.umd.js

Lines changed: 50 additions & 45 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue2-bootstrap-table2.umd.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue2-bootstrap-table2.umd.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue2-bootstrap-table2.umd.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue2-bootstrap-table2",
3-
"version": "1.2.2",
3+
"version": "1.2.4",
44
"description": "A sortable and searchable table, as a Vue component, using Bootstrap and Fontawesome styling.",
55
"keywords": [
66
"table",

‎src/App.vue

Lines changed: 91 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,29 @@
1010
<button @click="refreshTable" class="btn btn-outline-primary">Refresh</button>
1111
<button @click="setNewPageSize" class="btn btn-outline-primary">Page Size = 1 </button>
1212
</div>
13+
<!-- <input class="form-control" v-model="filter"/>-->
1314
<br/><br/>
1415
<vue-bootstrap-table
15-
ref="exampleTable"
16-
:columns="columns"
17-
:values="values"
18-
:show-filter="showFilter"
19-
:show-column-picker="showPicker"
20-
:paginated="paginated"
21-
filter-placeholder="Filtrar!!!"
22-
column-picker-label="Colunas..."
23-
table-classes="table-hover table-bordered table-striped"
24-
:multi-column-sortable="multiColumnSortable"
25-
:ajax="ajax"
26-
:row-click-handler=handleRowFunction
27-
:filter-case-sensitive=false
28-
:selectable="showSelect"
16+
ref="exampleTable"
17+
:columns="columns"
18+
:values="values"
19+
:show-filter="showFilter"
20+
:filter="filter"
21+
:show-column-picker="showPicker"
22+
:paginated="paginated"
23+
:responsive="true"
24+
filter-placeholder="Filtrar!!!"
25+
column-picker-label="Colunas..."
26+
table-classes="table-hover table-bordered table-striped"
27+
:multi-column-sortable="multiColumnSortable"
28+
:ajax="ajax"
29+
:row-click-handler=handleRowFunction
30+
:filter-case-sensitive=false
31+
:selectable="showSelect"
2932
>
30-
<!-- <template v-slot:header-right>
31-
OLAAA
32-
</template>-->
33+
<!-- <template v-slot:header-right>
34+
OLAAA
35+
</template>-->
3336
<!--<template v-slot:name="slotProps">
3437
<b>NAME:</b> {{slotProps.value.name}}
3538
</template>
@@ -64,6 +67,8 @@
6467

6568
<script>
6669
70+
import 'popper.js'
71+
import 'bootstrap'
6772
import VueBootstrapTable from "./components/VueBootstrapTable";
6873
6974
export default {
@@ -74,6 +79,7 @@ export default {
7479
data: function () {
7580
return {
7681
logging: [],
82+
filter: null,
7783
showFilter: true,
7884
showPicker: true,
7985
showSelect: true,
@@ -121,6 +127,74 @@ export default {
121127
title: 'State',
122128
name: 'state_province'
123129
},
130+
{
131+
title: 'State 2',
132+
name: 'state_province'
133+
},
134+
{
135+
title: 'State 3',
136+
name: 'state_province'
137+
},
138+
{
139+
title: 'State 4',
140+
name: 'state_province'
141+
},
142+
{
143+
title: 'State 4',
144+
name: 'state_province'
145+
},
146+
{
147+
title: 'State 4',
148+
name: 'state_province'
149+
},
150+
{
151+
title: 'State 4',
152+
name: 'state_province'
153+
},
154+
{
155+
title: 'State 4',
156+
name: 'state_province'
157+
},
158+
{
159+
title: 'State 4',
160+
name: 'state_province'
161+
},
162+
{
163+
title: 'State 4',
164+
name: 'state_province'
165+
},
166+
{
167+
title: 'State 4',
168+
name: 'state_province'
169+
},
170+
{
171+
title: 'State 4',
172+
name: 'state_province'
173+
},
174+
{
175+
title: 'State 4',
176+
name: 'state_province'
177+
},
178+
{
179+
title: 'State 4',
180+
name: 'state_province'
181+
},
182+
{
183+
title: 'State 4',
184+
name: 'state_province'
185+
},
186+
{
187+
title: 'State 4',
188+
name: 'state_province'
189+
},
190+
{
191+
title: 'State 4',
192+
name: 'state_province'
193+
},
194+
{
195+
title: 'State 4',
196+
name: 'state_province'
197+
},
124198
{
125199
title: 'Postal Code',
126200
name: 'postal_code'

‎src/components/VueBootstrapTable.vue

Lines changed: 68 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -14,33 +14,31 @@
1414
</div>
1515
</div>
1616
<div class="col-6">
17-
<slot name="header-right">
18-
<div v-if="showColumnPicker" style="padding-top: 10px;padding-bottom: 10px;float:right;">
19-
<div class="dropdown">
20-
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"
21-
aria-haspopup="true">
22-
{{columnPickerLabel}} <span class="caret"></span>
17+
<div v-if="showColumnPicker" style="padding-top: 10px;padding-bottom: 10px;float:right;">
18+
<div class="dropdown">
19+
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"
20+
aria-haspopup="true">
21+
{{columnPickerLabel}} <span class="caret"></span>
22+
</button>
23+
<div class="dropdown-menu dropdown-menu-right">
24+
<button v-for="(column, index) in displayCols"
25+
:key="index"
26+
class="dropdown-item"
27+
@click.stop.prevent="toggleColumn(column)"
28+
>
29+
<i v-if="column.visible" class="fa fa-check"></i> {{column.title}}
2330
</button>
24-
<div class="dropdown-menu dropdown-menu-right">
25-
<button v-for="(column, index) in displayCols"
26-
:key="index"
27-
class="dropdown-item"
28-
@click.stop.prevent="toggleColumn(column)"
29-
>
30-
<i v-if="column.visible" class="fa fa-check"></i> {{column.title}}
31-
</button>
32-
</div>
3331
</div>
3432
</div>
35-
</slot>
33+
</div>
3634
</div>
3735
</div>
3836
<div class="row">
3937
<div class="col-sm-12">
4038
<div :class="{'vue-table-loading': this.loading , 'vue-table-loading-hidden': !this.loading}">
4139
<div class="spinner"></div>
4240
</div>
43-
<table class="vue-table" :class="tableClasses">
41+
<table class="vue-table table" :class="tableClasses">
4442
<thead>
4543
<tr>
4644
<th v-if="selectable" style="width:40px;">
@@ -72,10 +70,9 @@
7270
<input class="form-check-input position-static" type="checkbox" aria-label="Select All" v-model="entry.selected">
7371
</div>-->
7472
</td>
75-
<td v-for="(column, index) in displayColsVisible" :key="index"
76-
v-show="column.visible" :class="column.cellstyle">
73+
<td v-for="(column, index) in displayColsVisible" :key="index" :class="column.cellstyle">
7774
<slot :name="column.name" :column="column" :value="entry">
78-
<span v-if="column.renderfunction!==false" v-html="column.renderfunction( column.name, entry )"></span>
75+
<span v-if="column.renderFunction && column.renderfunction!==false" v-html="column.renderfunction( column.name, entry )"></span>
7976
<span v-else-if="!column.editable">{{ entry[column.name] }}</span>
8077
<value-field-section v-else
8178
:entry="entry"
@@ -157,12 +154,12 @@
157154
padding-right: 30px !important;
158155
}
159156
160-
table.vue-table thead > tr > th {
157+
/*table.vue-table thead > tr > th {
161158
position: sticky;
162159
top: 0;
163160
background-color: white;
164161
z-index: 1;
165-
}
162+
}*/
166163
167164
/*.vue-table th.active {
168165
color: red;
@@ -178,7 +175,7 @@
178175
179176
.vue-table .arrow {
180177
opacity: 1;
181-
/*position: relative;*/
178+
position: relative;
182179
}
183180
184181
.vue-table .arrow:before {
@@ -228,8 +225,6 @@
228225
229226
/* used for fixing IE problems*/
230227
import { polyfill } from 'es6-promise'; polyfill();
231-
// import 'popper.js'
232-
// import 'bootstrap'
233228
import axios from 'axios';
234229
import qs from 'qs';
235230
import lodashorderby from 'lodash.orderby';
@@ -374,6 +369,13 @@
374369
return "Filter";
375370
}
376371
},
372+
filter: {
373+
type: String,
374+
required: false,
375+
default() {
376+
return null;
377+
}
378+
},
377379
columnPickerLabel: {
378380
type: String,
379381
required: false,
@@ -387,7 +389,7 @@
387389
default() {
388390
return "table table-bordered table-hover table-condensed table-striped";
389391
}
390-
}
392+
},
391393
},
392394
data: function () {
393395
return {
@@ -413,45 +415,45 @@
413415
* Once mounted and ready to start
414416
*/
415417
mounted: function () {
416-
this.$nextTick(function () {
417-
this.loading = true;
418-
this.setSortOrders();
419-
this.definedPageSize = this.pageSize;
420-
const self = this;
421-
//
422-
if (this.defaultOrderColumn !== null) {
423-
//console.log("setting order default");
424-
self.sortKey[0] = this.defaultOrderColumn;
425-
if (this.defaultOrderDirection)
426-
self.sortOrders[this.defaultOrderColumn] = "ASC";
427-
else
428-
self.sortOrders[this.defaultOrderColumn] = "DESC";
429-
}
430-
// Build columns
431-
this.columns.forEach(function (column) {
432-
let obj = self.buildColumnObject(column);
433-
self.displayCols.push(obj);
434-
});
435-
// Work the data
436-
if (this.ajax.enabled) {
437-
if (!this.ajax.delegate) {
438-
// If ajax but NOT delegate
439-
// Perform the fetch of data now and set the raw values
440-
this.loading = true;
441-
this.fetchData(function (data) {
442-
self.rawValues = data.data;
443-
});
444-
} else {
445-
// If ajax and also delegate
446-
// Simply call processFilter, which will take care of the fetching
447-
//this.processFilter();
448-
}
418+
// this.$nextTick(function () {
419+
this.loading = true;
420+
this.setSortOrders();
421+
this.definedPageSize = this.pageSize;
422+
const self = this;
423+
//
424+
if (this.defaultOrderColumn !== null) {
425+
//console.log("setting order default");
426+
self.sortKey[0] = this.defaultOrderColumn;
427+
if (this.defaultOrderDirection)
428+
self.sortOrders[this.defaultOrderColumn] = "ASC";
429+
else
430+
self.sortOrders[this.defaultOrderColumn] = "DESC";
431+
}
432+
// Build columns
433+
this.columns.forEach(function (column) {
434+
let obj = self.buildColumnObject(column);
435+
self.displayCols.push(obj);
436+
});
437+
// Work the data
438+
if (this.ajax.enabled) {
439+
if (!this.ajax.delegate) {
440+
// If ajax but NOT delegate
441+
// Perform the fetch of data now and set the raw values
442+
this.loading = true;
443+
this.fetchData(function (data) {
444+
self.rawValues = data.data;
445+
});
449446
} else {
450-
// Not ajax, therefore working with given elements
451-
// Pass the Prop values to rawValues data object.
452-
self.rawValues = self.values;
447+
// If ajax and also delegate
448+
// Simply call processFilter, which will take care of the fetching
449+
//this.processFilter();
453450
}
454-
})
451+
} else {
452+
// Not ajax, therefore working with given elements
453+
// Pass the Prop values to rawValues data object.
454+
self.rawValues = self.values;
455+
}
456+
//})
455457
},
456458
/**
457459
* On created register on CellDataModified event
@@ -468,6 +470,9 @@
468470
this.$off('cellDataModifiedEvent', self.fireCellDataModifiedEvent);
469471
},
470472
watch: {
473+
filter() {
474+
this.filterKey = this.filter;
475+
},
471476
values() {
472477
this.rawValues = this.values;
473478
},

0 commit comments

Comments
 (0)