ADF custom pagination with dataTable component

[wity]

Hi, 

I need make pagination for dataTable component. I found this Custom pagination documentation, but I dont undestand how to implement it. Is there any implementation example? 

I have a ObjectDataTableAdapter  in which I pull JSON data from my Alfresco webscript to datatable component.

HTML file

<adf-toolbar title="Toolbar">
    <button mat-icon-button (click)="bulkAction()">
        <mat-icon>repeat</mat-icon>
    </button>
</adf-toolbar>
<adf-datatable
    [data]="data"
    [multiselect]="true"
    [actions]="true"
    (showRowActionsMenu)="onShowRowActionsMenu($event)"
    (executeRowAction)="onExecuteRowAction($event)">
    <adf-no-content-template>
        <ng-template>
            <h1>Kde nic, tu nic.</h1>
        </ng-template>
    </adf-no-content-template>
</adf-datatable>

<!-- <adf-pagination 
    [target]="data"
    [pagination]="5"
    [supportedPageSizes]="[5, 10, 15, 20]">
</adf-pagination> -->

TS file

import { Component, OnInit } from '@angular/core';
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
import { DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core';
import { AlfrescoApiService } from "@alfresco/adf-core";

@Component({

  selector: 'aca-my-first-view',
  templateUrl: './my-first-view.component.html',
  styleUrls: ['./my-first-view.component.scss']
})
export class MyFirstViewComponent implements OnInit {
  scriptPath: string = 'sample/folder/Company%20Home';
  ecmHost: string;
  data: ObjectDataTableAdapter;

  isLoading = false;
  constructor(
    private alfrescoApi: AlfrescoApiService
  ) {


    this.data = new ObjectDataTableAdapter(
      // data
      [],
      // columns
      []
    );

  }


  ngOnInit(): void {
    console.log("tady");
    //console.log(this.getJSONByFTS());
    this.getJSONByFTS().then(result => {
      var string = result as string;

      let jsonArray = string.slice(1, -1).split(", ");
      console.log("jsonArray: " + jsonArray);
      let finalData = Array<any>();
      jsonArray.forEach(element => {
        console.log("element: " + element)
        let json = JSON.parse(element);

        console.log("json: " + json)


        finalData.push(json);
      });

      console.log("finalData: " + finalData);
      //Data
      this.data = new ObjectDataTableAdapter(finalData,

        // columns
        [
          {
            type: 'text',
            key: 'nodeRef',
            title: 'Id',
            sortable: true
          },
          {
            type: 'text',
            key: 'name',
            title: 'Name',
            cssClass: 'full-width',
            sortable: true
          }
        ]);
    }).catch(error => {
      console.log(error);
    })

  }

  public getJSONByFTS(): Promise<any> {
    return this.alfrescoApi.getInstance().webScript.executeWebScript('GET', 'jsonByFTS');
  }

  bulkAction() {

    for (let row of this.data.getRows()) {

      if (row.isSelected == true) {
        console.log(row.getValue("nodeRef"));
      }

    }

  }

  onShowRowActionsMenu(event: DataCellEvent) {
    let myAction = {
      title: 'Zobraz nodeRef'
      // your custom metadata needed for onExecuteRowAction
    };
    event.value.actions = [
      myAction
    ];
  }

  onExecuteRowAction(event: DataRowActionEvent) {
    let args = event.value;
    let jeZaskrtle = args.row.isSelected;
    alert("jeZaskrtle: " + jeZaskrtle);
    console.log(args.row);
    console.log(args.action);
    window.alert(`NodeRef: ${args.row.getValue("nodeRef")}`);
    //získání NodeRefu z akce na řádku
    console.log(args.row.getValue("nodeRef"));
  }

  logDataExample(event) {
    console.log('Your webscript data is here' + event);
  }


}

Thanks