Как отсортировать antd-table, оставив одну специальную строку навсегда наверху таблицы? - PullRequest
1 голос
/ 07 августа 2020

Я использую response and ant design 3.26 для создания своего веб-сайта и использую antd_table для отображения некоторых данных.Теперь мне нужно отсортировать таблицу, сохраняя одну специальную строку вверху таблицы навсегда и не подвергаясь влиянию сортировщик (ни по убыванию, ни по возрастанию). Есть ли у меня какой-нибудь простой способ сделать этот эффект?

Я не хочу использовать onChange() для выполнения сложной функции для управления источником данных и состоянием , просто хочу используйте свойства сортировщика по умолчанию, предоставляемые antd-table。

Вот простая демонстрация:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table} from "antd";

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    shouldForeverTop: true,
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    shouldForeverTop: false,
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    shouldForeverTop: false,
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park',
    shouldForeverTop: false,
  },
];

class App extends React.Component {
  render() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        sorter: (a, b) => a.name.length - b.name.length,
      },
      {
        title: 'Age',
        dataIndex: 'age',
        sorter: (a, b) => a.age - b.age,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        sorter: (a, b) => a.address.length - b.address.length,
      },
    ];
    return (
        <Table columns={columns} dataSource={data}/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

1 Ответ

2 голосов
/ 07 августа 2020

Вы можете сравнить данные первой строки с a или b, если a.name === data[0].name, то return 0

 sorter: (a, b) => {
   if(a.name === data[0].name || b.name === data[0].name) return 0;
   return a.name.length - b.name.length
 },

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...