feat(table): Add no-sort-reset prop (#1784)

src/components/table/README.md

@@ -886,7 +886,8 @@ export default {
 As mentioned in the [**Fields**](#fields-column-definitions-) section above,
 you can make columns sortable. Clicking on a sortable column header will sort the
 column in ascending direction (smallest first), while clicking on it again will switch the direction
-of sorting. Clicking on a non-sortable column will clear the sorting.
+of sorting. Clicking on a non-sortable column will clear the sorting. The prop `no-sort-reset` 
+can be used to disable this feature.
 
 You can control which column is pre-sorted and the order of sorting (ascending or
 descending). To pre-specify the column to be sorted, set the `sort-by` prop to

src/components/table/fixtures/table.html

@@ -13,16 +13,18 @@ <h2>Basic table</h2>
         </template>
     </b-table>
 
-  <b-table ref="table_stacked" striped hover stacked :items="items" :fields="fields">
-    <template slot="name" slot-scope="data">
-      {{ data.value.first }} {{ data.value.last }}
-    </template>
-  </b-table>
+    <b-table ref="table_stacked" striped hover stacked :items="items" :fields="fields">
+        <template slot="name" slot-scope="data">
+        {{ data.value.first }} {{ data.value.last }}
+        </template>
+    </b-table>
 
-  <b-table ref="table_without_fields" :items="secondaryItems"></b-table>
+    <b-table ref="table_without_fields" :items="secondaryItems"></b-table>
 
     <b-table ref="table_responsive" responsive :items="items" :fields="fields"></b-table>
 
+    <b-table ref="table_no_sort_reset" :items="items" :fields="fields" no-sort-reset></b-table>
+
     <h2>Paginated Table</h2>
     <div class="my-1 row">
         <div class="col-6">

src/components/table/table.js

@@ -527,6 +527,10 @@ export default {
       type: Boolean,
       default: false
     },
+    noSortReset: {
+      type: Boolean,
+      default: false
+    },
     busy: {
       type: Boolean,
       default: false
@@ -928,7 +932,7 @@ export default {
           this.localSortDesc = false
         }
         sortChanged = true
-      } else if (this.localSortBy) {
+      } else if (this.localSortBy && !this.noSortReset) {
         this.localSortBy = null
         this.localSortDesc = false
         sortChanged = true

src/components/table/table.spec.js

@@ -528,6 +528,38 @@ describe('table', async () => {
     }
   })
 
+  it('non-sortable header th should not emit a sort-changed event when clicked and prop no-sort-reset is set', async () => {
+    const { app: { $refs } } = window
+    const vm = $refs.table_no_sort_reset
+    const spy = jest.fn()
+    const fieldKeys = Object.keys(vm.fields)
+
+    vm.$on('sort-changed', spy)
+    const thead = [...vm.$el.children].find(el => el && el.tagName === 'THEAD')
+    expect(thead).toBeDefined()
+    if (thead) {
+      const tr = [...thead.children].find(el => el && el.tagName === 'TR')
+      expect(tr).toBeDefined()
+      if (tr) {
+        let sortBy = null
+        const ths = [...tr.children]
+        expect(ths.length).toBe(fieldKeys.length)
+        ths.forEach((th, idx) => {
+          th.click()
+          if (vm.fields[fieldKeys[idx]].sortable) {
+            expect(spy).toHaveBeenCalledWith(vm.context)
+            expect(vm.context.sortBy).toBe(fieldKeys[idx])
+            sortBy = vm.context.sortBy
+          } else {
+            expect(spy).not.toHaveBeenCalled()
+            expect(vm.context.sortBy).toBe(sortBy)
+          }
+          spy.mockClear()
+        })
+      }
+    }
+  })
+
   it('table_paginated pagination works', async () => {
     const { app: { $refs } } = window
     const vm = $refs.table_paginated