Angular Bootstrap Table Editor

Angular Table Editor - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

To start working with Table Editor see "Getting Started" tab on this page.

You can use 3 different types of editor:

How editors works

To get the most out of your Table Editor, it is best to use MDB Angular, although this is not required. Only modals are required.

Editor with modal

This version of the Editor allows you to add, edit and remove rows by using a modal.

Select a row and click the "Edit" button if you want to make changes in the given row. "Delete" button works the same way.

How modal editor works

See documenation about modals.

Modal editor is working corectly when table element has an mdbTableEditor directive on it.

It is also required, to set the [itemsPerPage] input, and the export identificator #your-template-id="mdbEditor".

The last thing that is required for the table to work properly is to use the emitted event (rowHighlight) to assign a highlighted table row (this is used when editing or deleting rows).

Add
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400
Suki Burks Developer London 53 2009/10/22 $114,500
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500
Timothy Mooney Office Manager London 37 2008/12/11 $136,200
Jackson Bradshaw Director New York 65 2008/09/26 $645,750
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575
Thor Walton Developer New York 61 2013/08/11 $98,540
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Hermione Butler Regional Director London 47 2011/03/21 $356,250
Lael Greer Systems Administrator London 21 2009/02/27 $103,500
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000
Donna Snider Customer Support New York 27 2011/01/25 $112,000
Name Position Office Age Start date Salary 
<div class="row d-flex justify-content-center modalWrapper mt-5">
  <div mdbModal #modalAdd="mdbModal" class="modal fade addNewInputs" id="modalAdd" tabindex="-1" role="dialog"
       aria-labelledby="modalAdd"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>
          <button type="button" class="close text-primary" (click)="modalAdd.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <form #addForm>
            <div class="md-form mb-5">
              <input type="text" id="inputName" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputName">Name</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputPosition" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputPosition">Position</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputOfficeInput" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputOfficeInput">Office</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputAge" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputAge">Age</label>
            </div>
            <div class="md-form mb-5">
              <input type="date" id="inputDate" class="form-control" placeholder="Select Date" mdbInput>
              <label data-error="wrong" data-success="right" for="inputDate"></label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputSalary" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputSalary">Salary</label>
            </div>
          </form>
        </div>
        <div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">
          <button mdbBtn color="primary" outline="true" block="true" class="buttonAdd" data-dismiss="modal"
                  (click)="addModalForm(addForm, modalAdd)">Add form
            <i class="fas fa-paper-plane-o ml-1"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center">
    <a mdbBtn color="info" rounded="true" size="sm" (click)="modalAdd.show()" data-target="#modalAdd" mdbWavesEffect>
      Add <i class="fas fa-plus-square ml-1"></i></a>
  </div>
  <div mdbModal #modalEdit="mdbModal" class="modal fade modalEditClass" id="modalEdit" tabindex="-1" role="dialog"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold text-secondary ml-5">Edit form</h4>
          <button type="button" class="close text-secondary" (click)="modalEdit.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <form #editForm>
            <div class="md-form mb-5">
              <input type="text" id="formNameEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.name : ''">
              <label data-error="wrong" data-success="right" for="formNameEdit">Name</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formPositionEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.position : ''">
              <label data-error="wrong" data-success="right" for="formPositionEdit">Position</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formOfficeEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.office : ''">
              <label data-error="wrong" data-success="right" for="formOfficeEdit">Office</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formAgeEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.age : ''">
              <label data-error="wrong" data-success="right" for="formAgeEdit">Age</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formDateEdit" class="form-control datepicker" mdbInput
                     [value]="highlightedRow ? highlightedRow.start_date : ''">
              <label data-error="wrong" data-success="right" for="formDateEdit">Date</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formSalaryEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.salary : ''">
              <label data-error="wrong" data-success="right" for="formSalaryEdit">Salary</label>
            </div>
          </form>
        </div>
        <div class="modal-footer d-flex justify-content-center editInsideWrapper">
          <button mdbBtn color="secondary" outline="true" block="true" class="editInside" data-dismiss="modal"
                  (click)="editModalForm(editForm, modalEdit)">
            Edit form <i class="fas fa-paper-plane-o ml-1"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center buttonEditWrapper">
    <button mdbBtn color="info" rounded="true" size="sm" class="buttonEdit" [disabled]="!highlightedRow"
            (click)="modalEdit.show()" data-target="#modalEdit">
      Edit<i class="fas fa-pencil-square-o ml-1"></i></button>
  </div>
  <div mdbModal #modalDelete="mdbModal" class="modal fade" id="modalDelete" tabindex="-1" role="dialog"
       aria-labelledby="modalDelete"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>
          <button type="button" class="close text-danger" (click)="modalDelete.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <p class="text-center h4">Are you sure to delete selected row?</p>
        </div>
        <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">
          <button mdbBtn color="danger" type="button" class="btnYesClass" id="btnYes" data-dismiss="modal" mdbWavesEffect
                  (click)="modalRemove(modalDelete)">
            Yes
          </button>
          <button mdbBtn color="primary" type="button" class="btnNoClass" id="btnNo" data-dismiss="modal" mdbWavesEffect
                  (click)="modalDelete.hide()">
            No
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center">
    <button mdbBtn color="danger" size="sm" rounded="true" class="buttonDelete" [disabled]="!highlightedRow" (click)="modalDelete.show()"
            data-target="#modalDelete">Delete<i class="fas fa-times ml-1"></i></button>
  </div>
</div>
<div class="row">
  <div class="col-md-8 mx-auto my-5">
    <div class="row w-100 d-flex justify-content-between mx-auto">
      <div class="col-md-3 my-3 d-flex align-items-center">
        <span class="font-weight-bolder">Show</span>
        <select class="browser-default custom-select mx-2" [(ngModel)]="visibleItems"
                (ngModelChange)="visibleItems = +$event" style="width: unset;">
          <option value="10" selected>10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
        <span class="font-weight-bolder">Entries</span>
      </div>
      <div class="col-md-6 my-3 text-right d-flex justify-content-between align-items-center">
        <label class="font-weight-bolder mb-0">Search: </label>
        <input type="search" class="form-control form-control-sm ml-2"[(ngModel)]="searchText">
      </div>
    </div>
    <table mdbTableEditor class="table table-striped z-depth-1" [itemsPerPage]="visibleItems" #table="mdbEditor" (rowHighlight)="highlightedRow = $event">
      <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.name}}</td>
        <td>{{item.position}}</td>
        <td>{{item.office}}</td>
        <td>{{item.age}}</td>
        <td>{{item.start_date}}</td>
        <td>{{item.salary}}</td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="7">
          <div class="d-flex flex-center">
            <span>Showing {{table.paginationInfo.firstItem}} to {{table.paginationInfo.lastItem}} of {{table.paginationInfo.allItems}} entries</span>
            <div class="flex-1"></div>
            <mdb-icon fas icon="angle-left" size="lg" (click)="table.prevPage()" class="p-2"
                      [ngClass]="{'disabled text-muted': table.disablePrevious()}" mdbWavesEffect></mdb-icon>
            <mdb-icon fas icon="angle-right" size="lg" (click)="table.nextPage()" class="p-2"
                      [ngClass]="{'disabled text-muted': table.disableNext()}" mdbWavesEffect></mdb-icon>
          </div>
        </td>
      </tr>
      </tfoot>
    </table>
  </div>
