Ngx-datatable: Paging on top of the table

Created on 15 Nov 2017  路  5Comments  路  Source: swimlane/ngx-datatable

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

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

Current behavior
Paging is added only in footer.

Expected behavior
I could add paging both footer and above, or in just one of those positions.

Reproduction of the problem
Obvious.

What is the motivation / use case for changing the behavior?
Sometimes the table is long, and it goes out of the content. So to switch pages I have to scroll down, down.

Please tell us about your environment:
Windows

  • Table version: 0.8.x
    11.0.4

  • Angular version: 2.0.x
    4.4.4

  • 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 ]
    Up to date chrome

Most helpful comment

I would love this too, but until you get it, you can easily hack it in with some css.

  .ngx-datatable .datatable-footer {
    position: absolute;
    top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .ngx-datatable .datatable-header {
    position: absolute;
    top: 50px;
  }

  .ngx-datatable .datatable-body {
    margin-top: 100px;
  }

Tweak for browser support accordingly and your chosen heights of the footer and header.

All 5 comments

Any update to get the pagination in top, i'm also looking the same.

I'm also :) Thanks

I think that's an important issue

Seven votes.

I would love this too, but until you get it, you can easily hack it in with some css.

  .ngx-datatable .datatable-footer {
    position: absolute;
    top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .ngx-datatable .datatable-header {
    position: absolute;
    top: 50px;
  }

  .ngx-datatable .datatable-body {
    margin-top: 100px;
  }

Tweak for browser support accordingly and your chosen heights of the footer and header.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alceucardoso picture alceucardoso  路  3Comments

JanStock picture JanStock  路  3Comments

Csirme picture Csirme  路  3Comments

TakhirMamirov picture TakhirMamirov  路  3Comments

eddy-geek picture eddy-geek  路  3Comments