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

Question

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 /> }}

score 6 · Accepted Answer · edited Dec 17 '19 at 22:50

6

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.

edited Dec 17 '19 at 22:50

halfer

19,824
17
99
186

answered Oct 08 '19 at 15:05

Domino987

8,475
2
15
38

I try this already but not working. The asc sorting icon still be ArrowUpwardIcon (I want to change to ArrowDownwardIcon). Thank for your help. – Mashizilla Oct 09 '19 at 11:45
Maybe it just works differently than you expect. Did you try using the ArrowUpwardIcon? – Domino987 Oct 09 '19 at 12:05
The problem is solved after try using the ArrowUpwardIcon. Thank you very much. – Mashizilla Oct 10 '19 at 10:06
` } checkedIcon={} />)}} tableRef={ref} /> ` not working for me – Prajapati Ghanshyam Apr 23 '21 at 12:59

score 0 · Answer 2 · answered Apr 21 '22 at 08:00

0

You can simply pass your component as a value

     icons={{
              SortArrow: ArrowDropUpIcon,
           }}

answered Apr 21 '22 at 08:00

Fahad Rana

11
4

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

2 Answers2