</div>
import { Component, ViewChild, } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {MdbTableEditorDirective} from "mdb-table-editor";

@Component({
  selector: 'app-basic-table-editor',
  templateUrl: './basic-table-editor.component.html',
  styleUrls: ['./basic-table-editor.component.scss']
})
export class BasicTableEditorComponent {
  @ViewChild('table', { static: true }) mdbTableEditor!: MdbTableEditorDirective;

  headElements = ['ID', 'Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'];
  visibleItems: number = 10;
  searchText: string = '';
  highlightedRow: any = null;

  constructor(private http: HttpClient) {
    this.http.get('http://www.json-generator.com/api/json/get/cfDQtoFAde?indent=2').subscribe((data: any) => {
      data.forEach((el: any, index: number) => {
      el.id = index + 1;
    });
      this.mdbTableEditor.dataArray = data;
    });
  }

  addModalForm(form: any, modalInstance: any) {
    const values: any = {
      id: this.mdbTableEditor.dataArray[this.mdbTableEditor.dataArray.length - 1]['id'] + 1,
      name: form[0].value,
      position: form[1].value,
      office: form[2].value,
      age: form[3].value,
      start_date: form[4].value,
      salary: form[5].value
    };
    this.mdbTableEditor.dataArray.push(values);
    this.mdbTableEditor.iterableDataArray.push(values);
    this.mdbTableEditor.updatePaginationInfo();
    modalInstance.hide();
  }

  editModalForm(form: any, modalInstance: any) {
    const userDataRowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el.name === this.highlightedRow.name);
    const values: any = {
      id: userDataRowIndex + 1,
      name: form[0].value,
      position: form[1].value,
      office: form[2].value,
      age: form[3].value,
      start_date: form[4].value,
      salary: form[5].value
    };
    this.mdbTableEditor.dataArray[userDataRowIndex] = values;
    this.mdbTableEditor.iterableDataArray[userDataRowIndex] = values;
    this.mdbTableEditor.iterableDataArray[userDataRowIndex] = values;
    modalInstance.hide();
  }

  modalRemove(modalInstance: any) {
    const rowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el == this.highlightedRow);
    this.mdbTableEditor.dataArray.splice(rowIndex, 1);
    this.mdbTableEditor.iterableDataArray.splice(rowIndex, 1);
    this.mdbTableEditor.updatePaginationInfo();
    modalInstance.hide();
  }
}
.tr-color-selected {
  background-color: hsla(196, 77%, 55%, 0.3) !important;
  transition: all .2s ease-in;
}
td {
  vertical-align: middle !important;
}

Row Editor

This version of the Editor allows you to add, edit and remove rows by activating an edition mode.

All operations are carried out directly in a row.

How row editor works

Row editor is working corectly when table element has an mdbTableEditor directive on it.

It is also required, to set the [itemsPerPage] input, and the export identificator #your-template-id="mdbEditor".

The last thing that is required for the table to work properly is to use the emitted event (rowHighlight) to assign a highlighted table row (this is used when editing or deleting rows).

Row editor has been designed to make it possible to edit individual rows of the table. To do this, you must have variables that check if the table is in edit mode - isTableEditable, if the icons for accepting editing or deleting are visible - visibleEditIcons and if the row of the table matches the identifier of this row - rowIndex.

Everything what you need is a code below a table.

Delete

