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.
Code:
<MaterialTable ... icons={{ SortArrow: () => <ArrowDownwardIcon /> }}
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.
You can simply pass your component as a value
icons={{
SortArrow: ArrowDropUpIcon,
}}