How to sort the antd-table while keep one special line forever on the top of the table?

1
votes

I'm using react and ant design 3.26 to build my website, and using the antd_table to show some data.Now I need to sort the table while keep one speical row on the top of the table forever and dont be influenced by the sorter(neither descend nor ascend).Do I have some easy way to make this effect？

I dont want to use onChange() to do some complex function to manage the datasource and the state，just want to use the default sorter props provided by antd-table。

Here is a simple demo:

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
htmlreactjsantd

1 Answers

2
votes

You can compare the first line data to the a or b, If the a.name === data[0].name then 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
 },