'filter icon in material-ui's v5 DataGrid

The default behavior for the new DataGrid is to hide a filter icon unless you hover over the column header (and have a filter applied). In the previous version the icon remained visible.

Codesandbox https://codesandbox.io/s/mui-datagrid-filter-icon-7rbrk

When a filter is applied it adds a new iconButtonContainer div. The classes are: MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer

Is there a way to override this behavior? All I'd like to do is set visibility to always be visible when that div is generated by the library.

cssreactjsmaterial-uiemotioncss-in-js


Solution 1:[1]

The answer here was to create a separate styled component of the data grid and use the global classnames imported from mui to reference the correct one for the style you wish to override. In my case it was something like:

 const MyStyledGrid = styled(DataGrid, () => ({
    [`& .${gridClasses.iconButtonContainer}`] : {
       visibility: "visible", 
       width: "auto"
     }
 }))

 function MyComponent() {
    return (
       <MyStyledDataGrid {...props} />
    )
 }

Solution 2:[2]

You can use renderHeader property on your column definition to adjust rendering behaviour of header cell

const columns: GridColDef[] = [
{
  field: 'date',
  width: 150,
  type: 'date',
  renderHeader: (params: GridColumnHeaderParams) => (
    <strong>
      {'Birthday '}
      <span role="img" aria-label="enjoy">
        ?
      </span>
    </strong>
  ),
  },
];

Here is the official docs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MattoMK
Solution 2 JSEvgeny

Related Questions