Table sortOrder not working #3394
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
1.7.2
Environment
Mac OS BigSur, Chrome LTS, Vue 2.x LTS
Reproduction link
Steps to reproduce
<template>
<a-layout-content>
<a-page-header class="page-header" title="Usuários" />
<div class="wrapper">
<a-input-search
placeholder="Pesquisar por nome, CPF ou email"
size="large"
v-model="input"
:loading="loading"
@search="onInputChange"
/>
<a-table
class="table"
:columns="columns"
:data-source="response"
:pagination="false"
:loading="loading"
bordered
@change="onTableChange"
>
</a-table>
<div class="pagination-wrapper">
<a-pagination
:show-less-items="true"
:total="total"
:show-total="(total, range) => `${range[0]}-${range[1]} de ${total}`"
:page-size="limit"
:default-current="offset / 10 + 1"
:current="offset / 10 + 1"
@change="onPaginationChange"
/>
</div>
</div>
</a-layout-content>
</template>
<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
@Component({})
export default class Index extends Vue {
input = ""
loading = false
columnKey?: string = undefined
order?: string = undefined
statuses: string[] = []
response = []
total = 0
limit = 10
offset = 0
get columns() {
const order = this.order
const columns = [
{
title: "Nome",
dataIndex: "name",
sortOrder: order,
sorter: true,
},
{
title: "Email",
dataIndex: "email",
},
{
title: "CPF",
dataIndex: "cpf",
},
{
title: "Criado",
dataIndex: "createdAt",
sorter: true,
defaultSortOrder: "descend",
},
{
title: "Status",
dataIndex: "status"
},
]
return columns
}
onInputChange() {
console.log(1)
}
onTableChange(pagination: any, filters: any, sorter: any) {
this.columnKey = sorter.columnKey
this.order = sorter.order
}
onPaginationChange() {
console.log(1)
}
}
</script>
<style lang="less" scoped>
.wrapper {
margin-left: 24px;
margin-right: 24px;
}
.table {
margin-top: 24px;
}
.pagination-wrapper {
margin-top: 24px;
display: flex;
justify-content: flex-end;
}
</style>
What is expected?
The name column to be sorted.
What is actually happening?
Nothing.
I'm using Vue Typescript and I don't think sortOrder is working in this env. I couldn't setup a codesandbox in typescript, but I attached a demo code.