如何更改React Material-Table的表标题列上的默认排序图标?

时间:2019-10-08 11:42:30

标签: reactjs material-ui material-table

我可以更改React Material-Table表标题列上的默认排序图标吗?例如我想将asc排序图标更改为ArrowDownward,将desc排序图标更改为ArrowUpward。我尝试在MaterialTable上设置SortArrow图标道具,但它会显示在每个表标题列上,即使它不是活动的排序列。请帮忙。

Material-Table

代码:

<MaterialTable ... icons={{ SortArrow: () => <ArrowDownwardIcon /> }}

1 个答案:

答案 0 :(得分:0)

您必须像这样转发裁判:

import React, { forwardRef } from 'react';  
...
<MaterialTable>  
     icons={{ SortArrow: forwardRef((props, ref) => <ArrowDownwardIcon{...props} ref={ref}/>)}}
<MaterialTable> 

这会将所需的道具传递到您的自定义图标,并且可以使用。