ngx datatable垂直滚动,并将rowheight设置为auto [英] ngx datatable vertical scroll with rowheight set to auto
问题描述
我在Angular应用程序中使用ngx-datatable.我想知道是否可以同时使用垂直滚动和自动行高.这意味着如果文本插入到表格的单元格中而变大,则行的长度将被扩展.如果设置属性[rowHeight] ='auto'",则此方法非常理想.但是,当使用[scrollbarV] ="true"时,由于使用了虚拟滚动机制,因此行高必须为数字.有人对此有解决方法吗?
I am using ngx-datatable inside my Angular application. I was wondering if it is possible to use vertical scrolling together with automatic row height. This means that if the text insde a cell of the tabel, becomes to big, the length of the row will be expanded. This works perfect if setting the attribute [rowHeight]="'auto'". However, when using [scrollbarV]="true" the rowheight has to be a number because of the virtual scroll mechanisme used. Does anyone have a workaround to this?
<ngx-datatable
style="height: 700px;"
class="material"
[columnMode]="'flex'"
[headerHeight]="50"
[footerHeight]="40"
[rowHeight]="'auto'"
[scrollbarH]="true"
[scrollbarV]="true"
[rows]="data">
<ngx-datatable-column name="test" [flexGrow]="1" [minWidth]="120" [maxWidth]= "120">
<ng-template let-row="row" ngx-datatable-cell-template>
{{row}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="test" [flexGrow]="1" [minWidth]="80">
<ng-template let-row="row" ngx-datatable-cell-template>
{{row}}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
github上有一个未解决的问题,但是建议的解决方案没有用. https://github.com/swimlane/ngx-datatable/issues/1292
There is an open issue on github, but the proposed solutions do no work. https://github.com/swimlane/ngx-datatable/issues/1292
推荐答案
上面的答案使滚动时列标题滚动出视图.而是将滚动应用于表主体:
The answers above make the column headers scroll out of view when you scroll. Apply the scrolling to the table-body instead:
<ngx-datatable
class="bootstrap material"
columnMode="force"
headerHeight="50"
rowHeight="auto"
>
::ng-deep .ngx-datatable .datatable-body {
max-height: 300px !important;
overflow: hidden auto;
}
这篇关于ngx datatable垂直滚动,并将rowheight设置为auto的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!