Are you sure to delete selected rows?

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400
Suki Burks Developer London 53 2009/10/22 $114,500
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500
Timothy Mooney Office Manager London 37 2008/12/11 $136,200
Jackson Bradshaw Director New York 65 2008/09/26 $645,750
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575
Thor Walton Developer New York 61 2013/08/11 $98,540
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Hermione Butler Regional Director London 47 2011/03/21 $356,250
Lael Greer Systems Administrator London 21 2009/02/27 $103,500
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000
Donna Snider Customer Support New York 27 2011/01/25 $112,000
Name Position Office Age Start date Salary 
<div class="row d-flex justify-content-center modalWrapper mt-5">
  <button mdbBtn color="teal" size="sm" rounded="true"  mdbWavesEffect (click)="isTableEditable = true"> Activate edits</button>
  <button mdbBtn color="mdb-color" size="sm" rounded="true" [disabled]="!isTableEditable" (click)="isTableEditable = false"  mdbWavesEffect> Deactivate edits</button>
  <button mdbBtn color="info" size="sm" rounded="true"  mdbWavesEffect (click)="addBlankRow()"> Add new rows</button>
  <div mdbModal #modalDelete="mdbModal" class="modal fade" id="modalDelete" tabindex="-1" role="dialog"
       aria-labelledby="modalDelete"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>
          <button type="button" class="close text-danger" (click)="modalDelete.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <p class="text-center h4">Are you sure to delete selected row?</p>
        </div>
        <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">
          <button type="button" mdbBtn color="danger" class="btnYesClass" id="btnYes" data-dismiss="modal" mdbWavesEffect
                  (click)="modalRemove(modalDelete)">
            Yes
          </button>
          <button type="button" mdbBtn color="primary" class="btnNoClass" id="btnNo" data-dismiss="modal" mdbWavesEffect
                  (click)="modalDelete.hide()">
            No
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-8 mx-auto my-5">
    <div class="row w-100 d-flex justify-content-between mx-auto">
      <div class="col-md-3 my-3 d-flex align-items-center">
        <span class="font-weight-bolder">Show</span>
        <select class="browser-default custom-select mx-2" [(ngModel)]="visibleItems"
                (ngModelChange)="visibleItems = +$event" style="width: unset;">
          <option value="10" selected>10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
        <span class="font-weight-bolder">Entries</span>
      </div>
      <div class="col-md-6 my-3 text-right d-flex justify-content-between align-items-center">
        <label class="font-weight-bolder mb-0">Search: </label>
        <input type="search" class="form-control form-control-sm ml-2"[(ngModel)]="searchText">
      </div>
    </div>
    <table mdbTableEditor class="table table-striped z-depth-1" [itemsPerPage]="visibleItems" #table="mdbEditor" (rowHighlight)="highlightedRow = $event">
      <thead>
      <tr>
        <th *ngFor="let head of headElements" scope="col" >{{head}}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of table.performSearch(this.searchText); let i = index" #tableRow>
        <td>{{item.id}} </td>
        <td>
          <ng-container *ngIf="i !== rowIndex">
            {{item.name}}
          </ng-container>
          <ng-container *ngIf="i == rowIndex">
            <input type="text" class="form-control" [value]="item.name">
          </ng-container>
        </td>
        <td>
          <ng-container *ngIf="i !== rowIndex">
            {{item.position}}
          </ng-container>
          <ng-container *ngIf="i == rowIndex">
            <input type="text" class="form-control" [value]="item.position">
          </ng-container>
        </td>
        <td>
          <ng-container *ngIf="i !== rowIndex">
            {{item.office}}
          </ng-container>
          <ng-container *ngIf="i == rowIndex">
            <input type="text" class="form-control" [value]="item.office">
          </ng-container>
        </td>
        <td>
          <ng-container *ngIf="i !== rowIndex">
            {{item.age}}
          </ng-container>
          <ng-container *ngIf="i == rowIndex">
            <input type="text" class="form-control" [value]="item.age">
          </ng-container>
        </td>
        <td>
          <ng-container *ngIf="i !== rowIndex">
            {{item.start_date}}
          </ng-container>
          <ng-container *ngIf="i == rowIndex">
            <input type="text" class="form-control" [value]="item.start_date">
          </ng-container>
        </td>
        <td>
          <ng-container *ngIf="i !== rowIndex">
            {{item.salary}}
          </ng-container>
          <ng-container *ngIf="i == rowIndex">
            <input type="text" class="form-control" [value]="item.salary">
          </ng-container>
        </td>
        <td *ngIf="isTableEditable">
          <div class="d-flex flex-column flex-center">
            <button mdbBtn color="teal" size="sm" mdbWavesEffect (click)="showEditIcons(i)">
              <mdb-icon far icon="edit"></mdb-icon>
            </button>
            <div *ngIf="visibleEditIcons && i == rowIndex" class="d-flex flex-center">
              <button mdbBtn color="primary" size="sm" mdbWavesEffect (click)="approveEdit(tableRow)">
                <mdb-icon fas icon="check"></mdb-icon>
              </button>
              <button mdbBtn color="danger" size="sm" mdbWavesEffect (click)="modalDelete.show()">
                <mdb-icon far icon="trash-alt"></mdb-icon>
              </button>
            </div>
          </div>
        </td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="8">
          <div class="d-flex flex-center">
            <span>Showing {{table.paginationInfo.firstItem}} to {{table.paginationInfo.lastItem}} of {{table.paginationInfo.allItems}} entries</span>
            <div class="flex-1"></div>
            <mdb-icon fas icon="angle-left" size="lg" (click)="table.prevPage()" class="p-2"
                      [ngClass]="{'disabled text-muted': table.disablePrevious()}" mdbWavesEffect></mdb-icon>
            <mdb-icon fas icon="angle-right" size="lg" (click)="table.nextPage()" class="p-2"
                      [ngClass]="{'disabled text-muted': table.disableNext()}" mdbWavesEffect></mdb-icon>
          </div>
        </td>
      </tr>
      </tfoot>
    </table>
  </div>
</div>
import {Component, ViewChild} from '@angular/core';
import {MdbTableEditorDirective} from "mdb-table-editor";
import {HttpClient} from "@angular/common/http";

@Component({
  selector: 'app-row-table-editor',
  templateUrl: './row-table-editor.component.html',
  styleUrls: ['./row-table-editor.component.scss']
})
export class RowTableEditorComponent {
  @ViewChild('table', { static: true }) mdbTableEditor!: MdbTableEditorDirective;

  headElements = ['ID', 'Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'];
  visibleItems: number = 10;
  searchText: string = '';
  highlightedRow: any = null;
  rowIndex: any = null;
  isTableEditable: boolean = false;
  visibleEditIcons: boolean = false;
  isRowEditable: boolean = false;

  constructor(private http: HttpClient) {
    this.http.get('http://www.json-generator.com/api/json/get/cfDQtoFAde?indent=2').subscribe((data: any) => {
      data.forEach((el: any, index: number) => {
        el.id = index + 1;
      });
      this.mdbTableEditor.dataArray = data;
    });
  }

  modalRemove(modalInstance: any) {
    const rowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el == this.highlightedRow);
    this.mdbTableEditor.dataArray.splice(rowIndex, 1);
    this.mdbTableEditor.iterableDataArray.splice(rowIndex, 1);
    this.mdbTableEditor.updatePaginationInfo();
    this.visibleEditIcons = false;
    this.rowIndex = null;
    modalInstance.hide();
  }

  showEditIcons(index: number) {
    this.rowIndex = index;
    this.visibleEditIcons = true;
    this.isRowEditable = true;
  }

  approveEdit(row: any) {
    const userDataRowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el.name === this.highlightedRow.name);
    let values: any = {
      id: (row.childNodes[0].textContent.trim()),
      name: '',
      position: '',
      office: '',
      age: '',
      start_date: '',
      salary: '',
    };
    row.childNodes.forEach((el: any, index: number) => {
      if (index > 0  && index <= row.childNodes.length - 2) {
        if (el.firstElementChild) {
          values[Object.keys(values)[index]] = el.firstElementChild.value;
        }
      };
    });
    this.mdbTableEditor.dataArray[userDataRowIndex] = values;
    this.mdbTableEditor.iterableDataArray[userDataRowIndex] = values;
    this.visibleEditIcons = false;
    this.isRowEditable = false;
    this.rowIndex = null;
  }

  addBlankRow() {
    this.mdbTableEditor.dataArray.push({
      id: this.mdbTableEditor.dataArray[this.mdbTableEditor.dataArray.length - 1]['id'] + 1,
    });
    this.mdbTableEditor.updatePaginationInfo();
  }
}
.tr-color-selected {
  background-color: hsla(196, 77%, 55%, 0.3) !important;
  transition: all .2s ease-in;
}
td {
  vertical-align: middle !important;
}

Content Editor

Content editor has a special featuers that if you click on each table data it becomes editable.

