如何按列号对“反应性-数据表-组件”进行排序

Question

我正在使用'react-data-table-component‘来反应JS。

以下是我的样本结构：

import DataTable from "react-data-table-component";

const data = myData;
const columns = [
   {
      name: 'Date',
      selector: 'dateOfAction',
      cell: row => <div>{moment(row.dateOfAction).format("MM-DD-YYYY A")}</div>,
      sortable: true,
   },
   {
      name: 'History Date',
      selector: 'dateOfAction',   
      cell: row => <div>{moment(row.dateOfAction).format("YYYY-MM-DD HH:mm:ss")}</div>,
      sortable: true,
   } 
];

<DataTable
   columns={columns}
   data={data}
   defaultSortField="dateOfAction"
   pagination
   striped
   defaultSortAsc={false}
 />

在这里，两列都有相同的选择器。

而且，我能够按照第一列(即'Date' )对数据进行排序，但我想按最后一列(即'History Date' )对表数据进行排序。

如何按上一栏对数据进行排序？

谢谢!

Answer 1

您可以在defaultSortFieldId组件中传递DataTable道具。根据文件：

defaultSortFieldId设置要预先排序的列，并对应于列定义id

这意味着您需要为每个列提供一个唯一的id，然后将要使用的id传递给defaultSortFieldId：

const columns = [
       {
          id: 'date',
          name: 'Date',
          selector: 'dateOfAction',
          cell: row => <div>{moment(row.dateOfAction).format("MM-DD-YYYY A")}</div>,
          sortable: true,
       },
       {
          id: 'historyDate',
          name: 'History Date',
          selector: 'dateOfAction',   
          cell: row => <div>{moment(row.dateOfAction).format("YYYY-MM-DD HH:mm:ss")}</div>,
          sortable: true,
       } 
    ];

<DataTable
   columns={columns}
   data={data}
   defaultSortFieldId="historyDate"
   pagination
   striped
   defaultSortAsc={false}
 />