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.data = this.dataArray.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); this._iterableDataArray$.next(this.data); return this.dataArray.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); } else { this.data = this.filterIterableArray(searchKey.toLowerCase()); return this.filterIterableArray(searchKey.toLowerCase()); } }

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

@Component
(
  {
    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 {
    this.source.id = 1;
    this.source.dataGroupId = 1;
    this.source.dataSourceName = 'Data Source One';
    this.source.dataSourceDescription = 'Data Source One Description';
    this.source.dataGroup = null;

    this.sources.push(this.source);

    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}"
                  aria-label="Search"
                  class="form-control form-control-sm mr-1"
                  mdbInput
                  placeholder="Search on any column..."
                  style="min-width: 300px"
                  type="text">
           <i aria-hidden="true"
              class="fas fa-search float-md-left">
           </i>
         </form>

       </div>
       <div class="z-depth-1">
         <div class="table-responsive">
           <table #table="mdbEditor"
                  (rowHighlight)="highlightedRow = $event"
                  [itemsPerPage]="visibleItems"
                  class="table table-hover table-hr-data-row"
                  mdbTableEditor>
             <thead>
               <tr>
                 <th *ngFor="let head of headElements; let i = index"
                     scope="col"> 
                   {{head}}
                 </th>
               </tr>
             </thead>
             <tbody>
               <tr *ngFor="let item of table.performSearch(this.searchText); let i = index">
                 <td>{{item.id}}</td>
                <td>{{item.dataSourceName}}</td>
                 <td>{{item.dataSourceDescription}}</td>
  </tr>
             </tbody>
             <tfoot>
               <tr>
                 <td class="align-middle"
                     colspan="7">
                   <div class="d-flex mb-3">

                     <mdb-select (ngModelChange)="visibleItems = +$event"
                                 [(ngModel)]="visibleItems"
                                 [options]="visibleItemsSelect"
                                 [outline]="true"
                                 [appendToBody]="true"
                                 class="mr-auto p-2 align-middle"
                                 placeholder="# to Display"
                                 style="max-width: 130px">
                     </mdb-select>

                     <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
                     </span>


                     <mdb-icon (click)="table.prevPage()"
                               [ngClass]="{'disabled text-muted': table.disablePrevious()}"
                               class="p-2 align-middle"
                               fas
                               icon="angle-left"
                               mdbWavesEffect
                               size="lg">
                     </mdb-icon>
                     <mdb-icon (click)="table.nextPage()"
                               [ngClass]="{'disabled text-muted': table.disableNext()}"
                               class="p-2 align-middle"
                               fas
                               icon="angle-right"
                               mdbWavesEffect
                               size="lg">
                     </mdb-icon>
                   </div>
                 </td>
               </tr>
             </tfoot>
           </table>
         </div>
       </div>
     </div>
   </div>

  </div>