Table editable

Angular Bootstrap 4 table editable

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




  Editable table
  
    
      
        
          
        
      
      
        
          Person Name
          Age
          Company Name
          Country
          City
          Sort
          Remove
        
        
          {{person.name}}
          {{person.age}}
          {{person.companyName}}
          {{person.country}}
          {{person.city}}

Person Name	Age	Company Name	Country	City	Sort	Remove
{{person.name}}	{{person.age}}	{{person.companyName}}	{{person.country}}	{{person.city}}


            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 = [
                  { 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);
                  }
                }
              
                changeValue(id: number, property: string, event: any) {
                  this.editField = event.target.textContent;
                  this.personList[id][property] = this.editField;
                }
            }

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 enhancing 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

MDBootstrap search box enables super fast searching among all the data of the table.

Table sort

This functionality lets you sort the data of the tables 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.