Moving pager below component (rather than above it)

I create a list component with it’s own pager, and it works as expected. However the pager element appears above the list – is there any way I can make it appear below the component?

import { Component, ElementRef, Input, OnDestroy, OnInit} from '@angular/core';

  selector: 'test',
  template: ""
export class TestComponent implements OnDestroy, OnInit {
  private ui: webix.ui.list;
  container: ElementRef;

  constructor(root: ElementRef) {
    this.container = root.nativeElement;

  ngOnInit() {

  ngOnDestroy() {

  loadData() {
    this.ui = <webix.ui.list>webix.ui({
      container: this.container,
      view: "list",
      height: 700,
      width: 300,
      pager: {
        container: this.container,
        size: 10,
        group: 5,
        height: 50,
        width: 300
      url: 'my-api/url',

Hey @username12345
In your case you need to use Pager as separate view. Add property “pager” to view “list”. Below this view you should write down the view “pager” with your custom logic and properties. You can find a description of this topic in the documentation.

Check out the snippet with solution.

1 Like