Permalink
Browse files

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

  • Loading branch information...
emanuelmutschlechner authored and pi0 committed Apr 29, 2018
1 parent fa60d56 commit 26aaeab1de439491aa4950d642d486d539b10c4e
@@ -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
@@ -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">
@@ -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
@@ -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

1 comment on commit 26aaeab

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented on 26aaeab Nov 10, 2018

This might have been better implemented by making the sortable column headers tri-state click... i.e. cycle from asc (false) => desc (true) => no sort (null) => asc (false) => desc (true) => etc,, and removing the click handlers on the non-sortable headers. This would make for a better user interface design.

Please sign in to comment.