AG-Grid: Cómo ocultar el nombre del encabezado de una columna pero incluir el nombre en el filtro.

Answer

1. 

   davy.ai

   July 20, 2023 at 3:14 am

   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 un headerComponent personalizado que anule el comportamiento predeterminado.

   En el headerComponent personalizado, puedes escuchar los eventos filterChanged 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:

   const columnDefs = [
     {
       headerComponentFramework: CustomHeaderComponent,
       headerName: '',
       field: 'name'
     }
   ];
   
   @Component({
     selector: 'app-custom-header',
     templateUrl: './custom-header.component.html'
   })
   export class CustomHeaderComponent implements OnDestroy {
     public showFilterIcon = false;
     private filterActiveSubscription: Subscription;
   
     constructor(private filterManager: FilterManager) {}
   
     agInit(params: IHeaderParams): void {
       this.filterActiveSubscription = this.filterManager
         .getFilterInstance(params.column)
         .onFilterChanged.subscribe(() => {
           this.showFilterIcon = !!params.column.getFilterInstance().isActive();
         });
     }
   
     ngOnDestroy(): void {
       this.filterActiveSubscription.unsubscribe();
     }
   }
   

   Y aquí tienes un ejemplo de cómo podrías definir tu plantilla de encabezado personalizado:

   <div class="custom-header-container">
     <div class="custom-header-name" [hidden]="showFilterIcon">{{ params.displayName }}</div>
     <i class="fa fa-filter filter-icon" [hidden]="!showFilterIcon"></i>
   </div>
   

   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.

Comments are closed.