javascripthtmlangulartypescriptngx-datatable

Is there any way to move paginator from ngx-datatable to header instead of footer?

I set up my ngx-datatable with the paginator inside an angular project as below.

    <ngx-datatable class="material" [rows]="rows"...
      [count]="count" [limit]="5" [offset]="0" (page)="setPage($event)">

It works and the pagination is shown. But I want to show it in header too, is there anyway I can copy the one from footer and put it in header?

Solution

  • Looks like it does not have built-in option, but based on this GitHub conversation, you can do it with custom 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;
}

    I just tested it and it still works.