ngx-datatable内容由于设置rowHeight而无法正确垂直对齐

Question

我正在尝试使用ngx-datatable，但是内容似乎不在单元格内。我想这是因为我在ngx-datatable上设置了rowHeight属性。我希望它使单元格更短，但显然其中的内容不遵循单元格的大小。

它看起来像这样：

这是我的html模板：

<div class="search-result-content" *ngIf="beacons">
    <div class="results" *ngIf="responses.length > 0">
        <div class="table-container">
            <ngx-datatable class="material"
                           [rows]="responses"
                           [limit]="limit"
                           [rowHeight]="30"
                           [headerHeight]="50"
                           [footerHeight]="50"
                           [columnMode]="'flex'"
                            >

                <ngx-datatable-column name="Name"
                                      [prop]="'result.beacon.name'"
                                      [flexGrow]="3">
                    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                        <div *ngIf="row.result">
                            <span class="selectable">{{value}}</span>
                        </div>
                        <div *ngIf="!row.result">
                            <span class="selectable">{{row.id}}</span>
                        </div>
                    </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-column name="Organization"
                                      [prop]="'result.beacon.organization'"
                                      [flexGrow]="3">
                    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                        <div class="selectable">
                            <a target="_blank" *ngIf="row.orgUrl" [href]="row.orgUrl">
                                {{ row.result.beacon.organization }}
                                <i class="fa fa-external-link" aria-hidden="true"></i>
                            </a>
                            <span *ngIf="!row.orgUrl && row.result">
                                {{ row.result.beacon.organization }}
                            </span>
                        </div>
                    </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-column *ngIf="!minimal" name="Response"
                                      [prop]="'displayResult'"
                                      [flexGrow]="1">
                    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                        <div class="selectable">
                             <div *ngIf="row.result" [ngClass]="{'message-success': row.result.response, 'message-warning': !row.result.response}">
                                <span>{{ value | uppercase }}</span>
                             </div>
                            <div *ngIf="row.error" class="message-error">
                                <span>FAILED</span>
                            </div>
                        </div>
                    </ng-template>
                </ngx-datatable-column>
            </ngx-datatable>
        </div>
    </div>
</div>

我没有添加任何CSS，我只是想使其简单而有效。如果我未设置rowHeight，则内容会很好，但是如果我设置的行高度较小，则内容将继续下降。

有人知道如何解决这个问题吗？