在ngx datatable标头上使用li和ul进行下拉

Question

我正在尝试在ngx数据表标题中设置一个自定义下拉菜单，通过单击过滤器图标，该下拉菜单应会显示。但它削减了Header Cell本身。我将溢出包含在scss中以解决此问题，但现在它对所有数据表都有影响，并且在水平滚动时标题会扩展。

任何人都可以建议对此做些什么。

HTML：

    <ng-template #alarmColFilterTemp class="material ngx-datatable fixed-header datatable-header" let-column="column" let-sort="sortFn"
        ngx-datatable-header-template>
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label draggable" (click)="sort()">{{column.name}}</span>
        </span>
        <div display="flex" style="position:relative;display:inline;overflow:visible;">
          <i id="lvlId" class="fa fa-filter filterStyle" [ngClass]="{'active': isLvlActive}" data-toggle="dropdown"></i>
          <ul class="dropdown-menu pull-left" role="menu">
            <li id="alarmovfflw" *ngFor="let colAlarmLevel of colAlarmLevels;">
              <div>
                <input type="checkbox" [(ngModel)]="!colAlarmLevel.value" (change)='updateAlrmLvlTbl(colAlarmLevel.item,$event.target)' />{{colAlarmLevel.item}}
              </div>
              <!-- <div *ngIf="!isAlarmFilterSelected(colAlarmLevel.item)">
                <input type="checkbox" (change)='updateAlrmLvlTbl(colAlarmLevel.item,$event.target)' />{{colAlarmLevel.item}}
              </div> -->
            </li>
          </ul>
        </div>
      </ng-template>

SCSS :
.ngx-datatable datatable-header{
  overflow: visible !important;
}
.ngx-datatable {
  overflow: visible !important;
}

TS:
updateAlrmLvlTbl(alrmLvl, input: HTMLInputElement) {
        console.log('Select Event', alrmLvl, this.selected);
        this.selected.splice(0, this.selected.length);
        this.selected.push(alrmLvl);
        this.colType = 'Level';
        this.lvlTriggered = input.checked;
        this.filterText = alrmLvl;
        var fltrIndex;
        if (!this.lvlTriggered) {
            fltrIndex = this.colAlarmLevels.findIndex(x => x.item == this.filterText);
            if (fltrIndex > -1 && this.colAlarmLevels.length > 0) {
                this.colAlarmLevels.filter(x => {
                    if (x.item == this.filterText)
                        x.value = true;
                });
            }
        } else {
            fltrIndex = this.colAlarmLevels.findIndex(x => x.item == this.filterText);
            if (fltrIndex > -1 && this.colAlarmLevels.length > 0)
                this.colAlarmLevels.filter(x => {
                    if (x.item == this.filterText)
                        x.value = false;
                });

        }
        this.itemValSelected = true;
        this.colAlarmLevels.forEach(x => {
            if (x.value) this.itemValSelected = false;
        })
        this.toggle(this.itemValSelected);

    }