Add optional sortable columns (#89)

* Add optional sortable columns

Added a property "sortable" that is stronger than global sortable option
and let any column be or not be sortable. This fixes #86 issue.

* Add semi + Remove JSDoc

src/components/Table.vue

@@ -31,7 +31,7 @@
             <th v-if="lineNumbers" class="line-numbers"></th>
             <th v-for="(column, index) in columns"
               @click="sort(index)"
-              :class="columnHeaderClass(column, index)"
+              :class="getHeaderClasses(column, index)"
               :style="{width: column.width ? column.width : 'auto'}"
               v-if="!column.hidden">
               <slot name="table-column" :column="column">
@@ -43,7 +43,7 @@
           <tr v-if="hasFilterRow">
             <th v-if="lineNumbers"></th>
             <th v-for="(column, index) in columns" v-if="!column.hidden">
-              <div v-if="column.filterable" :class="columnHeaderClass(column, index)">
+              <div v-if="column.filterable" :class="columnHeaderClasses(column, index)">
                 <input v-if="!column.filterDropdown"
                   type="text"
                   class=""
@@ -84,7 +84,7 @@
             <th v-if="lineNumbers" class="line-numbers">{{ getCurrentIndex(index) }}</th>
             <slot name="table-row-before" :row="row" :index="index"></slot>
             <slot name="table-row" :row="row" :formattedRow="formattedRow(row)" :index="index">
-              <td v-for="(column, i) in columns" :class="getDataStyle(i, 'td')" v-if="!column.hidden && column.field">
+              <td v-for="(column, i) in columns" :class="getClasses(i, 'td')" v-if="!column.hidden && column.field">
                 <span v-if="!column.html">{{ collectFormatted(row, column) }}</span>
                 <span v-if="column.html" v-html="collect(row, column.field)"></span>
               </td>
@@ -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