Expected behavior I would like a complete example of the datatable with all the functionality and formatting of dates and values ​​(money) for Bootstrap 5 and Angular 12.

Actual behavior Hello MDB Support,

I recently purchased the MDB PRO license with Bootstrap 5 and Angular and am trying to implement a full version of the datatable as a component that I can use on my entire system.

But I'm having trouble getting the pagination, sorting, money formatting, date, and search to work properly.

The data is all loaded correctly, the columns assembled with their proper headers, but the datatable ignores the limit of items per page and brings it all in at once.

How should I go about adjusting this? Is there any component, service or policy missing to load?

Resources (screenshots, code snippets etc.) HTML

<div class="fluid">
  <div class="row">
    <div class="col">

      <header>
        <i class="fas fa-camera fa-xs"></i>
        <h4 *ngIf="titulo">{{titulo}}</h4>
        <h5 *ngIf="titulo">{{subtitulo}}</h5>
      </header>

      <section class="table-responsive datatable mt-4">
        <table class="table table-striped table-hover table-bordered table-sm datatable-table" mdbTable mdbTableSort
          #table="mdbTable" #sort="mdbTableSort" [dataSource]="dataSource" [pagination]="pagination" [sort]="sort">
          <!-- <caption>{{titulo}} - {{subtitulo}}</caption> -->
          <thead class="table-light datatable-header .shadow-5 pulse">
            <tr>
              <th scope="col">#</th>
              <th scope="col" *ngFor="let caption of captions" [mdbTableSortHeader]="caption">{{caption | titlecase}}
              </th>
            </tr>
          </thead>
          <tbody class="datatable-body">
            <tr *ngFor="let item of dataSource; let i = index">
              <th scope="row">{{i+1}}</th>
              <td *ngFor="let field of fields">{{item[field]}}</td>

            </tr>
          </tbody>
        </table>
        <footer class="bg-light text-center text-lg-start">
          <!-- Copyright -->
          <div class="text-center p-3" style="background-color: #456784;">
            © 2020 Copyright Embras.net
          </div>
          <!-- Copyright -->
        </footer>
        <mdb-table-pagination #pagination></mdb-table-pagination>
      </section>

    </div>
  </div>
</div>

TS

import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { ApiService } from '../../_services/api.service';

@Component({
  selector: 'app-grid-padrao',
  templateUrl: './grid-padrao.component.html',
  styleUrls: ['./grid-padrao.component.scss'],
  providers: [ApiService],
})
export class GridPadraoComponent implements OnInit {
  @Input() public titulo?: string;
  @Input() public subtitulo?: string;
  @Input() public url!: string;
  @Input() public columns!: object[];

  public dataSource!: object[];
  public fields: [] = [];
  public captions: [] = [];
  // public displayedColumns: [] = [];

  constructor(
    protected service: ApiService
  ) { }

  ngOnInit(): void {
    this.getData();
  }

  getData(): any {
    this.service.getAllRegistries(this.url).subscribe((res: any) => {
      // COLUMNS AND FIELDS
      const colCaptionNull =
        typeof this.columns === 'undefined' || this.columns === null
          ? true
          : false;

      if (colCaptionNull) {
        this.columns = [];
        Object.keys(res[0]).forEach((element: any) => {
          const column: any = {};
          column.dataField = element;
          column.dataCaption = element;
          this.columns.push(column);
        });
      }

      const colFields: any = [];
      const colCaptions: any = [];
      // const colFieldAndCaption: any = [];
      this.columns.forEach((element: any) => {
        // this.renameKey( element, 'dataField', 'field' );
        // this.renameKey( element, 'dataCaption', 'headerText' );

        colFields.push(element.dataField);
        colCaptions.push(element.dataCaption);
        // colFieldAndCaption.push({
        //   field: element.dataField,
        //   caption: element.dataCaption,
        // });
      });
      this.fields = colFields;
      this.captions = colCaptions;
      // this.displayedColumns = colFieldAndCaption;

      // DATASOURCE
      this.dataSource = res;
    });
  }

  renameKey(obj: any, oldKey: string, newKey: string) {
    obj[newKey] = obj[oldKey];
    delete obj[oldKey];
  }
}