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
import { Component } from '@angular/core';
@Component({
selector: 'table-editable',
templateUrl: './table-editable.component.html',
styleUrls: ['./table-editable.component.css']
})
export class TableEditableComponent {
personList: Array = [
{ 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 = [
{ 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, ButtonsModule } from 'ng-uikit-pro-standard'