Ngx-datatable: ScrollbarV showing one row only

Created on 13 Nov 2018 · 7Comments · Source: swimlane/ngx-datatable

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

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

Current behavior

If [scrollbarV] = "true", table is scrolling but showing only one row at a time.

Expected behavior

it should show the number of rows set in [limit]="6"

Reproduction of the problem

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

Please tell us about your environment:

ubuntu 16.04
sublime text

Table version:

14.0.0
Angular version:

angular 6
npm 8
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 ]
Language: [all | TypeScript X.X | ES6/7 | ES5]

Source

prativm

Most helpful comment

This is all about style height, try to set to a value in your ngx-datatable defined class or simply:
....

It's easy to become a billionaire. All you need to do is simply:
...

evxn on 31 Jan 2019

😄8 👍5

All 7 comments

This not a bug you have to set the table height by using a css class
.server-scrolling-demo { height: calc(100vh - 110px); }

ramzitannous on 14 Nov 2018

👎1 👍1

[scrollbarV] = "true" table is scrolling  is not work

plz any one help me....

import { Component,ViewChild } from '@angular/core';
import { DemoServiceService } from './demo-service.service';
import { NgxDatatableModule, DatatableComponent } from '@swimlane/ngx-datatable';

@Component({
selector: 'app-root',
template: `

  <input
  type='text'
  style='padding:8px;margin:15px auto;width:30%;'
  placeholder='Type to filter the name column...'
  (keyup)='updateFilter($event)'
/>
<select (change)="SHowUpTO($event)">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="50">50</option>
</select>

<div>

  <ngx-datatable



    class='material expandable'
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"

    [rowHeight]="'auto'"
    [scrollbarV] = "true"
    [limit]="5"
    [rows]='rows'>        
  </ngx-datatable>
  </div>
</div>
<div>

<p>tripathy---{{birthday| date}}</p>

</div>
<div>


  </div>

`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
// @ViewChild(DatatableComponent) table: DatatableComponent;
rows = [];
loadingIndicator: boolean = true;
reorderable: boolean = true;
showupto:number=10;
columns = [
{ prop: 'name' },
{ name: 'Gender' },
{ name: 'Company', sortable: false }
];
birthday = 1541767375000; // April 15, 1988
constructor(private demoService:DemoServiceService) {
// this.fetch((data) => {
// this.rows = data;
// setTimeout(() => { this.loadingIndicator = false; }, 1500);
// });
}

ngOnInit() {
this.setPage();
}

/**

Populate the table with new data based on the page number
@param page The page to select
*/
setPage(){
// this.page.pageNumber = pageInfo.offset;
this.demoService.getResults( ).subscribe(pagedData => {
console.log(pagedData.length);
for(let i =0;i

    console.log(i);
  console.log("tripathy",pagedData[i].company);
  }
this.rows=pagedData;
this.temp = [...pagedData];
  console.log("tripathy",pagedData)
});

}

temp = [];
updateFilter(event) {
const val = event.target.value.toLowerCase();

// filter our data
const temp = this.temp.filter(function(d) {
  return d.name.toLowerCase().indexOf(val) !== -1 || d.company.toLowerCase().indexOf(val) !== -1 ||d.gender.toLowerCase().indexOf(val) !== -1 ||!val;
});

// update the rows
this.rows = temp;
// Whenever the filter changes, always go back to the first page
// this.table.offset = 0;

}

SHowUpTO(event){
this.showupto=parseInt(event.target.value);
console.log(event.target.value);
}

}