Ant Design的Table組件去除“取消排序”選項

　　在Ant Design的Table組件文檔中，排序有三種狀態：點擊升序、點擊降序、取消排序。一般需求只需要升序和降序，不需要取消排序，這時候就需要我們設置sortOrder來去除取消排序。

　　首先，我們從官方文檔中ctrl+c出一個排序栗子，放在我們的組件中。

import React, { useEffect, useState } from 'react';
import { Table } from 'antd'

export default () => {
  const [data, setData] = useState([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 30,
      address: 'Sidney No. 1 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 25,
      address: 'London No. 2 Lake Park',
    },
  ]
  )
  const columns: any = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a: any, b: any) => a.age - b.age,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ]

  const onChange = (pagination: any, filters: any, sorter: any, extra: any) => {
    //pagination分頁、filters篩選、sorter排序變化時觸發。extra:當前的data
    console.log(sorter)
  }
  return (
    <div>
      <Table columns={columns} dataSource={data} onChange={onChange} />
    </div>
  );
}

　　當我們點擊排序時，會觸發onChange事件，打印出的sorter如下：

　　

 　　其中，sorter.order為排序狀態。undefined：取消排序，ascend：升序，descend：降序。

　　 如何去除取消排序呢？在官方提供的API中，有sortOrder和sortDirections這兩個參數，

　　sortOrder：排序的受控屬性，外界可用此控制列的排序，可設置為ascend、descend、false。　　　　　

　　sortDirections：支持的排序方式，覆蓋Table中sortDirections， 取值為 ascend 、descend。

　　下面我們就來開始實現去除取消排序。

一、設置sortOrder

　　首先我們需要聲明一個變量sortOrderTest，默認為descend

 const [sortOrderTest, setSortOrderTest] = useState<string>('descend')

　　然后給colum中的排序項Age設置sortOrder

{
   title: 'Age',
   dataIndex: 'age',
   sortOrder: sortOrderTest,
   sorter: (a: any, b: any) => a.age - b.age,
},

　　設置完成之后，每次點擊排序，發現console輸出的一直都是undefined，這是因為我們默認為descend，下一個狀態為取消排序，而我們沒有去更改sorter狀態導致的。所以每次當我們onChange的時候，都要去改變一下設置的變量sortOrderTest

　const onChange = (pagination: any, filters: any, sorter: any, extra: any) => {

    setSortOrderTest(sorter.order || 'descend')

  }

　　只改變sortOrderTest依然是不夠的，這時再進行我們的第二步設置。

二、設置sortDirections

  {
     title: 'Age',
     dataIndex: 'age',
     key: 'age',
     sortOrder: sortOrderTest,
     sortDirections: ['descend', 'ascend'],
     sorter: (a: any, b: any) => a.age - b.age,
   }

　　這樣設置完成之后，Table就去除了取消排序，只剩下升序和降序了。

三、優化

　　去除取消排序后，表頭顯示下一次排序的 tooltip 提示一直是點擊升序、取消排序循環展示。取消排序其實就是降序，但是不夠直觀，目前菜菜的我尚未找到如何設置，暫時將tootip關閉。如果你有方法，也可以在評論中告訴我^_^　,后續我找到方法也會更新哦。要將tootip關閉，showSorterTooltip設置為false即可，具體設置如下：

{
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  sortOrder: sortOrderTest,
  sortDirections: ['descend', 'ascend'],
  showSorterTooltip:false,
  sorter: (a: any, b: any) => a.age - b.age,
 }

　　項目中的排序一般是通過接口來排序的，要根據sorter來傳不同的參數獲取結果，這時候就可以用useEffect來處理。

　　首先，我們需要將更改column中的sorter，將其置為true。

{
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    sortOrder: sortOrderTest,
    sortDirections: ['descend', 'ascend'],
    showSorterTooltip: false,
    sorter: true,
 }

　　然后我們寫一個請求函數

const getList = () => {
    let data = {
      sort: sortOrderTest
    }
    console.log(data)
    //根據參數去發送請求
    //await。。。。
    //請求成功之后設置data，達成排序
    //setData(result)
}

　　最后，將這個函數放到useEffect中，每當sorter改變的時候，就會自動觸發該函數。

useEffect(() => {
    getList()
}, [sortOrderTest])

四、完整代碼

import React, { useEffect, useState } from 'react';
import { Table } from 'antd'

export default () => {
  const [sortOrderTest, setSortOrderTest] = useState<string>('descend');
  const [data, setData] = useState([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 30,
      address: 'Sidney No. 1 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 25,
      address: 'London No. 2 Lake Park',
    },
  ]
  )
  useEffect(() => {
    getList()
  }, [sortOrderTest])
  const getList = () => {
    let data = {
      sort: sortOrderTest
    }
    console.log(data)
    //根據參數去發送請求
    //await。。。。
    //請求成功之后設置data，達成排序
    //setData(result)
  }
  const onChange = (pagination: any, filters: any, sorter: any, extra: any) => {
    setSortOrderTest(sorter.order || 'descend')
  }
  const columns: any = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sortOrder: sortOrderTest,
      sortDirections: ['descend', 'ascend'],
      showSorterTooltip: false,
      sorter: true,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ]
  return (
    <div>
      <Table columns={columns} dataSource={data} onChange={onChange} />
    </div>
  );
}