I'm submitting a ...
[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
Enabling scrollbarV will also enable server-side scrolling, that I don't want, I just want the scrollbar on table body.
Expected behavior
Enabling scrollbarV should enable the scroll bar only. Server-side scrolling should be enable by another component input.
Reproduction of the problem
There's no reason to reproduce, it's documented, but I think isn't right.
What is the motivation / use case for changing the behavior?
I want to make my table have exactly 100% of screen height, making footer glued at bottom, and having scroll only inside the table body, this way the paginator is always visible
Please tell us about your environment:
Not relevant
Table version: 9.3.0 (latest)
Angular version: 4.1.3 (latest)
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]
scrollBarV has nothing to do with server side scrolling. You won't have server side scrolling unless you specifically implement it by handling the datatable's scroll event.
What it does do is enable virtual scrolling which is a matter of deferred rendering (and has nothing to do with the server or loading.)
Virtual scrolling can be disabled by not providing your datatable with a value for rowHeight. Although I agree it probably should be separate.
This code below is executing all the time when using scrollV. Even when I set virtualization false. My version is Angular 5 [email protected]...
It force the table go back to the first page on server side pagination.
How can I bypass this logic?
DataTableBodyComponent.prototype.onBodyScroll = function (event) {
var scrollYPos = event.scrollYPos;
var scrollXPos = event.scrollXPos;
// if scroll change, trigger update
// this is mainly used for header cell positions
if (this.offsetY !== scrollYPos || this.offsetX !== scrollXPos) {
this.scroll.emit({
offsetY: scrollYPos,
offsetX: scrollXPos
});
}
this.offsetY = scrollYPos;
this.offsetX = scrollXPos;
this.updateIndexes();
this.updatePage(event.direction);
this.updateRows();
};
Dirty hack:
Attach empty table to the root component
<div [hidden]="true">
<ngx-datatable #dataTable
[rows]="[]"
[columns]="[]">
</ngx-datatable>
</div>
Then modify component prototype.
export class RootComponent implements OnInit{
@ViewChild('dataTable') dataTable: DatatableComponent;
ngOnInit(): void {
Object.getPrototypeOf(this.dataTable.bodyComponent).updatePage = () => {
console.log("Skip Update Page")
};
}
}
Most helpful comment
This code below is executing all the time when using scrollV. Even when I set virtualization false. My version is Angular 5 [email protected]...
It force the table go back to the first page on server side pagination.
How can I bypass this logic?
DataTableBodyComponent.prototype.onBodyScroll = function (event) {
var scrollYPos = event.scrollYPos;
var scrollXPos = event.scrollXPos;
// if scroll change, trigger update
// this is mainly used for header cell positions
if (this.offsetY !== scrollYPos || this.offsetX !== scrollXPos) {
this.scroll.emit({
offsetY: scrollYPos,
offsetX: scrollXPos
});
}
this.offsetY = scrollYPos;
this.offsetX = scrollXPos;
this.updateIndexes();
this.updatePage(event.direction);
this.updateRows();
};