CODEWITHSUNDEEP
reactjsmaterial-ui
Sean Liu
Sean Liu

Reputation: 1783

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

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!

Upvotes: 4

Views: 11997

Answers (5)

thambara Sahassaka
thambara Sahassaka

Reputation: 66

This is what I did, ( used styled-components library for styles )

const StyledDataGrid = styled(DataGrid)((theme) => ({
    "& .MuiDataGrid-sortIcon": {
        opacity: 'inherit !important',
      },
      
    "& .MuiDataGrid-iconButtonContainer": {
        visibility: 'visible',
    }
    }));

and then used it in the code accordingly

 < StyledDataGrid rows={rows} columns={columns} />

hope it helps.

Upvotes: 0

Embedded_Mugs
Embedded_Mugs

Reputation: 2416

You can use the sx prop in DataGrid like so:

  <DataGrid
    sx={{
      '.MuiDataGrid-iconButtonContainer': {
        visibility: 'visible',
      },
      '.MuiDataGrid-sortIcon': {
        opacity: 'inherit !important',
      },
    }}

In my case, I had to style both the iconButtonContainer and sortIcon make sure it's always visible.

Upvotes: 5

justdvl
justdvl

Reputation: 874

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.

Upvotes: 5

Maneesha Akula
Maneesha Akula

Reputation: 9

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

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

Upvotes: 0

Prashant Jangam
Prashant Jangam

Reputation: 2848

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

Upvotes: 1

Related Questions