How to change default sorting icon on table header column on React Material-Table?

2
votes

Can I change the default sorting icon on React Material-Table table header column ? ex. I want to change asc sorting icon to ArrowDownward and desc sorting icon to ArrowUpward. I try to set SortArrow icons props on MaterialTable but its show on every table header columns even its not active sorting column. Please help.

Material-Table

Code:

<MaterialTable ... icons={{ SortArrow: () => <ArrowDownwardIcon /> }}
1
reactjsmaterial-uimaterial-table

1 Answers

6
votes

You have to forward the refs like this:

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

This will pass the required props to your custom icon and it will work.