Error when using MdbTableEditorDirective Filter

Topic: Error when using MdbTableEditorDirective Filter

Jordan pro premium priority asked a year ago

Expected behavior Search/filter functionality would ignore properties with a null value.

Actual behavior It appears that the filter fails when the queried data array has an object with a null property

Resources (screenshots, code snippets etc.)

Bartosz Termena staff commented a year ago


Could you tell me, which version of MDB are you using?

Best, Bartosz.

Jordan pro premium priority commented a year ago

MDB Version: 8.6.0

Bartosz Termena staff commented a year ago

Dear @Jordan

I can not reproduce your problem, could you provide your code or some demo app with existing error to my email: ?

Best Regards, Bartosz.

Jordan pro premium priority answered a year ago

What do you mean you can't reproduce the problem? Just assign an array of objects that has at least one null property to the directives dataArray.

It breaks on:

filterIterableArray(searchKey) { if (this.dataArray) { /** @type {?} / const filter = this.dataArray.filter((/* * @param {?} obj * @return {?} / (obj) => { return Object.keys(obj).some((/* * @param {?} key * @return {?} / (key) => { return obj[key] .toString()* .toLowerCase() .includes(searchKey); })); })); this.iterableDataArray = filter.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); this.nextShouldBeDisabled = this.iterableDataArray.length < this.itemsPerPage; this.updatePaginationInfo(); return this.iterableDataArray; } } /** * @param {?} searchKey * @return {?} */ performSearch(searchKey) { this._searchKey = searchKey; if (!searchKey && this.dataArray) { this.nextShouldBeDisabled = false; = this.dataArray.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); this._iterableDataArray$.next(; return this.dataArray.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); } else { = this.filterIterableArray(searchKey.toLowerCase()); return this.filterIterableArray(searchKey.toLowerCase()); } }

import { Component, ViewChild, OnInit, } from '@angular/core';
import { MdbTableEditorDirective } from 'mdb-table-editor';

    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
export class AppComponent implements OnInit {
  public title = 'ng-uikit-pro-standard';

  @ViewChild('table', { static: true })
  public mdbTableEditor: MdbTableEditorDirective;
  public headElements = ['Id', 'Data Source Name', 'Description'];
  public searchText: string = '';
  public highlightedRow: DataSource = null;
  public sources = new Array<DataSource>();
  public source = new DataSource();
  public visibleItems: number = 10;
  public visibleItemsSelect = [
    { value: '10', label: '10', selected: true },
    { value: '25', label: '25' },
    { value: '50', label: '50' },
    { value: '100', label: '100' }

  public ngOnInit(): void { = 1;
    this.source.dataGroupId = 1;
    this.source.dataSourceName = 'Data Source One';
    this.source.dataSourceDescription = 'Data Source One Description';
    this.source.dataGroup = null;


    this.mdbTableEditor.dataArray = this.sources;

class DataSource {
  public id!: number;
  public dataGroupId!: number;
  public dataSourceName!: string;
  public dataSourceDescription!: string;
  public dataGroup?: DataGroup | undefined;

class DataGroup {
  public id!: number;
  public dataGroupName!: string;
  public dataGroupDescription!: string;

 <div class="container-fluid">

   <div class="row mb-5">
     <div class="col-xl-12 mx-auto">

       <div class="row w-100 d-flex mb-3 ml-0">

         <form class="form-inline md-form md-bg form-sm active-searchBar-2 ml-auto p-2"
               style="margin-bottom: auto; margin-top: auto;">
           <input [(ngModel)]="searchText"
                  [ngModelOptions]="{standalone: true}"
                  class="form-control form-control-sm mr-1"
                  placeholder="Search on any column..."
                  style="min-width: 300px"
           <i aria-hidden="true"
              class="fas fa-search float-md-left">

       <div class="z-depth-1">
         <div class="table-responsive">
           <table #table="mdbEditor"
                  (rowHighlight)="highlightedRow = $event"
                  class="table table-hover table-hr-data-row"
                 <th *ngFor="let head of headElements; let i = index"
               <tr *ngFor="let item of table.performSearch(this.searchText); let i = index">
                 <td class="align-middle"
                   <div class="d-flex mb-3">

                     <mdb-select (ngModelChange)="visibleItems = +$event"
                                 class="mr-auto p-2 align-middle"
                                 placeholder="# to Display"
                                 style="max-width: 130px">

                     <span class="p-2 align-middle m-2"
                           style="margin-bottom: 0px">
                       Showing {{table.paginationInfo.firstItem}} to {{table.paginationInfo.lastItem}} of {{table.paginationInfo.allItems}} Data Sources

                     <mdb-icon (click)="table.prevPage()"
                               [ngClass]="{'disabled text-muted': table.disablePrevious()}"
                               class="p-2 align-middle"
                     <mdb-icon (click)="table.nextPage()"
                               [ngClass]="{'disabled text-muted': table.disableNext()}"
                               class="p-2 align-middle"


Bartosz Termena staff commented a year ago

Dear @Jordan

Yes, you are right, the problem occurs. We will take a closer look at that and try to solve this as soon as possible.

Best Regards, Bartosz.

Jordan pro premium priority commented a year ago

I updated to the following for the time being:

(key) => { if(obj[key]) { return obj[key] .toString() .toLowerCase() .includes(searchKey); } else{ return false; } }

Please insert min. 20 characters.