Content editor is working corectly when table element has an mdbTableEditor directive on it.

It is also required, to set the [itemsPerPage] input, and the export identificator #your-template-id="mdbEditor".

The last thing that is required for the table to work properly is to use the emitted event (rowHighlight) to assign a highlighted table row (this is used when editing or deleting rows).

Content editor has been designed to make it possible to edit cell of each rows of the table. To do this, you must have variables that check if the table is in edit mode - isTableEditable, if specified table row cell is in editable mode - showNameInput, showPositionInput, showOfficeInput, showAgeInput, showStartDateInput, showSalaryInput.

Also you need the variable for checking if the row of the table matches the identifier of this row - rowIndex.

Necessary methods are: editTableData('cellNameVariable', row's index), onInputBlur('cellNameVariable', $event, #table-identificator).

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary 
<div class="row d-flex justify-content-center modalWrapper mt-5">
  <div mdbModal #modalAdd="mdbModal" class="modal fade addNewInputs" id="modalAdd" tabindex="-1" role="dialog"
       aria-labelledby="modalAdd"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>
          <button type="button" class="close text-primary" (click)="modalAdd.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <form #addForm>
            <div class="md-form mb-5">
              <input type="text" id="inputName" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputName">Name</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputPosition" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputPosition">Position</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputOfficeInput" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputOfficeInput">Office</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputAge" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputAge">Age</label>
            </div>
            <div class="md-form mb-5">
              <input type="date" id="inputDate" class="form-control" placeholder="Select Date" mdbInput>
              <label data-error="wrong" data-success="right" for="inputDate"></label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputSalary" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputSalary">Salary</label>
            </div>
          </form>
        </div>
        <div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">
          <button mdbBtn color="primary" outline="true" block="true" class="buttonAdd" data-dismiss="modal"
                  (click)="addModalForm(addForm, modalAdd)">Add form
            <mdb-icon far icon="paper-plane" class="ml-1"></mdb-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
  <button mdbBtn color="blue" class="darken-3" size="sm" rounded="true"  mdbWavesEffect (click)="isTableEditable = !isTableEditable">
    <mdb-icon fas [icon]="isTableEditable ? 'toggle-on' : 'toggle-off'"></mdb-icon>
  </button>
  <button mdbBtn color="secondary" size="sm" rounded="true" (click)="modalAdd.show()" mdbWavesEffect>
    <mdb-icon fas icon="plus"></mdb-icon>
  </button>
  <button mdbBtn color="red" size="sm" rounded="true"  mdbWavesEffect (click)="removeRow()">
    <mdb-icon fas icon="eraser"></mdb-icon>
  </button>
  <div mdbModal #modalDelete="mdbModal" class="modal fade" id="modalDelete" tabindex="-1" role="dialog"
       aria-labelledby="modalDelete"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>
          <button type="button" class="close text-danger" (click)="modalDelete.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <p class="text-center h4">Are you sure to delete selected row?</p>
        </div>
        <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">
          <button type="button" mdbBtn color="danger" class="btnYesClass" id="btnYes" data-dismiss="modal" mdbWavesEffect
                  (click)="removeRow()">
            Yes
          </button>
          <button type="button" mdbBtn color="primary" class="btnNoClass" id="btnNo" data-dismiss="modal" mdbWavesEffect
                  (click)="modalDelete.hide()">
            No
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-8 mx-auto my-5">
    <div class="row w-100 d-flex justify-content-between mx-auto">
      <div class="col-md-3 my-3 d-flex align-items-center">
        <span class="font-weight-bolder">Show</span>
        <select class="browser-default custom-select mx-2" [(ngModel)]="visibleItems"
                (ngModelChange)="visibleItems = +$event" style="width: unset;">
          <option value="10" selected>10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
        <span class="font-weight-bolder">Entries</span>
      </div>
      <div class="col-md-6 my-3 text-right d-flex justify-content-between align-items-center">
        <label class="font-weight-bolder mb-0">Search: </label>
        <input type="search" class="form-control form-control-sm ml-2"[(ngModel)]="searchText">
      </div>
    </div>
    <table mdbTableEditor class="table table-striped z-depth-1" [itemsPerPage]="visibleItems" #table="mdbEditor" (rowHighlight)="highlightedRow = $event">
      <thead>
      <tr>
        <th *ngFor="let head of headElements" scope="col">{{head}}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of table.performSearch(this.searchText); let i = index" #tableRow>
        <td>{{item.id}} </td>
        <td (click)="editTableData('showNameInput', i)">
          <ng-container *ngIf="!isTableEditable || !showNameInput || i !== rowIndex">
            {{item.name}}
          </ng-container>
          <ng-container *ngIf="isTableEditable && showNameInput && i == rowIndex">
            <input type="text" class="form-control" [value]="item.name" (blur)="onInputBlur('showNameInput', $event, tableRow)">
          </ng-container>
        </td>
        <td  (click)="editTableData('showPositionInput', i)">
          <ng-container *ngIf="!isTableEditable || !showPositionInput || i !== rowIndex">
            {{item.position}}
          </ng-container>
          <ng-container *ngIf="isTableEditable && showPositionInput && i == rowIndex">
            <input type="text" class="form-control" [value]="item.position" (blur)="onInputBlur('showPositionInput', $event, tableRow)">
          </ng-container>
        </td>
        <td (click)="editTableData('showOfficeInput', i)">
          <ng-container *ngIf="!isTableEditable || !showOfficeInput || i !== rowIndex">
            {{item.office}}
          </ng-container>
          <ng-container *ngIf="isTableEditable && showOfficeInput && i == rowIndex">
            <input type="text" class="form-control" [value]="item.office" (blur)="onInputBlur('showOfficeInput', $event, tableRow)">
          </ng-container>
        </td>
        <td (click)="editTableData('showAgeInput', i)">
          <ng-container *ngIf="!isTableEditable || !showAgeInput || i !== rowIndex">
            {{item.age}}
          </ng-container>
          <ng-container *ngIf="isTableEditable && showAgeInput && i == rowIndex">
            <input type="text" class="form-control" [value]="item.age" (blur)="onInputBlur('showAgeInput', $event, tableRow)">
          </ng-container>
        </td>
        <td (click)="editTableData('showStartDateInput', i)">
          <ng-container *ngIf="!isTableEditable || !showStartDateInput || i !== rowIndex">
            {{item.start_date}}
          </ng-container>
          <ng-container *ngIf="isTableEditable && showStartDateInput && i == rowIndex">
            <input type="text" class="form-control" [value]="item.start_date" (blur)="onInputBlur('showStartDateInput', $event, tableRow)">
          </ng-container>
        </td>
        <td (click)="editTableData('showSalaryInput', i)">
          <ng-container *ngIf="!isTableEditable || !showSalaryInput || i !== rowIndex">
            {{item.salary}}
          </ng-container>
          <ng-container *ngIf="isTableEditable && showSalaryInput && i == rowIndex">
            <input type="text" class="form-control" [value]="item.salary" (blur)="onInputBlur('showSalaryInput', $event, tableRow)">
          </ng-container>
        </td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="7">
          <div class="d-flex flex-center">
            <span>Showing {{table.paginationInfo.firstItem}} to {{table.paginationInfo.lastItem}} of {{table.paginationInfo.allItems}} entries</span>
            <div class="flex-1"></div>
            <mdb-icon fas icon="angle-left" size="lg" (click)="table.prevPage()" class="p-2"
                      [ngClass]="{'disabled text-muted': table.disablePrevious()}" mdbWavesEffect></mdb-icon>
            <mdb-icon fas icon="angle-right" size="lg" (click)="table.nextPage()" class="p-2"
                      [ngClass]="{'disabled text-muted': table.disableNext()}" mdbWavesEffect></mdb-icon>
          </div>
        </td>
      </tr>
      </tfoot>
    </table>
  </div>
</div>
import {Component, ViewChild} from '@angular/core';
import {MdbTableEditorDirective} from "mdb-table-editor";
import {HttpClient} from "@angular/common/http";

@Component({
  selector: 'app-content-table-editor',
  templateUrl: './content-table-editor.component.html',
  styleUrls: ['./content-table-editor.component.scss']
})
export class ContentTableEditorComponent {
  @ViewChild('table', { static: true }) mdbTableEditor!: MdbTableEditorDirective;

  headElements = ['ID', 'Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'];
  visibleItems: number = 10;
  searchText: string = '';
  highlightedRow: any = null;
  rowIndex: any = null;
  isTableEditable: boolean = false;
  visibleEditIcons: boolean = false;
  showNameInput: any = false;
  showPositionInput: any = false;
  showOfficeInput: any = false;
  showAgeInput: any = false;
  showStartDateInput: any = false;
  showSalaryInput: any = false;

  constructor(private http: HttpClient) {
    this.http.get('http://www.json-generator.com/api/json/get/cfDQtoFAde?indent=2').subscribe((data: any) => {
      data.forEach((el: any, index: number) => {
        el.id = index + 1;
      });
      this.mdbTableEditor.dataArray = data;
    });
  }

  removeRow() {
    const rowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el == this.highlightedRow);
    this.mdbTableEditor.dataArray.splice(rowIndex, 1);
    this.mdbTableEditor.iterableDataArray.splice(rowIndex, 1);
    this.mdbTableEditor.updatePaginationInfo();
    this.visibleEditIcons = false;
    this.rowIndex = null;
  }

  editTableData(input: string, index: number) {
    [
      'showNameInput',
      'showPositionInput',
      'showOfficeInput',
      'showAgeInput',
      'showStartDateInput',
      'showSalaryInput'
    ].forEach((el: any) => {
      if ((this as any)[el] == true) {
        (this as any)[el] = false;
      }
    });
    (this as any)[input] = true;
    this.rowIndex = index;
  }

  onInputBlur(input: string, event: any, row: any) {
    const userDataRowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el.name === this.highlightedRow.name);
    let values: any = {
      id: (row.childNodes[0].textContent.trim()),
      name: '',
      position: '',
      office: '',
      age: '',
      start_date: '',
      salary: '',
    };
    row.childNodes.forEach((el: any, index: number) => {
      if (el.firstElementChild) {
        values[Object.keys(values)[index]] = event.target.value;
      } else {
        values[Object.keys(values)[index]] = el.textContent.trim()
      }
    });
    this.mdbTableEditor.dataArray[userDataRowIndex] = values;
    this.mdbTableEditor.iterableDataArray[userDataRowIndex] = values;
    this.rowIndex = null;
    (this as any)[input] = false;
  }

  addModalForm(form: any, modalInstance: any) {
    const values: any = {
      id: this.mdbTableEditor.dataArray[this.mdbTableEditor.dataArray.length - 1]['id'] + 1,
      name: form[0].value,
      position: form[1].value,
      office: form[2].value,
      age: form[3].value,
      start_date: form[4].value,
      salary: form[5].value
    };
    this.mdbTableEditor.dataArray.push(values);
    this.mdbTableEditor.iterableDataArray.push(values);
    this.mdbTableEditor.updatePaginationInfo();
    modalInstance.hide();
  }
}
.tr-color-selected {
  background-color: hsla(196, 77%, 55%, 0.3) !important;
  transition: all .2s ease-in;
}
td {
 vertical-align: middle !important;
}

