Bootstrap table editable

With Editable Bootstrap Table, 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 MDB Pro component Live Example

Editable table

Person Name Age Company Name Country City Sort Remove
Aurelia Vega 30 Deepends Spain Madrid
Guerra Cortez 45 Insectus USA San Francisco
Guadalupe House 26 Isotronic Germany Frankfurt am Main
Elisa Gallagher 31 Portica United Kingdom London

<!-- 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 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 contenteditable="true">{{person.name}}</td>
          <td contenteditable="true">{{person.age}}</td>
          <td contenteditable="true">{{person.companyName}}</td>
          <td contenteditable="true">{{person.country}}</td>
          <td contenteditable="true">{{person.city}}</td>
          <td>
            <span class="table-up">
              <a class="indigo-text">
                <mdb-icon icon="long-arrow-up"></mdb-icon>
              </a>
            </span>
            <span class="table-down">
              <a class="indigo-text">
                <mdb-icon icon="long-arrow-down"></mdb-icon>
              </a>
            </span>
          </td>
          <td>
            <span class="table-remove">
              <button type="button" class="btn btn-danger btn-rounded btn-sm 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 {

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


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

API Reference:

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.

API Reference for MDB Angular Tables:
// MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'