0
268
VistasAl hacer clic en el componente dentro de renderHeader prop para MUI Data Grid Pro, cambia el modelo de clasificación
Estoy usando el componente Material UI DataGridPro para crear una aplicación React Js.
Quiero crear un filtrado personalizado.
El cuadro rojo en la imagen a continuación es un IconButton para la vista de filtrado y el cuadro azul es para la columna que muestra/oculta la vista.
Quiero cambiar el comportamiento de la vista de filtrado personalizado.
Si se hace clic en el icono de filtro, el encabezado de DataGridPro mostrará algunos componentes Select y TextField como campos de filtro como esta imagen a continuación.
Si hacemos clic en uno de los componentes Select y TextField , el componente Data Grid Pro activará la propiedad onSortModelChange para cambiar el valor de sortModel como esta imagen a continuación.
Así que ahora el componente Data Grid Pro está ordenado según la columna.
Estas son las condiciones que quiero: si hacemos clic en uno de los componentes Select y TextField dentro del encabezado de Data Grid Pro , Data Grid Pro no activará el accesorio onSortModelChange , lo que significa que el valor de sortModel no cambia
Aquí está el patio de recreo: https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-xmwf0?file=/src/App.js
Intenté agregar sortable: false para cada columna, pero no mostrará el icono de flecha dentro del encabezado Data Grid Pro y evitará que se ordene la columna. Eso no es lo que quiero.
También agregué accesorios sortModel y onSortModelChange para el componente Data Grid Pro para controlar el valor de sortModel , pero no funcionó.
Entonces, ¿cuál es la solución para este caso?
1 Respuestas
Responde la pregunta0
El equipo de MUI X me dijo desde el problema de Github aquí https://github.com/mui/mui-x/issues/3655#issuecomment-1015263995 que la solución es muy simple.
Simplemente agregue event.stopPropagation() para el complemento onClick de cada componente TextField y Select .
onClick={(event) => event.stopPropagation()}