Table Editor without pagination

Modal Table Editor without pagination. Use it when you don't need to have any pagination, because you have short set of table's data.

<div class="row d-flex justify-content-center modalWrapper mt-5">
  <div mdbModal #modalAdd="mdbModal" class="modal fade addNewInputs" id="modalAdd" tabindex="-1" role="dialog"
       aria-labelledby="modalAdd"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>
          <button type="button" class="close text-primary" (click)="modalAdd.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <form #addForm>
            <div class="md-form mb-5">
              <input type="text" id="inputName" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputName">Name</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputPosition" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputPosition">Position</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputOfficeInput" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputOfficeInput">Office</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputAge" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputAge">Age</label>
            </div>
            <div class="md-form mb-5">
              <input type="date" id="inputDate" class="form-control" placeholder="Select Date" mdbInput>
              <label data-error="wrong" data-success="right" for="inputDate"></label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputSalary" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputSalary">Salary</label>
            </div>
          </form>
        </div>
        <div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">
          <button mdbBtn color="primary" outline="true" block="true" class="buttonAdd" data-dismiss="modal"
                  (click)="addModalForm(addForm, modalAdd)">Add form
            <mdb-icon far icon="paper-plane" class="ml-1"></mdb-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center">
    <a mdbBtn color="info" rounded="true" size="sm" (click)="modalAdd.show()" data-target="#modalAdd" mdbWavesEffect>
      Add <mdb-icon fas icon="plus-square" class="ml-1"></mdb-icon></a>
  </div>
  <div mdbModal #modalEdit="mdbModal" class="modal fade modalEditClass" id="modalEdit" tabindex="-1" role="dialog"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold text-secondary ml-5">Edit form</h4>
          <button type="button" class="close text-secondary" (click)="modalEdit.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <form #editForm>
            <div class="md-form mb-5">
              <input type="text" id="formNameEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.name : ''">
              <label data-error="wrong" data-success="right" for="formNameEdit">Name</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formPositionEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.position : ''">
              <label data-error="wrong" data-success="right" for="formPositionEdit">Position</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formOfficeEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.office : ''">
              <label data-error="wrong" data-success="right" for="formOfficeEdit">Office</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formAgeEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.age : ''">
              <label data-error="wrong" data-success="right" for="formAgeEdit">Age</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formDateEdit" class="form-control datepicker" mdbInput
                     [value]="highlightedRow ? highlightedRow.start_date : ''">
              <label data-error="wrong" data-success="right" for="formDateEdit">Date</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formSalaryEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.salary : ''">
              <label data-error="wrong" data-success="right" for="formSalaryEdit">Salary</label>
            </div>
          </form>
        </div>
        <div class="modal-footer d-flex justify-content-center editInsideWrapper">
          <button mdbBtn color="secondary" outline="true" block="true" class="editInside" data-dismiss="modal"
                  (click)="editModalForm(editForm, modalEdit)">
            Edit form <mdb-icon far icon="paper-plane" class="ml-1"></mdb-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center buttonEditWrapper">
    <button mdbBtn color="info" rounded="true" size="sm" class="buttonEdit" [disabled]="!highlightedRow"
            (click)="modalEdit.show()" data-target="#modalEdit">
      Edit<mdb-icon far icon="pencil-square" class="ml-1"></mdb-icon></button>
  </div>
  <div mdbModal #modalDelete="mdbModal" class="modal fade" id="modalDelete" tabindex="-1" role="dialog"
       aria-labelledby="modalDelete"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>
          <button type="button" class="close text-danger" (click)="modalDelete.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <p class="text-center h4">Are you sure to delete selected row?</p>
        </div>
        <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">
          <button mdbBtn color="danger" type="button" class="btnYesClass" id="btnYes" data-dismiss="modal" mdbWavesEffect
                  (click)="modalRemove(modalDelete)">
            Yes
          </button>
          <button mdbBtn color="primary" type="button" class="btnNoClass" id="btnNo" data-dismiss="modal" mdbWavesEffect
                  (click)="modalDelete.hide()">
            No
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center">
    <button mdbBtn color="danger" size="sm" rounded="true" class="buttonDelete" [disabled]="!highlightedRow" (click)="modalDelete.show()"
            data-target="#modalDelete">Delete<mdb-icon fas icon="times" class="ml-1"></mdb-icon></button>
  </div>
