I have a custom dropdown component in each header cell of ngx-datatable

Question

I have custom dropdown component in each header cell of ngx-datatable. But when I click at dropdown the it is going inside ngx-datatable body. How can I fix the issue please help me.

I am using angular 4.0 and typescript 2.4.

Screen shot:

Here is my code:

 <div>
      <ngx-datatable style="height:450px;"
        class='material'
        [rows]='activeTabData | filtermanual:propKey:propValue | orderBy : {property: column, direction: direction}'
        [columnMode]="'force'"
        [headerHeight]="height"
        [rowHeight]="getRowHeight"
        [scrollbarV]="true"
        [scrollbarH]="true"
        [loadingIndicator]="loadingIndicator"
        [rowClass]="getRowClass"
        (page)="onPage($event)">
      <div>
        <ngx-datatable-column 
          [width]="50"
          [frozenLeft]="true">
            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
              <input type="checkbox" 
              (ngModelChange)="checkButtonState($event, row)"
              [ngModel]="row.status"
              >
          </ng-template>
        </ngx-datatable-column>

        <ul>
          <li *ngFor="let col of tableKeys; let i=index; let last = last" >
        <ngx-datatable-column name={{col}} width="230" [resizeable]="true">
          <ng-template let-column="column" ngx-datatable-header-template >
              <div class="draggable" style="height:30px;width:160px;background:transparent;z-index:1000;position:relative;cursor:pointer;"></div>

                                    <ng2-multiselect 
                                      [options]="dropdowns[col]"
                                      [loading]="isLoading"
                                      [(ngModel)]="multiModels[col]"
                                      [texts]="{'defaultTitle':col}"
                                      (dropdownOpen)="dropdownOpen()"
                                      (dropdownClosed)="dropdownClosed(col)"
                                      >
                                    </ng2-multiselect>   
        </ng-template>

          <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
              <i [innerHTML]="row[col]"></i>
          </ng-template>
        </ngx-datatable-column>

          </li>
        </ul>
      </div>
      </ngx-datatable>
    </div>

Answer 1

You can share templates by adding a TemplateRef as a ViewChild.

Let me give you an example:

Let's say we have these columns and a template (outside the columns):

   <ngx-datatable-column prop="deadline" name="Deadline" [cellTemplate]="dateTemplate">
   <ngx-datatable-column prop="entryDate" name="Entry date" [cellTemplate]="dateTemplate">

   <ng-template #dateTemplate let-value="value">{{value | date:"shortDate"}}</ng-template>

as you can see I bind [cellTemplate] to a dateTemplate. This date template is defined in my component as a ViewChild with a template reference.

export class TableComponent implements OnInit {
  @ViewChild("dateTemplate") dateTemplate: TemplateRef<any>;

...

In your case you can do the same but use [cellHeaderTemplate] instead of [cellTemplate] !

Answer 2

You can try adding the following into your component styles:

ngx-datatable {
  overflow: visible;
  .datatable-header {
    overflow: visible;
    .datatable-header-cell {
      overflow-x: visible;
    }
  }
}

Answer 3

For ngbDropdown dropdown, I resolved the similer issue by adding the container="body" atrribute as below:

<div ngbDropdown class="d-inline-block" container="body">
....
.....
</div>

Answer 4

merely setting with ViewEncapsulation.None in component and

datatable-body-cell {
  overflow: visible !important;
}

in the .css or .scss did the job for me.

Answer 5

I found this solution (may help somebody): 1) use @ng-select/ng-select 2) add attribute: appendTo="body", example:

    <ng-select [items]="simpleItems"
               appendTo="body"
               [(ngModel)]="selectedSimpleItem">
    </ng-select>

No need any other z-index configurations.

Answer 6

Had similar issue showing drop-down (using ngbTypeahead) within ngx-datatable columns. Adding container="body" to the input element worked for me.

<input name="xyz" [ngbTypeahead]="searchElement" container="body"/>

Answer 7

I've got the same issue:
My custom dropdown became hidden by the <datatable-body>.
I got it working by:

.datatable-header-cell,
.datatable-header {
    overflow:visible !important;   
}
.datatable-row-center{
   z-index:11;
}

But then using the horizontal scrolling [scrollbarH], the content inside the <datatable-header> overflew horizontally, so I wrapped my <ngx-datatable> in a <div> and set overflow:hidden to it.

I hope someone might find this useful in the future. :)