Fix issue with sorting arrow pushing out alignment of table

This commit is contained in:
George Drummond
2019-01-18 14:22:30 -05:00
parent cb4d8e8330
commit 66fb6311b2
4 changed files with 10 additions and 6 deletions

View File

@@ -67,10 +67,10 @@
<tr>
<th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
!{ col.displayName }
<span v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
{{ Icon("caret_down") }}
</span>
<span v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
{{ Icon("caret_up") }}
</span>
</th>

View File

@@ -26,10 +26,10 @@
<th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
!{ col.displayName }
<template v-if="col.sortFunc">
<span v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
{{ Icon("caret_down") }}
</span>
<span v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
{{ Icon("caret_up") }}
</span>
</template>

View File

@@ -115,10 +115,10 @@
<tr>
<th @click.prevent="updateSortValue(column.attr)" v-for="column in getColumns()"scope="col">
!{ column.displayName }
<span v-if="column.attr === sort.columnName && sort.isAscending">
<span class="sorting-direction" v-if="column.attr === sort.columnName && sort.isAscending">
{{ Icon("caret_down") }}
</span>
<span v-else-if="column.attr === sort.columnName && !sort.isAscending">
<span class="sorting-direction" v-else-if="column.attr === sort.columnName && !sort.isAscending">
{{ Icon("caret_up") }}
</span>
</th>