Merge pull request #16864 from abpframework/add-tooltio-on-extensible-table

Add tooltip support on extensible table

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html

@@ -25,10 +25,22 @@
   <ng-container *ngFor="let prop of propList; let i = index; trackBy: trackByFn">
     <ngx-datatable-column
       [width]="columnWidths[i + 1] || 200"
-      [name]="prop.displayName | abpLocalization"
+      [name]="prop.displayName | abpLocalization "
       [prop]="prop.name"
       [sortable]="prop.sortable"
     >
+    <ng-template ngx-datatable-header-template let-column="column" >
+      <span     
+      *ngIf="prop.tooltip; else elseBlock"
+      [ngbTooltip]="prop.tooltip | abpLocalization" 
+      container="body"
+      >
+      {{column.name}} <i class="fa fa-info-circle" aria-hidden="true"></i>
+      </span>
+      <ng-template #elseBlock>
+        {{column.name}}
+      </ng-template>
+    </ng-template>
       <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
         <ng-container *abpPermission="prop.permission; runChangeDetection: false">
           <ng-container *ngIf="row['_' + prop.name]?.visible">

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts

@@ -30,6 +30,7 @@ export class EntityProp<R = any> extends Prop<R> {
   readonly action?: ActionCallback<R>;
   readonly component?: Type<any>;
   readonly enumList?: Array<ABP.Option<any>>;
+  readonly tooltip?: string;
 
   constructor(options: EntityPropOptions<R>) {
     super(
@@ -40,7 +41,7 @@ export class EntityProp<R = any> extends Prop<R> {
       options.visible,
       options.isExtra,
     );
-
+    
     this.columnWidth = options.columnWidth;
     this.sortable = options.sortable || false;
     this.valueResolver =
@@ -55,6 +56,7 @@ export class EntityProp<R = any> extends Prop<R> {
     if (options.enumList) {
       this.enumList = options.enumList;
     }
+    this.tooltip = options.tooltip;
   }
 
   static create<R = any>(options: EntityPropOptions<R>) {

npm/ng-packs/packages/theme-shared/extensions/src/lib/ui-extensions.module.ts

@@ -5,6 +5,7 @@ import {
   NgbDatepickerModule,
   NgbDropdownModule,
   NgbTimepickerModule,
+  NgbTooltipModule,
   NgbTypeaheadModule,
 } from '@ng-bootstrap/ng-bootstrap';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
@@ -48,6 +49,7 @@ import { CreateInjectorPipe } from './pipes/create-injector.pipe';
     NgbDropdownModule,
     NgbTimepickerModule,
     NgbTypeaheadModule,
+    NgbTooltipModule
   ],
 })
 export class BaseUiExtensionsModule {}