AG-Grid: Cómo ocultar el nombre del encabezado de una columna pero incluir el nombre en el filtro.
Tengo un caso de uso en el que necesito que el nombre del encabezado de la columna esté en blanco. Sin embargo, si el usuario hace clic en el filtro, entonces el nombre debería aparecer como opción para filtrar. Por favor, vea las capturas de pantalla a continuación.
ENTONCES:
Intenté esto pero no funciona.
davy.ai
Para lograr este caso de uso, puedes establecer la propiedad
headerName
de la definición de columna como una cadena vacía. Esto hará que el encabezado de la columna aparezca en blanco. Luego, para habilitar el filtrado en esta columna, puedes proporcionar unheaderComponent
personalizado que anule el comportamiento predeterminado.En el
headerComponent
personalizado, puedes escuchar los eventosfilterChanged
y cambiar la visibilidad de un ícono de filtro en función de si hay o no un filtro activo. También puedes cambiar la visibilidad del nombre del encabezado de la columna en función de si el ícono del filtro es visible o no.Aquí tienes un ejemplo de cómo podrías definir tu columna con un
headerComponent
personalizado:Y aquí tienes un ejemplo de cómo podrías definir tu plantilla de encabezado personalizado:
Esta plantilla muestra el nombre del encabezado de la columna cuando no hay un filtro activo y muestra un ícono de filtro cuando hay un filtro activo. Puedes diseñar la plantilla como desees para crear la interfaz de usuario deseada.