个人而言,我是通过在标题上添加一个onClick事件,并让该事件触发我已经编程的排序函数来完成的。为确保更改显示出来,我添加了一个状态,可以在我进行更改时直接更新以渲染表格。具体效果如下:
<th className ="text-center" onClick= {()=>sortFunction('headerName')}>HeaderName</th>
以下是函数的简化版本:
function sortFunction(col){
switch (col){
case "headerName":
dataArray.sort((a, b)=>{
if(a.attribute>b.attribute){
return 1:-1;
}
if(a.attribute<b.attribute){
return -1;
}
return 0;
});
break;
default:
//you might want to do something as default, I don't
break;
setSort(sort+1);
请记住,我是这样声明状态的:
const [sort, setSort] = useState(0);
当比较两个字符串时,请确保使用 localeCompare 而不是 ><。使用自定义排序功能的好处是你可以选择如何进行比较,这意味着你可以按照自己喜欢的方式进行排序。我还添加了另一个变量来处理顺序,并在对表格进行排序时交换顺序。
在您的情况下,我会这样做:
dataArray.sort((a, b)=>{
if(new Date(a.daysTillExpiry).getTime()>new Date(b.daysTillExpiry).getTime()){
return 1;
}
if(new Date(a.daysTillExpiry).getTime()<new Date(b.daysTillExpiry).getTime()){
return -1;
}
return 0;
});
setSort(sort+1);