</div>
<div class="row">
  <div class="col-md-8 mx-auto my-5">
    <div class="row w-100 d-flex justify-content-between mx-auto">
      <div class="col-md-6 my-3 text-right d-flex justify-content-between align-items-center">
        <label class="font-weight-bolder mb-0">Search: </label>
        <input type="search" class="form-control form-control-sm ml-2" [(ngModel)]="searchText">
      </div>
    </div>
    <table mdbTableEditor class="table table-striped z-depth-1" #table="mdbEditor" (rowHighlight)="highlightedRow = $event">
      <thead>
      <tr>
        <th *ngFor="let head of headElements" scope="col">{{head}}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of table.performSearch(this.searchText)">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.position}}</td>
        <td>{{item.office}}</td>
        <td>{{item.age}}</td>
        <td>{{item.start_date}}</td>
        <td>{{item.salary}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
import {Component, ViewChild} from '@angular/core';
import {MdbTableEditorDirective} from 'mdb-table-editor';

@Component({
  selector: 'app-without-pagination-table-editor',
  templateUrl: './without-pagination-table-editor.component.html',
  styleUrls: ['./without-pagination-table-editor.component.scss']
})
export class WithoutPaginationTableEditorComponent {
@ViewChild('table', { static: true }) mdbTableEditor!: MdbTableEditorDirective;

headElements = ['ID', 'Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'];
searchText: string = '';
highlightedRow: any = null;
dataArray: any[] = [
  {id: 1, name: 'John Wick', office: 'Brussel', age: 42, position: 'Technical Engineer', start_date: '02/26/2018', salary: 120000 },
  {id: 2, name: 'Gabriellia Boyer', office: 'Ţafas', age: 80, position: 'Senior Financial Analyst', start_date: '06/08/2018', salary: 340000 },
  {id: 3, name: 'Berkly Vaskin', office: 'Trảng Bom', age: 79, position: 'Graphic Designer', start_date: '02/26/2018', salary: 345122 },
  {id: 4, name: 'Ronald Maddick', office: 'Garça', age: 42, position: 'Research Nurse', start_date: '03/15/2018', salary: 444444 },
  {id: 5, name: 'Neysa Servante', office: 'Zomba', age: 22, position: 'Accountant IV', start_date: '07/12/2018', salary: 123456 },
];

ngOnInit() {
  this.mdbTableEditor.dataArray = this.dataArray;
}

addModalForm(form: any, modalInstance: any) {
  const values: any = {
    id: this.mdbTableEditor.dataArray[this.mdbTableEditor.dataArray.length - 1]['id'] + 1,
    name: form[0].value,
    position: form[1].value,
    office: form[2].value,
    age: form[3].value,
    start_date: form[4].value,
    salary: form[5].value
  };
  this.mdbTableEditor.dataArray.push(values);
  this.mdbTableEditor.iterableDataArray.push(values);
  modalInstance.hide();
}

editModalForm(form: any, modalInstance: any) {
  const userDataRowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el.name === this.highlightedRow.name);
  const values: any = {
    id: userDataRowIndex + 1,
    name: form[0].value,
    position: form[1].value,
    office: form[2].value,
    age: form[3].value,
    start_date: form[4].value,
    salary: form[5].value
  };
  this.mdbTableEditor.dataArray[userDataRowIndex] = values;
  this.mdbTableEditor.iterableDataArray[userDataRowIndex] = values;
  modalInstance.hide();
}

modalRemove(modalInstance: any) {
  const rowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el == this.highlightedRow);
  this.mdbTableEditor.dataArray.splice(rowIndex, 1);
  this.mdbTableEditor.iterableDataArray.splice(rowIndex, 1);
  modalInstance.hide();
}
}
.tr-color-selected {
  background-color: hsla(196, 77%, 55%, 0.3) !important;
  transition: all .2s ease-in;
}
td {
  vertical-align: middle !important;
}

Table Editor without search

