Skip to content

Commit 399a34f

Browse files
rubanraj54rubanraj54
committed
This fixes #2 , enables column header and row text alignment
1 parent 56c06d7 commit 399a34f

File tree

2 files changed

+101
-29
lines changed

2 files changed

+101
-29
lines changed

‎src/App.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@
3535
placeholder: "id"
3636
},
3737
sort: true,
38+
row_text_alignment: "text-right",
39+
column_text_alignment: "text-right",
40+
// row_classes: "myrowclassone myrowclasstwo",
41+
// column_classes: "column-class-one column-class-two"
3842
// uniqueId: true
3943
},
4044
{
@@ -45,6 +49,8 @@
4549
placeholder: "Enter first name"
4650
},
4751
sort: true,
52+
row_text_alignment: "text-left",
53+
column_text_alignment: "text-right",
4854
// slot_name: "my_duplicate_id_column"
4955
},
5056
{
@@ -56,6 +62,7 @@
5662
case_sensitive: true
5763
},
5864
sort: true,
65+
row_classes: ["myrowclassone","myrowclasstwo"]
5966
},
6067
{
6168
label: "Email",
@@ -65,6 +72,8 @@
6572
placeholder: "Enter email"
6673
},
6774
sort: true,
75+
row_text_alignment: "text-left",
76+
column_text_alignment: "text-left",
6877
},
6978
{
7079
label: "City",

‎src/components/VueBootstrap4Table.vue‎

Lines changed: 92 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,42 @@
99
<div class="table-responsive">
1010
<table class="table table-striped table-bordered">
1111
<thead>
12-
<tr>
12+
<tr v-if="showToolsRow">
1313
<th :colspan="headerColSpan">
14-
<div class="row" v-if="global_search.visibility">
15-
<!-- global search text starts here -->
16-
<div class="input-group col-md-2">
17-
<input ref="global_search" type="text" class="form-control" :placeholder="global_search.placeholder" @keyup.stop="updateGlobalSearch($event)">
18-
<div class="input-group-append vbt-global-search-clear" @click="clearGlobalSearch">
19-
<span class="input-group-text">
20-
<slot name="clear-global-search-icon">
21-
&#x24E7;
22-
</slot>
23-
</span>
14+
<div class="row">
15+
<div class="col-md-4">
16+
<div class=row>
17+
<!-- global search text starts here -->
18+
<div class="col-md-6 input-group" v-if="global_search.visibility">
19+
<input ref="global_search" type="text" class="form-control" :placeholder="global_search.placeholder" @keyup.stop="updateGlobalSearch($event)">
20+
<div class="input-group-append vbt-global-search-clear" @click="clearGlobalSearch">
21+
<span class="input-group-text">
22+
<slot name="clear-global-search-icon">
23+
&#x24E7;
24+
</slot>
25+
</span>
26+
</div>
27+
</div>
28+
<!-- global search text ends here -->
29+
30+
<!-- refresh & reset button starts here -->
31+
<div class="col-md-6">
32+
<div class="btn-group" role="group" aria-label="Basic example">
33+
<button v-if="show_refresh_button" type="button" class="btn btn-secondary" @click="$emit('refresh-data')">
34+
<slot name="refresh-button-text">
35+
Refresh
36+
</slot>
37+
</button>
38+
<button type="button" v-if="show_reset_button" class="btn btn-secondary" @click="resetQuery">
39+
<slot name="reset-button-text">
40+
Reset Query
41+
</slot>
42+
</button>
43+
</div>
44+
</div>
45+
<!-- refresh & reset button ends here -->
2446
</div>
2547
</div>
26-
<!-- global search text ends here -->
27-
28-
<!-- refresh & reset button starts here -->
29-
<div class="btn-group col-md-2" role="group" aria-label="Basic example">
30-
<button v-if="show_refresh_button" type="button" class="btn btn-secondary" @click="$emit('refresh-data')">
31-
<slot name="refresh-button-text">
32-
Refresh
33-
</slot>
34-
</button>
35-
<button type="button" v-if="show_reset_button" class="btn btn-secondary" @click="resetQuery">
36-
<slot name="reset-button-text">
37-
Reset Query
38-
</slot>
39-
</button>
40-
</div>
41-
<!-- refresh & reset button ends here -->
4248

4349
<!-- action buttons starts here -->
4450
<div class="btn-group col-md-8 justify-content-end" role="group" aria-label="Basic example">
@@ -61,7 +67,7 @@
6167
</th>
6268

6369
<slot name="columns" :columns="vbt_columns">
64-
<th v-for="(column, key, index) in vbt_columns" :key="index" v-on="isSortableColumn(column) ? { click: () => updateSortQuery(column) } : {}" class="text-center vbt-column-header" v-bind:class="{'vbt-sort-cursor':isSortableColumn(column)}">
70+
<th v-for="(column, key, index) in vbt_columns" :key="index" v-on="isSortableColumn(column) ? { click: () => updateSortQuery(column) } : {}" class="vbt-column-header" :class="columnClasses(column)">
6571
<slot :name="'column_' + getCellSlotName(column)" :column="column">
6672
{{column.label}}
6773
</slot>
@@ -83,7 +89,7 @@
8389
<!-- data rows stars here -->
8490
<tr v-for="(row, key, index) in vbt_rows" :key="index" ref="vbt_row" v-bind:style='{"background": (canHighlightHover(row,row_hovered)) ? rowHighlightColor : ""}' @mouseover="rowHovered(row)" @mouseleave="rowHoveredOut()" v-on="rows_selectable ? { click: () => selectCheckboxByRow(row) } : {}">
8591
<CheckBox :checkboxRows="checkbox_rows" :selectedItems="selected_items" :rowsSelectable="rows_selectable" :row="row" @add-selected-item="addSelectedItem" @remove-selected-item="removeSelectedItem"></CheckBox>
86-
<td v-for="(column, key, hindex) in vbt_columns" :key="hindex" class="text-center">
92+
<td v-for="(column, key, hindex) in vbt_columns" :key="hindex" :class="rowClasses(column)">
8793
<slot :name="getCellSlotName(column)" :row="row" :column="column" :cell_value="getValueFromRow(row,column.name)">
8894
{{getValueFromRow(row,column.name)}}
8995
</slot>
@@ -805,7 +811,60 @@ export default {
805811
806812
this.$emit('on-change-query',payload);
807813
}
814+
},
815+
816+
rowClasses(column) {
817+
let classes = "";
818+
819+
let default_text_alignment = "text-center";
820+
821+
//decide text alignment class - starts here
822+
let alignments = ["text-justify","text-right","text-left","text-center"];
823+
if (_.has(column, "row_text_alignment") && _.includes(alignments, column.row_text_alignment)) {
824+
classes = classes + " " + column.row_text_alignment;
825+
} else {
826+
classes = classes + " " + default_text_alignment;
827+
}
828+
//decide text alignment class - ends here
829+
830+
// adding user defined classes to rows - starts here
831+
if (_.has(column, "row_classes")) {
832+
classes = classes + " " + column.row_classes;
833+
}
834+
// adding user defined classes to rows - ends here
835+
836+
return classes;
837+
},
838+
839+
columnClasses(column) {
840+
let classes = "";
841+
842+
let default_text_alignment = "text-center";
843+
844+
//decide text alignment class - starts here
845+
let alignments = ["text-justify","text-right","text-left","text-center"];
846+
if (_.has(column, "column_text_alignment") && _.includes(alignments, column.column_text_alignment)) {
847+
classes = classes + " " + column.column_text_alignment;
848+
} else {
849+
classes = classes + " " + default_text_alignment;
850+
}
851+
//decide text alignment class - ends here
852+
853+
// adding user defined classes to rows - starts here
854+
if (_.has(column, "column_classes")) {
855+
classes = classes + " " + column.column_classes;
856+
}
857+
// adding user defined classes to rows - ends here
858+
859+
// adding classes for sortable column - starts here
860+
if (this.isSortableColumn(column)) {
861+
classes = classes + " vbt-sort-cursor";
862+
}
863+
// adding classes for sortable column - ends here
864+
865+
return classes;
808866
}
867+
809868
},
810869
computed: {
811870
// pagination computed properties -start
@@ -900,6 +959,10 @@ export default {
900959
count += this.vbt_columns.length;
901960
902961
return count;
962+
},
963+
964+
showToolsRow() {
965+
return (this.global_search.visibility == true || this.show_refresh_button == true || this.show_reset_button == true || this.actions.length > 0);
903966
}
904967
905968
},

0 commit comments

Comments
 (0)