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 @@ -
+
{{ getCurrentIndex(index) }} - + {{ 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