Topic: Complete Datatable

pombo embras premium asked 3 years ago


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];
  }
}

Arkadiusz Idzikowski staff answered 3 years ago


It looks like you use dataSource in ngFor loop. The dataSource is not modified directly, that's why component display all the results without information about sorting/pagination/search.

You need to use modified data returned by mdbTable:

<tr *ngFor="let item of table.data; let i = index">

pombo embras premium commented 3 years ago

Hello Arkadiusz Idzikowski, thanks for the previous answer, solved the datatable case!

As for the case of formatting JSON-Strings values ​​for number, currency or date, can you tell me how to proceed?


Arkadiusz Idzikowski staff commented 3 years ago

@webmaster embras Our component does not have any tools for data formatting, but you can easily change how your data is presented in the table HTML file.

Here you can find pipes prepared by Angular: https://angular.io/guide/pipes



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: Mac Pro
  • Browser: Chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No
Tags