fix bugs with sort

README.md

@@ -481,6 +481,11 @@ myStyleFn(row){
       <td>enables filtering on column (By default, creates a text input)</td>
       <td>Boolean</td>
     </tr>
+    <tr>
+      <td>placeholder</td>
+      <td>placeholder to use for filter input</td>
+      <td>String</td>
+    </tr>
     <tr>
       <td>filterDropdown</td>
       <td>provides a dropdown for filtering instead of a text input</td>

dev/App.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <vue-good-table :columns="columns" :rows="rows" :line-numbers="true">
+    <vue-good-table
+      :paginate="true"
+      :columns="columns" 
+      :rows="rows" 
+      :line-numbers="true">
       <template slot="table-row-before" scope="props">
         <td><input type="checkbox" /></td>
       </template>
@@ -21,7 +25,8 @@
       return {
         columns: [
           {
-            label: ''
+            label: '',
+            sortable: false,
           },
           {
             label: 'Name',
@@ -34,7 +39,8 @@
             type: 'number',
           }, 
           {
-            label: ''
+            label: '',
+            sortable: false,
           },
         ],
         rows: [
@@ -68,6 +74,18 @@
           }, {
             name: "Dan",
             age: "40"
+          }, {
+            name: "Jane",
+            age: "24"
+          }, {
+            name: "Susan",
+            age: "16"
+          }, {
+            name: "Chris",
+            age: "55"
+          }, {
+            name: "Dan",
+            age: "40"
           }, 
         ],
       };

src/components/Pagination.vue

@@ -3,8 +3,9 @@
     <div class="datatable-length pull-left">
       <label>
         <span>{{rowsPerPageText}}</span>
-        <span v-if="perPage" class="perpage-count">{{perPage}}</span>
-        <select v-if="!perPage" class="browser-default" @change="perPageChanged">
+        <!-- <span v-if="perPage" class="perpage-count">{{perPage}}</span> -->
+        <select class="browser-default" @change="perPageChanged">
+          <option v-if="perPage" :value="perPage">{{perPage}}</option>
           <option value="10">10</option>
           <option value="20">20</option>
           <option value="30">30</option>

src/components/Table.vue

@@ -30,6 +30,7 @@
           <tr>
             <th v-if="lineNumbers" class="line-numbers"></th>
             <th v-for="(column, index) in columns"
+              :key="column.field"
               @click="sort(index)"
               :class="getHeaderClasses(column, index)"
               :style="{width: column.width ? column.width : 'auto'}"
@@ -42,8 +43,11 @@
           </tr>
           <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="getHeaderClasses(column, index)">
+            <th v-for="(column, index) in columns"
+              :key="column.field"
+              v-if="!column.hidden">
+              <div v-if="column.filterable" 
+                :class="getHeaderClasses(column, index)">
                 <input v-if="!column.filterDropdown"
                   type="text"
                   class=""
@@ -59,6 +63,7 @@
                     <option value="">{{ getPlaceholder(column) }}</option>
                     <option
                       v-for="option in column.filterOptions"
+                      :key="option"
                       :value="option">
                       {{ option }}
                     </option>
@@ -70,21 +75,30 @@
                   :value="columnFilters[column.field]"
                   v-on:input="updateFilters(column, $event.target.value)">
                   <option value="">{{ getPlaceholder(column) }}</option>
-                  <option v-for="option in column.filterOptions"
-                  :value="option.value">{{ option.text }}</option>
+                  <option 
+                    v-for="option in column.filterOptions"
+                    :key="option"
+                    :value="option.value">{{ option.text }}</option>
                 </select>
-
               </div>
             </th>
           </tr>
         </thead>
 
         <tbody>
-          <tr v-for="(row, index) in paginated" :class="getRowStyleClass(row)" @click="click(row, index)">
+          <tr 
+            v-for="(row, index) in paginated"
+            :key="index"
+            :class="getRowStyleClass(row)" 
+            @click="click(row, index)">
             <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="getClasses(i, 'td')" v-if="!column.hidden && column.field">
+              <td 
+                v-for="(column, i) in columns"
+                :key="column.field" 
+                :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>
@@ -273,11 +287,10 @@
       //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
+          'sorting-desc': isSortable && this.sortColumn === index && this.sortType === 'desc',
+          'sorting-asc': isSortable && this.sortColumn === index && this.sortType === 'asc',
         });
         return classes;
       },