React DataTable组件：实现列标题第三次点击重置排序功能

因为react-data-table-component没有内置的排序重置功能，你可以通过手动控制排序状态来实现重置，不用刷新页面：

• 用useState维护排序状态，初始值设为未排序状态（或你的默认排序规则）
• 将状态和排序回调绑定到组件的sort和onSort属性上
• 添加重置按钮，点击时把排序状态重置为初始值

代码示例 #

import React, { useState } from 'react';
import DataTable from 'react-data-table-component';

const MyTable = ({ columns, data }) => {
  // 初始化为未排序状态，若有默认排序可设为 { field: 'yourDefaultField', direction: 'asc' }
  const [sortState, setSortState] = useState({ field: '', direction: '' });

  // 处理组件的排序事件
  const handleSort = (newSort) => {
    setSortState(newSort);
  };

  // 重置排序
  const resetSort = () => {
    setSortState({ field: '', direction: '' });
  };

  return (
    <div>
      <button onClick={resetSort}>重置排序</button>
      <DataTable
        columns={columns}
        data={data}
        sort={sortState}
        onSort={handleSort}
        // 其他你需要的属性，比如 pagination、striped 等
      />
    </div>
  );
};

export default MyTable;

原理是当你把排序状态设为受控模式后，组件会根据sort属性的值渲染排序状态，重置状态就会让表格回到初始的未排序（或默认排序）状态，完全不需要刷新页面。

内容的提问来源于stack exchange，提问作者Rob Julio