[data grid] `DataGridFilterPanel` responsiveness

[Nitzperetz]

The problem in depth

Hey there, I am using DataGrid Filter Panel and would like to have some customizations if possible:

1. Change Grid settings for filter panel - so in low resolutions instead of

I would expect to have responsive view:

2. Delete icon - Change icon
3. Delete Button - move to the end of the line

Your environment

`npx @mui/envinfo`

 System:
    OS: macOS 14.3.1
  Binaries:
    Node: 20.6.1 - /opt/homebrew/bin/node
    npm: 9.9.2 
    pnpm: 8.6.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 122.0.6261.129
    Edge: 122.0.2365.80
    Safari: 17.3.1
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.17
    @mui/core-downloads-tracker:  5.14.11
    @mui/icons-material: 5.14.11 => 5.14.11
    @mui/lab: 5.0.0-alpha.146 => 5.0.0-alpha.146
    @mui/material: 5.14.11 => 5.14.11
    @mui/private-theming:  5.14.11
    @mui/styled-engine:  5.14.11
    @mui/system: 5.14.11 => 5.14.11
    @mui/types: 7.2.4 => 7.2.4
    @mui/utils:  5.15.7
    @mui/x-data-grid: 6.19.3 => 6.19.3
    @mui/x-data-grid-pro: 6.19.3 => 6.19.3
    @mui/x-license-pro: 6.10.2 => 6.10.2
    @mui/x-tree-view:  6.0.0-alpha.1
    @types/react: 18.2.18 => 18.2.18
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 4.9.5 => 4.9.5

Search keywords: DataGridFilterPanel, FilterPanel, filterFormProps Order ID: 68140

[michelengelen]

Hey @Nitzperetz, thanks for raising this issue. I agree that we could do a bit better. I did add this to our board for the team to discuss and estimate. Thanks again! 🙇🏼

[Nitzperetz]

Thank you! I appreciate the quick response!

[Nitzperetz]

@michelengelen is there anyway to get time estimations for the fixes? Thank you!

[Here2Huynh]

@michelengelen I don't know if this is appropriate but I would like to add on the request to make the filter panel in column menu to be responsive like the above example as well.

[michelengelen]

@michelengelen is there anyway to get time estimations for the fixes? Thank you!

Not yet ... we have been very busy with the v7 release. We will have a look and provide an estimate as soon as we can. Sry for the delay! 🙇🏼

[michelengelen]

@michelengelen I don't know if this is appropriate but I would like to add on the request to make the filter panel in column menu to be responsive like the above example as well.

We are planning to rework the slots API and with that we might be able to provide more sophisticated ways of customizing the panels in general (#12568).

[9uifranco]

@Nitzperetz @Here2Huynh this a workaround that you can do to make it look like this:

Basically use slotProps. With the sx property of the panel slot, you can conditionally apply styles based on a breakpoint:

const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

const responsiveFilterPanelStyle = {
    "& .MuiDataGrid-filterForm": {
        flexDirection: "column",
        gap: "1rem",
        alignItems: "flex-start",
    },
    "& .MuiDataGrid-filterForm:first-child .MuiDataGrid-filterFormLogicOperatorInput":
    {
        display: "none",
    },
    "& .MuiFormControl-root": {
        width: "100%",
    },
    "& .MuiDataGrid-filterForm .MuiDataGrid-filterFormDeleteIcon .MuiButtonBase-root":
    {
        alignSelf: "flex-start",
    },
    "& .MuiDataGrid-filterForm .MuiAutocomplete-inputRoot": {
        width: "280px",
    },
};

return (
    <div style={{ height: 400, width: "100%" }}>
        <DataGridPro
            {...data}
            slots={{ toolbar: GridToolbar }}
            slotProps={{
                panel: {
                    sx: isMobile ? responsiveFilterPanelStyle : {},
                },
            }}
        />
    </div>
);

Codesandbox: https://codesandbox.io/p/sandbox/cocky-ellis-qlc77j

[Nitzperetz]

@9uifranco thank you! much appreciated.