Skip to content

Commit 05e8fe3

Browse files
rubanraj54rubanraj54
committed
Merge branch 'develop'
2 parents 717ec06 + ef210eb commit 05e8fe3

File tree

2 files changed

+80
-38
lines changed

2 files changed

+80
-38
lines changed

‎src/App.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div id="app">
3-
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config" :actions="actions" @on-select-row="onSelectRows" @refresh-data="onRefreshData" @on-download="onDownload">
2+
<div id="app" class="container-fluid mb-10">
3+
<vue-bootstrap4-table :classes="classes" :rows="rows" :columns="columns" :config="config" :actions="actions" @on-select-row="onSelectRows" @refresh-data="onRefreshData" @on-download="onDownload">
44
<template slot="pagination-info" slot-scope="props">
55
This page total is {{props.currentPageRowsLength}} |
66
Filterd results total is {{props.filteredRowsLength}} |
@@ -146,7 +146,16 @@
146146
card_mode: false,
147147
selected_rows_info: true
148148
},
149-
msg: "msg from parent",
149+
classes: {
150+
// table : {
151+
// "table-striped my-class" : true,
152+
// "table-bordered my-class-two" : function(rows) {
153+
// return true
154+
// }
155+
// }
156+
// table : "table-striped table-bordered my-class",
157+
158+
},
150159
// actions: []
151160
actions: [
152161
{

‎src/components/VueBootstrap4Table.vue‎

Lines changed: 68 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<template>
2-
<div class="container-fluid">
32
<!-- TODO configurable header title position -->
43
<div :class="{card:card_mode}">
54
<div class="card-header text-center" v-if="card_mode">
65
{{card_title}}
76
</div>
87
<div :class="{'card-body':card_mode}">
98
<div class="table-responsive">
10-
<table class="table table-striped table-bordered">
9+
<table class="table" :class="tableClases">
1110
<thead>
1211
<tr v-if="showToolsRow">
1312
<th :colspan="headerColSpan">
@@ -111,19 +110,19 @@
111110

112111
<!-- data rows stars here -->
113112
<row v-for="(row, index) in vbt_rows" :key="index"
114-
:row="row"
115-
:columns="vbt_columns"
116-
:row-index="index"
117-
:checkbox-rows="checkbox_rows"
118-
:rows-selectable="rows_selectable"
119-
:selected-items="selected_items"
120-
:highlight-row-hover="highlight_row_hover"
121-
:highlight-row-hover-color="rowHighlightColor"
122-
@add-row="handleAddRow"
123-
@remove-row="handleRemoveRow">
113+
:row="row"
114+
:columns="vbt_columns"
115+
:row-index="index"
116+
:checkbox-rows="checkbox_rows"
117+
:rows-selectable="rows_selectable"
118+
:selected-items="selected_items"
119+
:highlight-row-hover="highlight_row_hover"
120+
:highlight-row-hover-color="rowHighlightColor"
121+
@add-row="handleAddRow"
122+
@remove-row="handleRemoveRow">
124123
<template v-for="(column) in columns" :slot="'vbt-'+getCellSlotName(column)">
125124
<slot :name="getCellSlotName(column)" :row="row" :column="column" :cell_value="getValueFromRow(row,column.name)">
126-
{{getValueFromRow(row,column.name)}}
125+
{{getValueFromRow(row,column.name)}}
127126
</slot>
128127
</template>
129128
</row>
@@ -243,7 +242,6 @@
243242
</div>
244243
</div>
245244
</div>
246-
</div>
247245
</template>
248246

249247
<script>
@@ -301,6 +299,12 @@ export default {
301299
return {};
302300
}
303301
},
302+
classes: {
303+
type: Object,
304+
default: function () {
305+
return {};
306+
}
307+
},
304308
actions: {
305309
type: Array,
306310
default: function () {
@@ -368,8 +372,9 @@ export default {
368372
369373
this.initConfig();
370374
this.initialSort();
371-
this.filter();
372-
this.paginateFilter();
375+
if (!this.server_mode) {
376+
this.filter();
377+
}
373378
this.handleShiftKey();
374379
375380
},
@@ -499,9 +504,6 @@ export default {
499504
} else {
500505
this.query.sort[result].order = this.query.sort[result].order == "asc" ? "desc" : "asc";
501506
}
502-
if (!this.server_mode) {
503-
this.sort();
504-
}
505507
},
506508
isShiftSelection(shiftKey,rowIndex){
507509
return (shiftKey == true) && (this.lastSelectedItemIndex != null) && (this.lastSelectedItemIndex != rowIndex);
@@ -802,23 +804,12 @@ export default {
802804
},
803805
804806
paginateFilter() {
805-
806807
if (this.pagination) {
807808
let start = (this.page - 1) * this.per_page;
808809
let end = start + this.per_page;
809-
if (!this.server_mode) {
810-
this.vbt_rows = this.temp_filtered_results.slice(start, end);
811-
} else {
812-
this.emitQueryParams();
813-
// this.$emit('on-change-query',cloneDeep(this.query));
814-
}
810+
this.vbt_rows = this.temp_filtered_results.slice(start, end);
815811
} else {
816-
if (!this.server_mode) {
817-
this.vbt_rows = cloneDeep(this.temp_filtered_results);
818-
} else {
819-
this.emitQueryParams();
820-
// this.$emit('on-change-query',cloneDeep(this.query));
821-
}
812+
this.vbt_rows = cloneDeep(this.temp_filtered_results);
822813
}
823814
},
824815
@@ -1040,6 +1031,25 @@ export default {
10401031
result = intersectionBy(this.vbt_rows, this.selected_items, this.uniqueId);
10411032
}
10421033
return result.length;
1034+
},
1035+
tableClases() {
1036+
let classes = "";
1037+
if (typeof this.classes.table == "string") {
1038+
return this.classes.table;
1039+
} else if (typeof this.classes.table == "object") {
1040+
Object.entries(this.classes.table).forEach(([key, value]) => {
1041+
if (typeof value == "boolean" && value) {
1042+
classes += key;
1043+
} else if (typeof value == "function") {
1044+
let truth = value(this.rows);
1045+
if (typeof truth == "boolean" && truth) {
1046+
classes += " ";
1047+
classes += key;
1048+
}
1049+
}
1050+
});
1051+
}
1052+
return classes;
10431053
}
10441054
10451055
},
@@ -1052,6 +1062,14 @@ export default {
10521062
},
10531063
deep: true
10541064
},
1065+
"query.sort": {
1066+
handler: function (after, before) {
1067+
if (!this.server_mode) {
1068+
this.sort();
1069+
}
1070+
},
1071+
deep: true
1072+
},
10551073
"query.global_search": {
10561074
handler: function (newVal, oldVal) {
10571075
if (!this.server_mode) {
@@ -1070,15 +1088,22 @@ export default {
10701088
per_page: {
10711089
handler: function (newVal, oldVal) {
10721090
if (!this.server_mode) {
1091+
let doPaginateFilter = (this.page == 1);
10731092
this.page = 1;
1074-
this.paginateFilter();
1093+
if (doPaginateFilter) {
1094+
this.paginateFilter();
1095+
}
1096+
} else {
1097+
this.emitQueryParams();
10751098
}
10761099
}
10771100
},
10781101
pagination: {
10791102
handler: function (newVal, oldVal) {
10801103
if (!this.server_mode) {
10811104
this.paginateFilter();
1105+
} else {
1106+
this.emitQueryParams();
10821107
}
10831108
}
10841109
},
@@ -1114,7 +1139,11 @@ export default {
11141139
return extend({}, element, extra);
11151140
});
11161141
1117-
this.filter();
1142+
if (!this.server_mode) {
1143+
this.filter();
1144+
} else {
1145+
this.emitQueryParams();
1146+
}
11181147
},
11191148
deep: true
11201149
},
@@ -1157,7 +1186,11 @@ export default {
11571186
},
11581187
11591188
page(newVal, oldVal) {
1160-
this.paginateFilter();
1189+
if (!this.server_mode) {
1190+
this.paginateFilter();
1191+
} else {
1192+
this.emitQueryParams();
1193+
}
11611194
},
11621195
'config.multi_column_sort': {
11631196
handler : function(newVal,oldVal) {

0 commit comments

Comments
 (0)