Vue-good-table
Vue-good-table
Source
Edit
History

Sort Options

카탈로그
  1. 1. Sort Options
    1. 1.1. enabled
    2. 1.2. initialSortBy
    3. 1.3. Multiple Column Sort

Sort Options

Set of options related to table sorting

1
2
3
4
5
6
7
8
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
    initialSortBy: {field: 'name', type: 'asc'}
  }">
</vue-good-table>

enabled

type: Boolean (default: true)

Enable/disable sorting on table as a whole. 

1
2
3
4
5
6
7
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
  }">
</vue-good-table>

initialSortBy

::: tip Update
initialSortBy now allows for sort by multiple columns
:::

type: Object or Array

Allows specifying a default sort for the table on wakeup

1
2
3
4
5
6
7
8
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
    initialSortBy: {field: 'name', type: 'asc'}
  }">
</vue-good-table>

Multiple Column Sort

1
2
3
4
5
6
7
8
9
10
11
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
    initialSortBy: [
      {field: 'name', type: 'asc'},
      {field: 'age', type: 'desc'}
    ],
  }">
</vue-good-table>

Users can shift-click on multiple columns to sort by multiple columns. The first column in the array gets primary sort.