Modal Table Editor without filtering. Use it when you don't need to have any search mechanism.

<div class="row d-flex justify-content-center modalWrapper mt-5">
  <div mdbModal #modalAdd="mdbModal" class="modal fade addNewInputs" id="modalAdd" tabindex="-1" role="dialog"
       aria-labelledby="modalAdd"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold text-primary ml-5">Add new form</h4>
          <button type="button" class="close text-primary" (click)="modalAdd.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <form #addForm>
            <div class="md-form mb-5">
              <input type="text" id="inputName" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputName">Name</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputPosition" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputPosition">Position</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputOfficeInput" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputOfficeInput">Office</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputAge" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputAge">Age</label>
            </div>
            <div class="md-form mb-5">
              <input type="date" id="inputDate" class="form-control" placeholder="Select Date" mdbInput>
              <label data-error="wrong" data-success="right" for="inputDate"></label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="inputSalary" class="form-control validate" mdbInput>
              <label data-error="wrong" data-success="right" for="inputSalary">Salary</label>
            </div>
          </form>
        </div>
        <div class="modal-footer d-flex justify-content-center buttonAddFormWrapper">
          <button mdbBtn color="primary" outline="true" block="true" class="buttonAdd" data-dismiss="modal"
                  (click)="addModalForm(addForm, modalAdd)">Add form
            <mdb-icon far icon="paper-plane" class="ml-1"></mdb-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center">
    <a mdbBtn color="info" rounded="true" size="sm" (click)="modalAdd.show()" data-target="#modalAdd" mdbWavesEffect>
      Add <mdb-icon fas icon="plus-square" class="ml-1"></mdb-icon></a>
  </div>
  <div mdbModal #modalEdit="mdbModal" class="modal fade modalEditClass" id="modalEdit" tabindex="-1" role="dialog"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold text-secondary ml-5">Edit form</h4>
          <button type="button" class="close text-secondary" (click)="modalEdit.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <form #editForm>
            <div class="md-form mb-5">
              <input type="text" id="formNameEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.name : ''">
              <label data-error="wrong" data-success="right" for="formNameEdit">Name</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formPositionEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.position : ''">
              <label data-error="wrong" data-success="right" for="formPositionEdit">Position</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formOfficeEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.office : ''">
              <label data-error="wrong" data-success="right" for="formOfficeEdit">Office</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formAgeEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.age : ''">
              <label data-error="wrong" data-success="right" for="formAgeEdit">Age</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formDateEdit" class="form-control datepicker" mdbInput
                     [value]="highlightedRow ? highlightedRow.start_date : ''">
              <label data-error="wrong" data-success="right" for="formDateEdit">Date</label>
            </div>
            <div class="md-form mb-5">
              <input type="text" id="formSalaryEdit" class="form-control validate" mdbInput
                     [value]="highlightedRow ? highlightedRow.salary : ''">
              <label data-error="wrong" data-success="right" for="formSalaryEdit">Salary</label>
            </div>
          </form>
        </div>
        <div class="modal-footer d-flex justify-content-center editInsideWrapper">
          <button mdbBtn color="secondary" outline="true" block="true" class="editInside" data-dismiss="modal"
                  (click)="editModalForm(editForm, modalEdit)">
            Edit form <mdb-icon far icon="paper-plane" class="ml-1"></mdb-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center buttonEditWrapper">
    <button mdbBtn color="info" rounded="true" size="sm" class="buttonEdit" [disabled]="!highlightedRow"
            (click)="modalEdit.show()" data-target="#modalEdit">
      Edit<mdb-icon far icon="pencil-square" class="ml-1"></mdb-icon></button>
  </div>
  <div mdbModal #modalDelete="mdbModal" class="modal fade" id="modalDelete" tabindex="-1" role="dialog"
       aria-labelledby="modalDelete"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h4 class="modal-title w-100 font-weight-bold ml-5 text-danger">Delete</h4>
          <button type="button" class="close text-danger" (click)="modalDelete.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body mx-3">
          <p class="text-center h4">Are you sure to delete selected row?</p>
        </div>
        <div class="modal-footer d-flex justify-content-center deleteButtonsWrapper">
          <button mdbBtn color="danger" type="button" class="btnYesClass" id="btnYes" data-dismiss="modal" mdbWavesEffect
                  (click)="modalRemove(modalDelete)">
            Yes
          </button>
          <button mdbBtn color="primary" type="button" class="btnNoClass" id="btnNo" data-dismiss="modal" mdbWavesEffect
                  (click)="modalDelete.hide()">
            No
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center">
    <button mdbBtn color="danger" size="sm" rounded="true" class="buttonDelete" [disabled]="!highlightedRow"
            (click)="modalDelete.show()"
            data-target="#modalDelete">Delete<mdb-icon fas icon="times" class="ml-1"></mdb-icon></button>
  </div>
</div>
<div class="row">
  <div class="col-md-8 mx-auto my-5">
    <div class="row w-100 d-flex justify-content-between mx-auto">
      <div class="col-md-3 my-3 d-flex align-items-center">
        <span class="font-weight-bolder">Show</span>
        <select class="browser-default custom-select mx-2" [(ngModel)]="visibleItems"
                (ngModelChange)="visibleItems = +$event" style="width: unset;">
          <option value="10" selected>10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
        <span class="font-weight-bolder">Entries</span>
      </div>
    </div>
    <table mdbTableEditor class="table table-striped z-depth-1" [itemsPerPage]="visibleItems" #table="mdbEditor"
           (rowHighlight)="highlightedRow = $event">
      <thead>
      <tr>
        <th *ngFor="let head of headElements" scope="col">{{head}}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of table.performSearch('')">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.position}}</td>
        <td>{{item.office}}</td>
        <td>{{item.age}}</td>
        <td>{{item.start_date}}</td>
        <td>{{item.salary}}</td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="7">
          <div class="d-flex flex-center">
    <span>Showing {{table.paginationInfo.firstItem}} to {{table.paginationInfo.lastItem}}
      of {{table.paginationInfo.allItems}} entries</span>
            <div class="flex-1"></div>
            <mdb-icon fas icon="angle-left" size="lg" (click)="table.prevPage()" class="p-2"
                      [ngClass]="{'disabled text-muted': table.disablePrevious()}" mdbWavesEffect></mdb-icon>
            <mdb-icon fas icon="angle-right" size="lg" (click)="table.nextPage()" class="p-2"
                      [ngClass]="{'disabled text-muted': table.disableNext()}" mdbWavesEffect></mdb-icon>
          </div>
        </td>
      </tr>
      </tfoot>
    </table>
  </div>
