11<script >
2- import DatasourceUtils from ' .. /utils/DatasourceUtils'
2+ import DatasourceUtils from ' @ /utils/DatasourceUtils'
33import Pagination from ' ./Pagination'
4- import {EventBus } from ' ../utils/EventBus'
4+ import {EventBus } from ' @/utils/EventBus'
5+ import IconAsc from ' @/assets/icon-asc.png'
6+ import IconDesc from ' @/assets/icon-desc.png'
57export default {
68 name: ' ServerDatasource'
79 components: {Pagination},
@@ -124,7 +126,11 @@ export default {
124126 current_page: 1 ,
125127 selected: null , // row and Object selected on click event
126128 indexSelected: - 1 , // index row selected on click event
127- search: ' ' // word to search in the table,
129+ search: ' ' // word to search in the table,
130+ columnSortSelected: { // Object to set a column sort data
131+ key: null ,
132+ order: true
133+ }
128134 }
129135 },
130136 computed: {
@@ -134,8 +140,20 @@ export default {
134140 })
135141 },
136142 columnItems () {
143+ let showArrows = (key ) => {
144+ return (this .shouldShowUpArrow (key)) ? < img src= {IconDesc} width= " 15" / >
145+ : < img src= {IconAsc} width= " 15" / >
146+ }
147+
137148 return this .columns .map ((column , index ) => {
138- return < th> {column .name }< / th>
149+ if (column .order ) {
150+ return < th on- click= {(e ) => this .sortColumn (e, column .key )}>
151+ {column .name }
152+ < span class = " vue-server-arrows" > {showArrows (column .key )}< / span>
153+ < / th>
154+ } else {
155+ return < th> {column .name }< / th>
156+ }
139157 })
140158 },
141159 columnObjects () {
@@ -182,7 +200,10 @@ export default {
182200 this .indexSelected = - 1
183201 this .current_page = 1
184202 this .$emit (' searching' e .target .value )
185- }
203+ },
204+ sortColumn: DatasourceUtils .sortColumn ,
205+ shouldShowUpArrow: DatasourceUtils .shouldShowUpArrow ,
206+ shouldShowDownArrow: DatasourceUtils .shouldShowDownArrow
186207 },
187208 watch: {
188209 /**
@@ -208,8 +229,16 @@ export default {
208229 position relative ;
209230 padding 0 ;
210231 }
232+ .vue-server-arrows {
233+ position absolute ;
234+ right 0 ;
235+ top 6px ;
236+ }
211237 table {
212238 margin-bottom 0 ;
239+ th {
240+ position relative ;
241+ }
213242 }
214243 .panel-footer {
215244 .btn-group-actions {
0 commit comments