Ngx-datatable: Enable scrollbar without enabling server-side scrolling?

Created on 7 Jul 2017  路  3Comments  路  Source: swimlane/ngx-datatable

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]

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();
};

All 3 comments

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")
        };
    }
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dinvlad picture dinvlad  路  3Comments

devendraYebhi picture devendraYebhi  路  3Comments

WA-WilliamKrieg picture WA-WilliamKrieg  路  3Comments

Matthi0uw picture Matthi0uw  路  3Comments

alceucardoso picture alceucardoso  路  3Comments