How to set material ui datagrid column sort icon as always be visible?

user_8850211 0
Viewed 1727

Here is codesandbox. I am trying to have the ability to sort by the first name and last name The default Datagrid only shows the sort icon when hovering. Is there a way I can set it to be always visible? Thanks for the help!

material-ui reactjs
3 Answers

you can use .MuiDataGrid-iconButtonContainer. however Material-UI doesn't provided default icon for unsorted list. I have forked your demo and updated it. added icon for unsorted list too. please check codesandbox

user_176200660

This is what I did:

const StyledDataGrid = styled(DataGrid)(() => ({
  '& .MuiDataGrid-iconButtonContainer': {
    marginLeft: '2px',
    visibility: 'visible !important',
    width: 'auto !important',
  },
}))

I created a styled component which adds some custom styling to DataGrid. Specifically to always show the icon and take up width for it. Using !important is not recommended, but doesn't harm in this case.

I must add, this only works with using custom sort icons, like so:

<StyledDataGrid
  components={{
    ColumnSortedAscendingIcon,
    ColumnSortedDescendingIcon,
    ColumnUnsortedIcon,
  }}
/>

If you don't want to use custom icons, I'm sure it's doable, you just need to play with CSS bit more.

user_82307840

Add the below code in .scss file. (.MuiDataGrid-sortIcon is pre-defined class of Mui Datagrid). Hope it helps!

.MuiDataGrid-sortIcon {
 opacity: inherit !important;
}
user_196424000
Related