need auto row height, vertical scroll, virtualization not required

[markanthonyg]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Scenario 1: auto row heights, text wrapping within cells, but absolutely no scrolling vertically Scenario 2: fixed row heights, scrolling vertically (with or without virtualization) Expected behavior

d I just need to have auto row heights with text wrapping, and able to scroll to the rows beyond whats visible in the screen. What am I missing here XD. I don't need scroll virtualization as I'm going to reduce the rows per page server side to a smaller amount... **Reproduction of the problem**

set row height to auto. set scrollBarV to true. set virtualization to false. poof error saying cannot use auto row height with scrollBarV true.

What is the motivation / use case for changing the behavior?

some datatables have lots of columns, and some of those columns have very long values that need text wrapping to see all of the data instead of cutting it off. and these tables have more rows than fits on the visible screen, so we need to scroll down. Please tell us about your environment:

Windows 8, 10, atom, npm, iis, angular 5 ui, c# webapi

• Table version: 0.8.x

  Yes, check

• Angular version: 2.0.x

  5.x.x check

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

  ALL

• Language: [all | TypeScript X.X | ES6/7 | ES5] all

[ArfanMirza]

any luck ?

[markanthonyg]

Yes. I was assuming this datatable would have an attribute to turn on vertical scrolling without anything to do with virtual scrolling but it doesn’t. In css I overrode datatable body and set overflow-y scroll. I did not add the attribute for scrollBarV and set row height to auto. I reduced the num rows to 100 to reduce the lag, mainly for ie users.

[bleuscyther]

@markanthonyg nice! i used overflow-y:visible for the rowDetail and its now working

[collindutter]

@bleuscyther could you elaborate a little more on what you did to fix this? I'm facing the same issue. Thanks!

[bleuscyther]

@collindutter in the .scss file of the component displaying the table :

.ngx-datatable{
  overflow-y: visible;
}

It does not work with any configuration here is what i have i don' t remember exactly when it stopped working, but i think if you use some configurations the table content will not show:

 <ngx-datatable
            #trTable
            class="expandable"
            [rows]="rows"
            [scrollbarH]="true"
            [columns]="columns_default"
            [columnMode]="'force'"
            [headerHeight]="50"
            [footerHeight]="50"
            [rowHeight]="'auto'"
            [limit]="10">

                 <ngx-datatable-footer>
                     ...
                </ngx-datatable-footer>

                 <!-- Row Detail Template -->
                <ngx-datatable-row-detail [rowHeight]="'auto'" #myDetailRow (toggle)="onDetailToggle($event)">
                     <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
                        ...
                    </ng-template>
                </ngx-datatable-row-detail>
</ngx-datatable>

I hopr this helps

[mail2venkat]

Seems some of the styles are missing, Try This

HTML

<ngx-datatable class="material" [columnMode]="'flex'" [headerHeight]="50" [footerHeight]="50" [scrollbarV]="true" [rows]="rows"> <ngx-datatable-column name="Name" [flexGrow]="1">

{{value}}

        </ngx-datatable-column>
        <ngx-datatable-column name="Gender" [flexGrow]="1">
          <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
            {{value}}
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="company" [flexGrow]="1">
          <ng-template let-value="value" ngx-datatable-cell-template>
            {{value}}
          </ng-template>
        </ngx-datatable-column>
        </ngx-datatable>

CSS

.ngx-datatable.scroll-vertical .datatable-body { overflow-y: auto; } .ngx-datatable.scroll-vertical { height: 70vh; }

[nguyendt214]

.datatable-row-center {
    display: table-cell;
 }

[joannepham2018]

I tried this

<ngx-datatable class="material" [columnMode]="'flex'" [headerHeight]="50" [footerHeight]="50" [scrollbarV]="true" [rows]="rows">

and ngx-datatable.scroll-vertical .datatable-body { overflow-y: auto; } .ngx-datatable.scroll-vertical { height: 70vh; }

But didn't see vertical scrolling bar. Any other suggestion

[webcat12345]

Maybe it's not in the scope of this issue, but I would like to ask, if it is possible to support rowHeight: auto and virtualScroll: true ?

I think it's not resolved yet on the angular forum, - https://github.com/angular/components/issues/10113 still an experimental feature

[GersonArlindo]

En el archivo .scss del componente que muestra la tabla:

.ngx-datatable{
  overflow-y: visible;
}

No funciona con ninguna configuración, aquí es lo que tengo, no recuerdo exactamente cuándo dejó de funcionar, pero creo que si usa algunas configuraciones, el contenido de la tabla no se mostrará:

 <ngx-datatable
            #trTable
            class="expandable"
            [rows]="rows"
            [scrollbarH]="true"
            [columns]="columns_default"
            [columnMode]="'force'"
            [headerHeight]="50"
            [footerHeight]="50"
            [rowHeight]="'auto'"
            [limit]="10">

                 <ngx-datatable-footer>
                     ...
                </ngx-datatable-footer>

                 <!-- Row Detail Template -->
                <ngx-datatable-row-detail [rowHeight]="'auto'" #myDetailRow (toggle)="onDetailToggle($event)">
                     <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
                        ...
                    </ng-template>
                </ngx-datatable-row-detail>
</ngx-datatable>

Espero que esto ayude this worked for me

Ngx-Datatable

.table-responsive { overflow-x: auto; / Permitir desplazamiento horizontal / }

.datatable-container { width: 100%; min-width: 1200px; / Ancho mínimo para activar el desplazamiento horizontal / overflow-x: auto; / Permitir desplazamiento horizontal / }

ngx-datatable { width: 100%; }

.ngx-datatable{ overflow-y: visible; }