Mui-datatables: Sorting Icon Doesnt Display
Sorting Icon Doesnt Display
pranavtheway
All 9 comments
You mean the asc/desc arrow in the column headers? It looks like it displays for me. Which version of material-ui and mui-datatables are you using?
patorjk
on 11 Jun 2020
Yes exactly those Icons
Below are my details:
Material Ui- 4.10.0
/icons - 3.0.2
/pickers - 3.2.6
Mui-datatables - ^3.0.0
pranavtheway
on 11 Jun 2020
Looks like they appear for me in this codesandbox with those versions: https://codesandbox.io/s/muidatatables-custom-toolbar-zk0t3?file=/index.js
Are you using any special customHeaderRender functions? What browser are you using?
patorjk
on 11 Jun 2020
No I am not using any customHeadRenderer, I am on Chrome Browser and IE11
Is it possible? If the number of columns are more in number with minWidth and maxWidth would result into this??
pranavtheway
on 11 Jun 2020
Does the codesandbox above work for you?
I have a feeling this could just be a style override somewhere. I vaguely remember encountering this, however, if I can't recreate it, it's going to be hard to debug. If you inspect the header element of your cells, do you see an element with a class of "MUIDataTableHeadCell-sortAction-[number]"? And for the currently sorted column, is there any svg element inside of this div?
patorjk
on 11 Jun 2020
Yes the sandbox work fine...
And I did saw the mentioned class and associated svg in inspect element, but it doesnt appear on header cell
Can u give the clue on what might have been overridden here which makes the icon to disappear!!?
pranavtheway
on 11 Jun 2020
So if you click on a column to sort it, and then you inspect the column, you see an svg like this, correct?
If so, I would look at the styles placed on the element to see if anything is overriding it from being visible. Basically compare the "Styles" in your console sidebar to the "Styles" in console for the codesanbox example.
patorjk
on 11 Jun 2020
I found it, the color of svg is white color hence was not visible... thanks for this Patrick, I resolved using the nesting implantation as override
MUIDataTableHeadCell:{
root:{
“& .MUITableSortLabel-icon”: {
color: “black”
}
}
}
pranavtheway
on 12 Jun 2020
No prob, glad to hear it's fixed :)
patorjk
on 12 Jun 2020
Related issues
krsandesh
·
3Comments
geekashu
·
3Comments
pranavtheway
·
3Comments
ronaiza-cardoso
·
3Comments
demoreno
·
4Comments
Most helpful comment
I found it, the color of svg is white color hence was not visible... thanks for this Patrick, I resolved using the nesting implantation as override
MUIDataTableHeadCell:{ root:{ “& .MUITableSortLabel-icon”: { color: “black” } } }