Angular Bootstrap table editable

Angular Table editable - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap Editable Tables are components with which you can add and remove rows and change text and information within cells. In-place editing on your website - based on JavaScript - is now easier and quicker.

Basic example

Live example 
        
            
          <!-- Editable table -->
          <div class="card">
            <h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>
            <div class="card-body">
              <div id="table" class="table-editable">
                <span class="table-add float-right mb-3 mr-2">
                  <a class="text-success" (click)="add()">
                    <mdb-icon fas icon="plus" size="2x"></mdb-icon>
                  </a>
                </span>
                <table class="table table-bordered table-responsive-md table-striped text-center">
                  <tr>
                    <th class="text-center">Person Name</th>
                    <th class="text-center">Age</th>
                    <th class="text-center">Company Name</th>
                    <th class="text-center">Country</th>
                    <th class="text-center">City</th>
                    <th class="text-center">Sort</th>
                    <th class="text-center">Remove</th>
                  </tr>
                  <tr *ngFor="let person of personList; let id = index">
                    <td>
                      <span (keyup)="changeValue(id, 'name', $event)" (blur)="updateList(id, 'name', $event)" contenteditable="true">{{ person.name }}</span>
                    </td>
                    <td>
                      <span contenteditable="true" (keyup)="changeValue(id, 'age', $event)" (blur)="updateList(id, 'age', $event)">{{ person.age }}</span>
                    </td>
                    <td>
                      <span contenteditable="true" (keyup)="changeValue(id, 'companyName', $event)" (blur)="updateList(id, 'companyName', $event)">{{ person.companyName }}</span>
                    </td>
                    <td>
                      <span contenteditable="true" (keyup)="changeValue(id, 'country', $event)" (blur)="updateList(id, 'country', $event)">{{ person.country }}</span>
                    </td>
                    <td>
                      <span contenteditable="true" (keyup)="changeValue(id, 'city', $event)" (blur)="updateList(id, 'city', $event)">{{ person.city }}</span>
                    </td>
                    <td>
                      <span class="table-up">
                        <a class="indigo-text">
                          <mdb-icon fas icon="long-arrow-alt-up"></mdb-icon>
                        </a>
                      </span>
                      <span class="table-down">
                        <a class="indigo-text">
                          <mdb-icon fas icon="long-arrow-alt-down"></mdb-icon>
                        </a>
                      </span>
                    </td>
                    <td>
                      <span class="table-remove">
                        <button type="button" mdbBtn color="danger" rounded="true" size="sm" class="my-0" (click)="remove(id)">Remove</button>
                      </span>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <!-- Editable table -->
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'table-editable',
            templateUrl: './table-editable.component.html',
            styleUrls: ['./table-editable.component.css']
          })
          export class TableEditableComponent {
            editField: string;
            personList: Array<any> = [
              { id: 1, name: 'Aurelia Vega', age: 30, companyName: 'Deepends', country: 'Spain', city: 'Madrid' },
              { id: 2, name: 'Guerra Cortez', age: 45, companyName: 'Insectus', country: 'USA', city: 'San Francisco' },
              { id: 3, name: 'Guadalupe House', age: 26, companyName: 'Isotronic', country: 'Germany', city: 'Frankfurt am Main' },
              { id: 4, name: 'Aurelia Vega', age: 30, companyName: 'Deepends', country: 'Spain', city: 'Madrid' },
              { id: 5, name: 'Elisa Gallagher', age: 31, companyName: 'Portica', country: 'United Kingdom', city: 'London' },
            ];

            awaitingPersonList: Array<any> = [
              { id: 6, name: 'George Vega', age: 28, companyName: 'Classical', country: 'Russia', city: 'Moscow' },
              { id: 7, name: 'Mike Low', age: 22, companyName: 'Lou', country: 'USA', city: 'Los Angeles' },
              { id: 8, name: 'John Derp', age: 36, companyName: 'Derping', country: 'USA', city: 'Chicago' },
              { id: 9, name: 'Anastasia John', age: 21, companyName: 'Ajo', country: 'Brazil', city: 'Rio' },
              { id: 10, name: 'John Maklowicz', age: 36, companyName: 'Mako', country: 'Poland', city: 'Bialystok' },
            ];

            updateList(id: number, property: string, event: any) {
              const editField = event.target.textContent;
              this.personList[id][property] = editField;
            }

            remove(id: any) {
              this.awaitingPersonList.push(this.personList[id]);
              this.personList.splice(id, 1);
            }

            add() {
              if (this.awaitingPersonList.length > 0) {
                const person = this.awaitingPersonList[0];
                this.personList.push(person);
                this.awaitingPersonList.splice(0, 1);
              }
            }

            changeValue(id: number, property: string, event: any) {
              this.editField = event.target.textContent;
            }
          }
        
        
    
        
            
          @media all and (min-width: 768px) {
            tr  {
              td {
                vertical-align: middle !important;
              }
              span {
                &:not([class]) {
                  padding: 1rem 1rem;
                }
              }
            }
          }

Advanced table options

For advanced options of the tables have a look at specific documentation pages listed below.

Datatables

MDBootstrap integration with the most popular plugin that enhances the possibilities of standard tables.

Table pagination

Pagination is a simple navigation which lets you split a huge amount of content within the tables into smaller parts.

Table search

The MDBootstrap search box enables super fast searching through all the table data.

Table sort

This functionality lets you sort the table data according to any specific columns.

Table responsive

Table editable allows you to use tables on mobile devices.
Table styles

Table styles shows you how you can style your tables.

Angular Editable Table - API

In this section you will find advanced information about the Table component. You will find out which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

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 { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard';
Import Example Modules List

Methods

The table shows the available methods in component.

Name Parameters Description Example
remove() index: number Adds a new item to the awaitingPersonList array and removes the same item from the personList array. Takes ID of an element as a argument. remove(1);
add()
Adds a new item to the personList array, and removes the same item from the awaitingPersonList array. add();
changeValue() id: number, property: string, event: event Changes the value of the currently selected item by calling the keyup event. It takes as arguments the id of the element, property, which is to be changed in the array and event. changeValue(1, 'name', event);