Browse files

feat(table): Add the sort-direction prop (#1783) (#1788)

  • Loading branch information...
emanuelmutschlechner authored and pi0 committed May 17, 2018
1 parent 20c6f16 commit 9e1959d0996f745967c10dfadae1bb8482d63a17
Showing with 47 additions and 5 deletions.
  1. +31 −2 src/components/table/
  2. +16 −3 src/components/table/table.js
@@ -275,6 +275,7 @@ The following field properties are recognized:
| `class` | String or Array | Class name (or array of class names) to add to `<th>` **and** `<td>` in the column.
| `formatter` | String or Function | A formatter callback function, can be used instead of (or in conjunction with) slots for real table fields (i.e. fields, that have corresponding data at items array). Refer to [**Custom Data Rendering**](#custom-data-rendering) for more details.
| `sortable` | Boolean | Enable sorting on this column. Refer to the [**Sorting**](#sorting) Section for more details.
| `sortDirection` | String | Change sort direction on this column. Refer to the [**Change sort direction**](#change-sort-direction) Section for more details.
| `tdClass` | String or Array or Function | Class name (or array of class names) to add to `<tbody>` data `<td>` cells in the column. If custom classes per cell are required, a callback function can be specified instead.
| `thClass` | String or Array | Class name (or array of class names) to add to `<thead>`/`<tfoot>` heading `<th>` cell.
| `thStyle` | Object | JavaScript object representing CSS styles you would like to apply to the table `<thead>`/`<tfoot>` field `<th>`.
@@ -993,6 +994,18 @@ will be emitted with a single argument containing the context object of `<b-tabl
See the [Detection of sorting change](#detection-of-sorting-change) section below
for details about the sort-changed event and the context object.
### Change sort direction
Control the order in which ascending and descending sorting is applied when a sortable column
header is clicked, by using the the `sort-direction` prop. The default value `'asc'` applies
ascending sort first. To reverse the behavior and sort in descending direction first, set
it to `'desc'`.
If you don't want the sorting direction to change at all when clicking another sortable
column header, set `sort-direction` to `'last'`.
For individual column sort directions, specify the property `sortDirection` in `fields`.
See the [Complete Example](#complete-example) below for an example of using this feature.
## Filtering
Filtering, when used, is applied to the **original items** array data, and hence it is not
@@ -1267,7 +1280,15 @@ when fetching your data!
<b-col md="6" class="my-1">
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
<b-form-group horizontal label="Sort direction" class="mb-0">
<b-form-select v-model="sortDirection" slot="append">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
<option value="last">Last</option>
<b-col md="6" class="my-1">
<b-form-group horizontal label="Per page" class="mb-0">
@@ -1286,6 +1307,7 @@ when fetching your data!
<template slot="name" slot-scope="row">{{row.value.first}} {{row.value.last}}</template>
@@ -1307,6 +1329,12 @@ when fetching your data!
<b-col md="6" class="my-1">
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
<!-- Info modal -->
<b-modal id="modalInfo" @hide="resetModal" :title="modalInfo.title" ok-only>
@@ -1347,7 +1375,7 @@ export default {
return {
items: items,
fields: [
{ key: 'name', label: 'Person Full name', sortable: true },
{ key: 'name', label: 'Person Full name', sortable: true, sortDirection: 'desc' },
{ key: 'age', label: 'Person age', sortable: true, 'class': 'text-center' },
{ key: 'isActive', label: 'is Active' },
{ key: 'actions', label: 'Actions' }
@@ -1358,6 +1386,7 @@ export default {
pageOptions: [ 5, 10, 15 ],
sortBy: null,
sortDesc: false,
sortDirection: 'asc',
filter: null,
modalInfo: { title: '', content: '' }
@@ -5,7 +5,7 @@ import stableSort from '../../utils/stable-sort'
import KeyCodes from '../../utils/key-codes'
import warn from '../../utils/warn'
import { keys, assign } from '../../utils/object'
import { isArray } from '../../utils/array'
import { arrayIncludes, isArray } from '../../utils/array'
import idMixin from '../../mixins/id'
import listenOnRootMixin from '../../mixins/listen-on-root'
@@ -399,6 +399,11 @@ export default {
type: Boolean,
default: false
sortDirection: {
type: String,
default: 'asc',
validator: direction => arrayIncludes(['asc', 'desc', 'last'], direction)
caption: {
type: String,
default: null
@@ -920,19 +925,27 @@ export default {
let sortChanged = false
const toggleLocalSortDesc = () => {
const sortDirection = field.sortDirection || this.sortDirection
if (sortDirection === 'asc') {
this.localSortDesc = false
} else if (sortDirection === 'desc') {
this.localSortDesc = true
if (field.sortable) {
if (field.key === this.localSortBy) {
// Change sorting direction on current column
this.localSortDesc = !this.localSortDesc
} else {
// Start sorting this column ascending
this.localSortBy = field.key
this.localSortDesc = false
sortChanged = true
} else if (this.localSortBy && !this.noSortReset) {
this.localSortBy = null
this.localSortDesc = false
sortChanged = true
this.$emit('head-clicked', field.key, field, e)

1 comment on commit 9e1959d


This comment has been minimized.


tmorehouse commented on 9e1959d Nov 10, 2018

the sort-desc prop is no longer documented because of this PR. And now the two props can be confusing as to what does what.

the new prop is also not syncable. I think we can find a better solution to this (such as allowing multiple sort, and using the existing props (but using arrays instead of booleans or strings.

Please sign in to comment.