Skip to content

Commit ab2b8d0

Browse files
rubanraj54rubanraj54
committed
condition based user styling for table, rows, & cells
1 parent 05e8fe3 commit ab2b8d0

File tree

3 files changed

+101
-15
lines changed

3 files changed

+101
-15
lines changed

‎src/App.vue‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,17 @@
109109
row_classes: "my-row-class1 my-row-class2",
110110
column_classes: "my-column-class1 my-column-class2"
111111
},
112+
{
113+
label: "Salary",
114+
name: "salary",
115+
// filter: {
116+
// type: "simple",
117+
// placeholder: "Enter email"
118+
// },
119+
sort: true,
120+
row_text_alignment: "text-left",
121+
column_text_alignment: "text-left"
122+
},
112123
{
113124
label: "City",
114125
name: "address.city",
@@ -147,14 +158,25 @@
147158
selected_rows_info: true
148159
},
149160
classes: {
150-
// table : {
151-
// "table-striped my-class" : true,
152-
// "table-bordered my-class-two" : function(rows) {
153-
// return true
154-
// }
155-
// }
161+
table : {
162+
"table-striped my-class" : true,
163+
"table-bordered my-class-two" : function(rows) {
164+
return true
165+
}
166+
},
167+
row : {
168+
"my-row my-row2" : true,
169+
"function-class" : function(row) {
170+
return row.id == 1
171+
}
172+
},
173+
cell : {
174+
"my-cell my-cell2" : true,
175+
"text-danger" : function(row,column,cellValue) {
176+
return column.name == "salary" && row.salary > 2500
177+
}
178+
},
156179
// table : "table-striped table-bordered my-class",
157-
158180
},
159181
// actions: []
160182
actions: [

‎src/components/Row.vue‎

Lines changed: 68 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<tr ref="vbt_row" v-bind:style='{"background": (rowHiglighted) ? highlightRowHoverColor : ""}' :class='{"vbt-row-selected":rowSelected}' v-on="rowsSelectable ? { click: ($event) => handleRowSelect($event) } : {}">
2+
<tr ref="vbt_row" v-bind:style='{"background": (rowHiglighted) ? highlightRowHoverColor : ""}' :class='rowClasses' v-on="rowsSelectable ? { click: ($event) => handleRowSelect($event) } : {}">
33
<CheckBox v-if="checkboxRows"
44
:rowsSelectable="rowsSelectable"
55
:row-selected="rowSelected"
66
@add-row="addRow"
77
@remove-row="removeRow"/>
88

9-
<td v-for="(column, key, hindex) in columns" :key="hindex" :class="rowClasses(column)">
9+
<td v-for="(column, key, hindex) in columns" :key="hindex" :class="cellClasses(column)">
1010
<slot :name="'vbt-'+getCellSlotName(column)">
1111

1212
</slot>
@@ -16,6 +16,7 @@
1616

1717
<script>
1818
import has from "lodash/has";
19+
import get from "lodash/get";
1920
import differenceWith from "lodash/differenceWith";
2021
import isEqual from "lodash/isEqual";
2122
import includes from "lodash/includes";
@@ -33,6 +34,14 @@
3334
type: Object,
3435
required:true
3536
},
37+
propRowClasses: {
38+
type: Object | String,
39+
required:false
40+
},
41+
propCellClasses: {
42+
type: Object | String,
43+
required:false
44+
},
3645
columns: {
3746
type: Array,
3847
default: function() {
@@ -113,7 +122,10 @@
113122
rowHover(state) {
114123
this.rowHiglighted = state;
115124
},
116-
rowClasses(column) {
125+
getValueFromRow(row, name) {
126+
return get(row, name);
127+
},
128+
cellClasses(column) {
117129
let classes = "";
118130
119131
let default_text_alignment = "text-center";
@@ -128,19 +140,69 @@
128140
//decide text alignment class - ends here
129141
130142
// adding user defined classes to rows - starts here
131-
if (has(column, "row_classes")) {
132-
classes = classes + " " + column.row_classes;
133-
}
143+
// if (has(column, "row_classes")) {
144+
// classes = classes + " " + column.row_classes;
145+
// }
134146
// adding user defined classes to rows - ends here
135147
148+
149+
if (typeof this.propCellClasses == "string") {
150+
return this.propCellClasses;
151+
} else if (typeof this.propCellClasses == "object") {
152+
Object.entries(this.propCellClasses).forEach(([key, value]) => {
153+
if (typeof value == "boolean" && value) {
154+
classes += (" " + key);
155+
} else if (typeof value == "function") {
156+
let truth = value(this.row,column,this.getValueFromRow(this.row,column.name));
157+
if (typeof truth == "boolean" && truth) {
158+
classes += " ";
159+
classes += key;
160+
}
161+
}
162+
});
163+
}
164+
136165
return classes;
137166
},
138167
getCellSlotName(column) {
139168
if (has(column,"slot_name")) {
140169
return column.slot_name;
141170
}
142171
return column.name.replace('.','_');
172+
}
173+
},
174+
computed: {
175+
rowClasses() {
176+
let classes = this.userRowClasses;
177+
178+
if (this.rowSelected) {
179+
classes += " ";
180+
classes += "vbt-row-selected";
181+
}
182+
183+
return classes;
184+
143185
},
186+
userRowClasses() {
187+
let classes = "";
188+
if (typeof this.propRowClasses == "string") {
189+
return this.propRowClasses;
190+
} else if (typeof this.propRowClasses == "object") {
191+
Object.entries(this.propRowClasses).forEach(([key, value]) => {
192+
if (typeof value == "boolean" && value) {
193+
classes += key;
194+
} else if (typeof value == "function") {
195+
let truth = value(this.row);
196+
if (typeof truth == "boolean" && truth) {
197+
classes += " ";
198+
classes += key;
199+
}
200+
}
201+
});
202+
}
203+
204+
return classes;
205+
}
144206
},
145207
watch: {
146208
row: {

‎src/components/VueBootstrap4Table.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77
<div :class="{'card-body':card_mode}">
88
<div class="table-responsive">
9-
<table class="table" :class="tableClases">
9+
<table class="table" :class="tableClasses">
1010
<thead>
1111
<tr v-if="showToolsRow">
1212
<th :colspan="headerColSpan">
@@ -118,6 +118,8 @@
118118
:selected-items="selected_items"
119119
:highlight-row-hover="highlight_row_hover"
120120
:highlight-row-hover-color="rowHighlightColor"
121+
:prop-row-classes="classes.row"
122+
:prop-cell-classes="classes.cell"
121123
@add-row="handleAddRow"
122124
@remove-row="handleRemoveRow">
123125
<template v-for="(column) in columns" :slot="'vbt-'+getCellSlotName(column)">
@@ -1032,7 +1034,7 @@ export default {
10321034
}
10331035
return result.length;
10341036
},
1035-
tableClases() {
1037+
tableClasses() {
10361038
let classes = "";
10371039
if (typeof this.classes.table == "string") {
10381040
return this.classes.table;

0 commit comments

Comments
 (0)