</div>
import {Component, ViewChild} from '@angular/core';
import {MdbTableEditorDirective} from 'mdb-table-editor';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-without-search-table-editor',
  templateUrl: './without-search-table-editor.component.html',
  styleUrls: ['./without-search-table-editor.component.scss']
})
export class WithoutSearchTableEditorComponent {
  @ViewChild('table', { static: true }) mdbTableEditor!: MdbTableEditorDirective;

  headElements = ['ID', 'Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'];
  visibleItems: number = 10;
  searchText: string = '';
  highlightedRow: any = null;

  constructor(private http: HttpClient) {
    this.http.get('http://www.json-generator.com/api/json/get/cfDQtoFAde?indent=2').subscribe((data: any) => {
      data.forEach((el: any, index: number) => {
        el.id = index + 1;
      });
    this.mdbTableEditor.dataArray = data;
    });
  }

  addModalForm(form: any, modalInstance: any) {
    const values: any = {
      id: this.mdbTableEditor.dataArray[this.mdbTableEditor.dataArray.length - 1]['id'] + 1,
      name: form[0].value,
      position: form[1].value,
      office: form[2].value,
      age: form[3].value,
      start_date: form[4].value,
      salary: form[5].value
    };
    this.mdbTableEditor.dataArray.push(values);
    this.mdbTableEditor.iterableDataArray.push(values);
    this.mdbTableEditor.updatePaginationInfo();
    modalInstance.hide();
  }

  editModalForm(form: any, modalInstance: any) {
    const userDataRowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el.name === this.highlightedRow.name);
    const values: any = {
      id: userDataRowIndex + 1,
      name: form[0].value,
      position: form[1].value,
      office: form[2].value,
      age: form[3].value,
      start_date: form[4].value,
      salary: form[5].value
    };
    this.mdbTableEditor.dataArray[userDataRowIndex] = values;
    this.mdbTableEditor.iterableDataArray[userDataRowIndex] = values;
    modalInstance.hide();
  }

  modalRemove(modalInstance: any) {
    const rowIndex = this.mdbTableEditor.dataArray.findIndex((el: any) => el == this.highlightedRow);
    this.mdbTableEditor.dataArray.splice(rowIndex, 1);
    this.mdbTableEditor.iterableDataArray.splice(rowIndex, 1);
    this.mdbTableEditor.updatePaginationInfo();
    modalInstance.hide();
  }
}
.tr-color-selected {
  background-color: hsla(196, 77%, 55%, 0.3) !important;
  transition: all .2s ease-in;
}
td {
  vertical-align: middle !important;
}

Installation guide

Step 1: Create new Angular application using Angular CLI command:

ng new application-name --style=scss --routing=false

Step 2: Download this plugin from your user dashboard

Step 3: Extract downloaded archive from Step 2 and copy mdb-table-editor-{version-number}.tgz file to your application root directory

Step 4: Install the mdb-table-editor-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-table-editor-{version-number.tgz} --save

For example, the installation command should look like following: npm install mdb-table-editor-8.0.0.tgz --save

Step 5: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 6: Import the MdbColorPicker, FormsModule, HttpClientModule in the app.module.ts file

Step 7: Copy the basic example from this site and enjoy your new plugin!

Step 1: Download this plugin from your user dashboard

Step 2: Extract downloaded archive from Step 1 and copy mdb-table-editor-{version-number}.tgz file to your application root directory

Step 3: Install the mdb-table-editor-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-table-editor-{version-number.tgz} --save

For example, the installation command should look like following: npm install mdb-table-editor-8.0.0.tgz --save

Step 4: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 5: Import the MdbColorPicker, FormsModule, HttpClientModule in the app.module.ts file

Step 6: Copy the basic example from this site and enjoy your new plugin!

Angular Table Editor - API

Download

This plugin requires a purchase.

Buy Table Editor plugin

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

import { MdbTableEditorModule } from 'mdb-table-editor';
Import example Modules list

Options

Name Type Default Description Example
itemsPerPage number 10 Set the max visible items per one page. [itemsPerPage]="5"

Outputs

Name Type Description Example
rowHighlight EventEmitter<any> Event fired item (row) is active (clicked). (rowHighlight)="onRowHighlight($event)"

Fields

Name Type Default Description Example
dataArray any[] [] Field (setter / getter) used to store table's data. On this field you has to operate when changing the data source (push, pop, overwrite, etc). this.mdbTableEditor.dataArray.push({})
iterableDataArray any[] [] Field (setter / getter) of recalculated table's data. Recalculated means, that this array contains only visible at this time items (calculated through [itemsPerPage] input). this.mdbTableEditor.iterableDataArray.splice(0, 1)
paginationInfo {firstItem: number, lastItem: number, allItems: number, activePage: number} {firstItem: 1, lastItem: itemsPerPage, allItems: dataArray.length, activePage: 1} Public field which contains information about current pagination state. From this field you can obtain necessary pagination informations. <span>Showing: {{table.paginationInfo.firstItem}}</span>

Methods

Name Type Description Example
dataArrayChange Observable<any[]> Returns observable to which you can subscribe to get know when dataArray is changed. this.mdbTableEditor.dataArrayChange.subscribe((data: any) => console.log(data));
iterableDataArrayChange Observable<any[]> Returns observable to which you can subscribe to get know when iterableDataArray is changed. this.mdbTableEditor.iterableDataArrayChange.subscribe((data: any) => console.log(data));
calculatePagesNumber number Returns number of how much pages should be (dataArray.length / itemsPerPage). console.log(this.mdbTableEditor.calculatePagesNumber())
updatePaginationInfo void Updates the paginationInfo variable with recalculated data. Use this when you're modifying the data array (pop, push, etc). this.mdbTableEditor.paginationInfo()
nextPage(switchToLastPage?: boolean) void Use this method to change page (with pagination) to the next one. Set parameter to true if you want to change page to the last one. table.nextPage(true)
prevPage(switchToFirstPage?: boolean) void Use this method to change page (with pagination) to the previous one. Set parameter to true if you want to change page to the first one. table.prevPage(true)
disablePrevious() boolean Use this method to check, if previous (pagination) button should be disabled or not. [ngClass]="{'disabled text-muted': table.disablePrevious()}"
disableNext() boolean Use this method to check, if next (pagination) button should be disabled or not. [ngClass]="{'disabled text-muted': table.disableNext()}"
performSearch(searchKey: string) any Use this method to filter (search) table's data array for containing some characters. *ngFor="let item of table.performSearch(this.searchText)"