Как заказать данные в таблице Ant Design V2.x?

Question

Я использую Ant Design V2.X и не могу перейти на более новую версию. Я унаследовал код, и я изо всех сил, чтобы отсортировать данные по определенному столбцу. Заказывается один раз, а не сортируется динамически.

Это то, что у меня есть в функции return() моего компонента React:

<Table size="small"
       dataSource={this.props.Data}
       rowKey={(record) => (record.LedgerId * 100 + record.PositionId).toString()}
       pagination={false}
       showHeader={true}
>

Я предполагал, что rowKey упорядочит мои данные в соответствии с функцией стрелки, но это не вариант. Не могли бы вы все подсказать мне, как решить эту проблему?

Справочная информация

Внутри компонента у меня есть следующее объявление:

export interface ViewTableProps {   
    selectedEntity: number,
    Data Interfaces.ViewEntry[],
}

и в другом месте

export interface ViewEntry {
    //Id: number,
    LedgerId: number,
    PositionId: number,
    Value: number,
    children: ViewEntry[]
}

Связанные и не очень связанные сообщения

• Таблица Antd - сортировка не работает с визуализацией
• Не удается отсортировать столбец в таблице Ant Design на сайте Gatsby
• Сортировать таблицу antd (Ant Design) с включенным выбором

Answer 1

Если вы хотите добавить фактические сортировщики в отдельные столбцы, вам нужно написать функции сортировки в свойстве sorter определений столбцов. Если вы хотите отсортировать весь набор данных по умолчанию, вы можете отсортировать источник данных перед передачей его в таблицу.

Сортировка столбцов из их документов :

{
    title: 'Age',
    dataIndex: 'age',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
  },

Если вы хотите «сортировку по умолчанию», вы можете просто сделать функцию для сортировки данных вне таблицы;

const sortData = (data) => {
   // Call slice to create a new Array and prevent mutating it if it's stored in state
   return data.slice().sort((a, b) => a.myKey - b.myKey);
}

...

<Table size="small"
       dataSource={sortData(this.props.Data)}
       rowKey={(record) => (record.LedgerId * 100 + record.PositionId).toString()}
       pagination={false}
       showHeader={true}
>