diff --git a/src/components/Table.vue b/src/components/Table.vue
index 66094175..d8136ee4 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -31,7 +31,7 @@
|
@@ -43,7 +43,7 @@
|
- |
-
+ |
{{ collectFormatted(row, column) }}
|
@@ -173,7 +173,7 @@
},
sort(index) {
- if (!this.sortable)
+ if (!this.isSortableColumn(index))
return;
if (this.sortColumn === index) {
this.sortType = this.sortType === 'asc' ? 'desc' : 'asc';
@@ -263,49 +263,35 @@
return formattedRow;
},
- // Get the necessary style-classes for the given column
- //--------------------------------------------------------
- columnHeaderClass(column, index){
- var classString = '';
- if (this.sortable) {
- classString += 'sorting ';
- }
- if (index === this.sortColumn) {
- if (this.sortType === 'desc') {
- classString += 'sorting-desc ';
- } else {
- classString += 'sorting-asc ';
- }
- }
- classString += this.getDataStyle(index, 'th');
- return classString;
+ //Check if a column is sortable.
+ isSortableColumn(index) {
+ const sortable = this.columns[index].sortable;
+ const isSortable = typeof sortable === 'boolean' ? sortable : this.sortable;
+ return isSortable;
},
- // given column index, we can figure out what style classes
- // to apply to this data
- //---------------------------------------------------------
- getDataStyle(index, type) {
- var classString = '';
- switch (this.columns[index].type) {
- case 'number':
- case 'percentage':
- case 'decimal':
- case 'date':
- classString += 'right-align ';
- break;
- default:
- if(!this.rtl) {
- classString += 'left-align ';
- } else {
- // if right to left is enabled this is the default
- classString += 'right-align ';
- }
- break;
- }
- if (typeof type !== 'undefined' && this.columns[index].hasOwnProperty(type + 'Class')) {
- classString += ' ';
- classString = this.columns[index][type + 'Class'];
- }
- return classString;
+
+ //Get classes for the given header column.
+ getHeaderClasses(column, index) {
+ const isSortable = this.isSortableColumn(index);
+ const isDescending = this.sortColumn === index && this.sortType === 'desc';
+ const classes = Object.assign({}, this.getClasses(index, 'th'), {
+ 'sorting': isSortable,
+ 'sorting-desc': isSortable && isDescending,
+ 'sorting-asc': isSortable && !isDescending
+ });
+ return classes;
+ },
+
+ //Get classes for the given column index & element.
+ getClasses(index, element) {
+ const { type, [element + 'Class']: custom } = this.columns[index];
+ const isRight = ['number', 'percentage', 'decimal', 'date', 'text'].includes(type);
+ const classes = {
+ 'right-align': isRight,
+ 'left-align': !isRight,
+ [custom]: !!custom
+ };
+ return classes;
},
//since vue doesn't detect property addition and deletion, we
@@ -467,7 +453,7 @@
}
//taking care of sort here only if sort has changed
- if (this.sortable !== false && this.sortColumn !== -1 &&
+ if (this.sortColumn !== -1 && this.isSortableColumn(this.sortColumn) &&
// if search trigger is enter then we only sort
// when enter is hit
|