Table editor
Angular Bootstrap 5 Table editor plugin
Table Editor is a useful tool for displaying and managing data. The component works similarly to the Datatable (docs) with an additional column for action buttons.
Responsive interactive built with Bootstrap 5, Angular and Material Design. Creates editable tables. Delete or edit rows directly or via modal editor.Note: Examples use additional components such as Datatables, Modal, Alerts and Popconfirm. Remember to import them.
Basic example
| Company | Address | Employees |
|---|---|---|
| Smith & Johnson | Park Lane 2, London | 30 |
| P.J. Company | Oak Street 7, Aberdeen | 80 |
| Food & Wine | Netherhall Gardens 3, Hampstead | 12 |
| IT Service | Warwick Road 14, London | 17 |
| A. Jonson Gallery | Oaklands Avenue 2, London | 4 |
| F.A. Architects | Frognal Way 7, Hampstead | 4 |
<div class="d-flex justify-content-end mb-4">
<mdb-form-control>
<input
mdbInput
type="text"
class="form-control"
id="search-input"
[disabled]="editElementIndex !== -1"
(keyup)="search($event)"
/>
<label mdbLabel class="form-label" for="search-input">Search</label>
</mdb-form-control>
<button
MdbRiple
class="btn btn-primary btn-sm ms-3"
[disabled]="editElementIndex !== -1"
(click)="addRow=true"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div class="datatable table-editor mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[sort]="sort"
[pagination]="pagination"
>
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr *ngIf="addRow"
scope="row"
>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="company" />
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="address" />
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="employees" />
</mdb-form-control>
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addNewRow()"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addRow=false"
>
<i class="fa fa-ban"></i>
</button>
</td>
</tr>
<tr
*ngFor="let data of table.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.company }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.company"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.address }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.address"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.employees }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.employees"/>
</mdb-form-control>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex === -1 || editElementIndex !== index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=index"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onDeleteClick(data)"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-trash-alt"></i>
</button>
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-ban"></i>
</button>
</ng-container>
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #pagination [entries]="5"></mdb-table-pagination>
</div>
import { Component, ViewChild } from '@angular/core';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
export interface Person {
company: string,
address: string,
employees: number,
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
editElementIndex = -1;
addRow = false;
company = ''
address = ''
employees = 1;
headers = ['Company', 'Address', 'Employees'];
dataSource: Person[] = [
{
company: 'Smith & Johnson',
address: 'Park Lane 2, London',
employees: 30,
},
{
company: 'P.J. Company',
address: 'Oak Street 7, Aberdeen',
employees: 80,
},
{
company: 'Food & Wine',
address: 'Netherhall Gardens 3, Hampstead',
employees: 12,
},
{
company: 'IT Service',
address: 'Warwick Road 14, London',
employees: 17,
},
{
company: 'A. Jonson Gallery',
address: 'Oaklands Avenue 2, London',
employees: 4,
},
{
company: 'F.A. Architects',
address: 'Frognal Way 7, Hampsteadn',
employees: 4,
},
];
constructor() {}
search(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value;
this.table.search(searchTerm);
}
addNewRow() {
const newRow: Person = {
company: this.company,
address: this.address,
employees: this.employees
}
this.dataSource = [...this.dataSource, {...newRow}];
this.addRow = false;
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource]
}
}
Modal
Note: This example use Modal. Remember to import them.
<div class="d-flex justify-content-end mb-4">
<mdb-form-control>
<input
mdbInput
type="text"
class="form-control"
id="search-input"
(keyup)="search($event)"
/>
<label mdbLabel class="form-label" for="search-input">Search</label>
</mdb-form-control>
<button
MdbRiple
class="btn btn-primary btn-sm ms-3"
(click)="openModal('add')"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div class="datatable table-editor mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[sort]="sort"
[pagination]="pagination"
>
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr
*ngFor="let data of table.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
{{ data.company }}
</td>
<td style="min-width: 250px; max-width: 250px">
{{ data.office }}
</td>
<td style="min-width: 250px; max-width: 250px">
{{ data.employees }}
</td>
<td style="min-width: 100px; max-width: 100px">
{{ data.international }}
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="openModal('edit', data)"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onDeleteClick(data)"
>
<i class="fa fa-trash-alt"></i>
</button>
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #pagination [entries]="5"></mdb-table-pagination>
</div>
import { Component, ViewChild } from '@angular/core';
import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
import { ModalComponent } from 'your-path-to-modal-component;
export interface Person {
company: string,
office: string,
employees: number,
international: boolean,
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
modalRef: MdbModalRef<ModalComponent> | null = null;
newRow = {
company: '',
office: '',
employees: 0,
international: false,
};
headers = ['Company', 'Office', 'Employees', 'International'];
dataSource: Person[] = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
constructor(private modalService: MdbModalService) {}
search(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value;
this.table.search(searchTerm);
}
openModal(mode: 'add' | 'edit', data?: Person) {
this.modalRef = this.modalService.open(ModalComponent, { data: {
modalTitle: mode === 'edit' ? 'Edit item' : 'New item',
company: data ? data.company : '',
office: data ? data.office : 'Warsaw',
employees: data ? data.employees : 1,
international: data ? data.international : false,
}})
this.modalRef.onClose.subscribe((modalData: Person) => {
if (!modalData) {
return;
}
if (mode === 'add') {
this.dataSource = [...this.dataSource, {...modalData}];
} else if (mode === 'edit' && data) {
const index = this.dataSource.indexOf(data)
this.dataSource[index] = modalData;
this.dataSource = [...this.dataSource]
}
});
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource]
}
}
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{modalTitle}}</h5>
<button
type="button"
class="btn-close"
aria-label="Close"
(click)="modalRef.close()"
></button>
</div>
<div class="modal-body">
<div class="my-4 table-editor_input-wrapper">
<mdb-form-control>
<input mdbInput type="text" id="company-input" class="form-control" [(ngModel)]="company" />
<label mdbLabel class="form-label" for="company-input">Company</label>
</mdb-form-control>
</div>
<div class="my-4 table-editor_input-wrapper">
<mdb-form-control>
<mdb-select [(ngModel)]="office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Office</label>
</mdb-form-control>
</div>
<div class="my-4 table-editor_input-wrapper">
<mdb-form-control>
<input mdbInput type="text" id="employees-input" class="form-control" [(ngModel)]="employees"/>
<label mdbLabel class="form-label" for="employees-input">Employees</label>
</mdb-form-control>
</div>
<div class="my-4 table-editor_input-wrapper">
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
value=""
id="international-checkbox"
[(ngModel)]="international"
/>
<label class="form-check-label" for="flexCheckDefault">
International
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="shadow-0 btn btn-md btn-outline-primary" (click)="modalRef.close()">
Cancel
</button>
<button type="button" class="shadow-0 btn btn-md btn-primary" (click)="saveData()">Save</button>
</div>
import { Component } from '@angular/core';
import { MdbModalRef } from 'mdb-angular-ui-kit/modal';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
})
export class ModalComponent {
modalTitle: string | null = null;
company: string | null = null;
office: string | null = null;
employees: string | null = null;
international: string | null = null;
options = [
{ value: 'London', label: 'London' },
{ value: 'Warsaw', label: 'Warsaw' },
{ value: 'New York', label: 'New York' },
];
constructor(public modalRef: MdbModalRef<ModalComponent>) {}
saveData(): void {
const closeMessage = {
company: this.company,
office: this.office,
employees: this.employees,
international: this.international
};
this.modalRef.close(closeMessage)
}
}
Inputs example
<div class="d-flex justify-content-end mb-4">
<mdb-form-control>
<input
mdbInput
type="text"
class="form-control"
id="search-input"
[disabled]="editElementIndex !== -1"
(keyup)="search($event)"
/>
<label mdbLabel class="form-label" for="search-input">Search</label>
</mdb-form-control>
<button
MdbRiple
class="btn btn-primary btn-sm ms-3"
[disabled]="editElementIndex !== -1"
(click)="addRow=true"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div class="datatable table-editor mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[sort]="sort"
[pagination]="pagination"
>
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr *ngIf="addRow"
scope="row"
>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="company" />
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<mdb-select [(ngModel)]="office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="employees" />
</mdb-form-control>
</td>
<td>
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="international"
/>
</div>
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addNewRow()"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addRow=false"
>
<i class="fa fa-ban"></i>
</button>
</td>
</tr>
<tr
*ngFor="let data of table.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.company }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.company"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.office }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<mdb-select [(ngModel)]="data.office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Office</label>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.employees }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="data.employees"/>
</mdb-form-control>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex !== index">
{{ data.international }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="data.international"
/>
</div>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex === -1 || editElementIndex !== index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=index"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onDeleteClick(data)"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-trash-alt"></i>
</button>
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-ban"></i>
</button>
</ng-container>
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #pagination [entries]="5"></mdb-table-pagination>
</div>
import { Component, ViewChild } from '@angular/core';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
export interface Person {
company: string,
office: string,
employees: number,
international: boolean,
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
editElementIndex = -1;
addRow = false;
company = '';
office = 'Warsaw';
employees = 1;
international = false;
options = [
{ value: 'London', label: 'London' },
{ value: 'Warsaw', label: 'Warsaw' },
{ value: 'New York', label: 'New York' },
];
headers = ['Company', 'Office', 'Employees', 'International'];
dataSource: Person[] = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
constructor() {}
search(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value;
this.table.search(searchTerm);
}
addNewRow() {
const newRow: Person = {
company: this.company,
office: this.office,
employees: this.employees,
international: this.international
}
this.dataSource = [...this.dataSource, {...newRow}];
this.company = '';
this.office = 'Warsaw';
this.employees = 1;
this.international = false;
this.addRow = false;
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource]
}
}
Disable edit
<div class="d-flex justify-content-end mb-4">
<mdb-form-control>
<input
mdbInput
type="text"
class="form-control"
id="search-input"
[disabled]="editElementIndex !== -1"
(keyup)="search($event)"
/>
<label mdbLabel class="form-label" for="search-input">Search</label>
</mdb-form-control>
<button
MdbRiple
class="btn btn-primary btn-sm ms-3"
[disabled]="editElementIndex !== -1"
(click)="addRow=true"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div class="datatable table-editor mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[sort]="sort"
[pagination]="pagination"
>
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr *ngIf="addRow"
scope="row"
>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="company"/>
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<mdb-select [(ngModel)]="office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="employees"/>
</mdb-form-control>
</td>
<td>
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="international"
/>
</div>
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addNewRow()"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addRow=false"
>
<i class="fa fa-ban"></i>
</button>
</td>
</tr>
<tr
*ngFor="let data of table.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.company }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.company" disabled/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.office }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<mdb-select [(ngModel)]="data.office" [disabled]="true">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Office</label>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.employees }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="data.employees" disabled/>
</mdb-form-control>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex !== index">
{{ data.international }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="data.international"
disabled
/>
</div>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex === -1 || editElementIndex !== index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=index"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onDeleteClick(data)"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-trash-alt"></i>
</button>
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-ban"></i>
</button>
</ng-container>
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #pagination [entries]="5"></mdb-table-pagination>
</div>
import { Component, ViewChild } from '@angular/core';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
export interface Person {
company: string;
office: string;
employees: number;
international: boolean;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
editElementIndex = -1;
addRow = false;
company = '';
office = 'Warsaw';
employees = 1;
international = false;
options = [
{ value: 'London', label: 'London' },
{ value: 'Warsaw', label: 'Warsaw' },
{ value: 'New York', label: 'New York' },
];
headers = ['Company', 'Office', 'Employees', 'International'];
dataSource: Person[] = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
constructor() {}
search(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value;
this.table.search(searchTerm);
}
addNewRow() {
const newRow: Person = {
company: this.company,
office: this.office,
employees: this.employees,
international: this.international
}
this.dataSource = [...this.dataSource, { ...newRow }];
this.company = '';
this.office = 'Warsaw';
this.employees = 1;
this.international = false;
this.addRow = false;
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource];
}
}
Confirm delete
Note: This example use Popconfirm. Remember to import them.
<div class="d-flex justify-content-end mb-4">
<mdb-form-control>
<input
mdbInput
type="text"
class="form-control"
id="search-input"
[disabled]="editElementIndex !== -1"
(keyup)="search($event)"
/>
<label mdbLabel class="form-label" for="search-input">Search</label>
</mdb-form-control>
<button
MdbRiple
class="btn btn-primary btn-sm ms-3"
[disabled]="editElementIndex !== -1"
(click)="addRow=true"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div class="datatable table-editor mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[sort]="sort"
[pagination]="pagination"
>
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr *ngIf="addRow"
scope="row"
>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="company"/>
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<mdb-select [(ngModel)]="office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="employees"/>
</mdb-form-control>
</td>
<td>
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="international"
/>
</div>
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addNewRow()"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addRow=false"
>
<i class="fa fa-ban"></i>
</button>
</td>
</tr>
<tr
*ngFor="let data of table.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.company }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.company"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.office }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<mdb-select [(ngModel)]="data.office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Office</label>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.employees }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="data.employees"/>
</mdb-form-control>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex !== index">
{{ data.international }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="data.international"
/>
</div>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex === -1 || editElementIndex !== index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=index"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
#target
(click)="openPopconfirm(target, data)"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-trash-alt"></i>
</button>
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-ban"></i>
</button>
</ng-container>
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #pagination [entries]="5"></mdb-table-pagination>
</div>
import { Component, ViewChild } from '@angular/core';
import {
MdbPopconfirmRef,
MdbPopconfirmService,
} from 'mdb-angular-ui-kit/popconfirm';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
import { PopconfirmComponent } from 'path-to-your-popconfirm-component';
export interface Person {
company: string;
office: string;
employees: number;
international: boolean;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;
editElementIndex = -1;
addRow = false;
company = '';
office = 'Warsaw';
employees = 1;
international = false;
headers = ['Company', 'Office', 'Employees', 'International'];
options = [
{ value: 'London', label: 'London' },
{ value: 'Warsaw', label: 'Warsaw' },
{ value: 'New York', label: 'New York' },
];
dataSource: Person[] = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
constructor(private popconfirmService: MdbPopconfirmService) {}
search(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value;
this.table.search(searchTerm);
}
addNewRow() {
const newRow: Person = {
company: this.company,
office: this.office,
employees: this.employees,
international: this.international
}
this.dataSource = [...this.dataSource, { ...newRow }];
this.company = '';
this.office = 'Warsaw';
this.employees = 1;
this.international = false;
this.addRow = false;
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource];
}
openPopconfirm(target: HTMLElement, data: Person) {
this.popconfirmRef = this.popconfirmService.open(
PopconfirmComponent,
target,
{ data: { data: data } }
);
this.popconfirmRef.onClose.subscribe(() => {
this.editElementIndex = -1;
});
this.popconfirmRef.onConfirm.subscribe((data) => {
this.onDeleteClick(data);
});
}
}
<div class="popconfirm-popover shadow-4">
<div class="popconfirm">
<p class="popconfirm-message">
<span class="popconfirm-message-text">Are you sure you want to delete this entry?</span>
</p>
<div class="popconfirm-buttons-container">
<button (click)="popconfirmRef.close()" type="button" aria-label="Cancel" class="btn btn-flat btn-sm">
Cancel
</button>
<button (click)="popconfirmRef.confirm(data)" type="button" aria-label="Confirm" class="btn btn-primary btn-sm">
Delete
</button>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { MdbPopconfirmRef } from 'mdb-angular-ui-kit/popconfirm';
@Component({
selector: 'app-popconfirm',
templateUrl: './popconfirm.component.html',
})
export class PopconfirmComponent implements OnInit {
data: any = null;
constructor(public popconfirmRef: MdbPopconfirmRef<PopconfirmComponent>) {}
ngOnInit(): void {
}
}
Advanced Search
in:
<div class="d-flex justify-content-between mb-4">
<div class="d-flex">
<mdb-form-control>
<input
mdbInput
type="text"
class="form-control"
id="search-input"
[disabled]="editElementIndex !== -1"
#searchInput
/>
<label mdbLabel class="form-label" for="search-input">Search</label>
</mdb-form-control>
<div class="px-3 mt-1">in:</div>
<mdb-form-control>
<mdb-select [(ngModel)]="selectValue" [disabled]="editElementIndex !== -1">
<mdb-option [value]="'all'">All columns</mdb-option>
<mdb-option [value]="'company'">Company</mdb-option>
<mdb-option [value]="'office'">Office</mdb-option>
</mdb-select>
</mdb-form-control>
<button
class="btn btn-outline-primary btn-sm mx-2"
(click)="search(searchInput.value)"
[disabled]="editElementIndex !== -1"
>
<i class="fa fa-search"></i>
</button>
</div>
<button
MdbRiple
class="btn btn-primary btn-sm ms-3"
[disabled]="editElementIndex !== -1"
(click)="addRow=true"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div class="datatable table-editor mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[sort]="sort"
[pagination]="pagination"
[filterFn]="filterFn"
>
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr *ngIf="addRow"
scope="row"
>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="company" />
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<mdb-select [(ngModel)]="office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Office</label>
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="employees" />
</mdb-form-control>
</td>
<td>
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="international"
/>
</div>
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addNewRow()"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addRow=false"
>
<i class="fa fa-ban"></i>
</button>
</td>
</tr>
<tr
*ngFor="let data of table.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.company }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.company"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.office }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<mdb-select [(ngModel)]="data.office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Office</label>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.employees }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="data.employees"/>
</mdb-form-control>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex !== index">
{{ data.international }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="data.international"
/>
</div>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex === -1 || editElementIndex !== index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=index"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onDeleteClick(data)"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-trash-alt"></i>
</button>
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-ban"></i>
</button>
</ng-container>
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #pagination [entries]="5"></mdb-table-pagination>
</div>
import { Component, ViewChild } from '@angular/core';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
export interface Person {
company: string;
office: string;
employees: number;
international: boolean;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
editElementIndex = -1;
addRow = false;
selectValue = 'all';
company = '';
office = 'Warsaw';
employees = 1;
international = false;
options = [
{ value: 'London', label: 'London' },
{ value: 'Warsaw', label: 'Warsaw' },
{ value: 'New York', label: 'New York' },
];
searchOptions = [
{ value: 'all', label: 'All columns' },
{ value: 'company', label: 'Company' },
{ value: 'office', label: 'Office' }
]
headers = ['Company', 'Office', 'Employees', 'International'];
dataSource: Person[] = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
constructor() {}
search(value: string): void {
let searchTerm = value;
if (this.selectValue !== 'all') {
searchTerm = `${value} in: ${this.selectValue}`;
}
this.table.search(searchTerm);
}
filterFn(data: any, searchTerm: string): boolean {
// tslint:disable-next-line: prefer-const
let [phrase, columns] = searchTerm.split(' in:').map((str) => str.trim());
return Object.keys(data).some((key: any) => {
if (columns?.length) {
let result;
columns.split(',').forEach((column) => {
if (
column.toLowerCase().trim() === key.toLowerCase() &&
data[key].toLowerCase().includes(phrase.toLowerCase())
) {
result = true;
}
});
return result;
}
if (data[key] && !columns?.length) {
return JSON.stringify(data)
.toLowerCase()
.includes(phrase.toLowerCase());
}
return
});
}
addNewRow() {
const newRow: Person = {
company: this.company,
office: this.office,
employees: this.employees,
international: this.international
}
this.dataSource = [...this.dataSource, { ...newRow }];
this.company = '';
this.office = 'Warsaw';
this.employees = 1;
this.international = false;
this.addRow = false;
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource];
}
}
Async data
<div class="d-flex justify-content-between mb-4">
<button class="btn btn-primary btn-sm" (click)="loadData()">
Load data
</button>
<div class="d-flex">
<mdb-form-control>
<input
mdbInput
type="text"
class="form-control"
id="search-input"
[disabled]="editElementIndex !== -1 || loading"
(keyup)="search($event)"
/>
<label mdbLabel class="form-label" for="search-input">Search</label>
</mdb-form-control>
<button
MdbRiple
class="btn btn-primary btn-sm ms-3"
[disabled]="editElementIndex !== -1 || loading"
(click)="addRow=true"
>
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<hr />
<div class="datatable table-editor mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#asyncDataExampleTable="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[responsive]="true"
[pagination]="pagination"
[sort]="sort"
>
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body" *ngIf="!loading">
<tr *ngIf="addRow"
scope="row"
>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="company" />
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="email" />
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="name" />
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="phone" />
</mdb-form-control>
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addNewRow()"
>
<i class="fa fa-check"></i>
</button>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addRow=false"
>
<i class="fa fa-ban"></i>
</button>
</td>
</tr>
<tr
*ngFor="let data of asyncDataExampleTable.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.company.name }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.company.name"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.email }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.email"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.name }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.name"/>
</mdb-form-control>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex !== index">
{{ data.phone }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.phone"/>
</mdb-form-control>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex === -1 || editElementIndex !== index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=index"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onDeleteClick(data)"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-trash-alt"></i>
</button>
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-ban"></i>
</button>
</ng-container>
</td>
</tr>
</tbody>
</table>
<ng-container *ngIf="loading">
<div class="datatable-loader bg-light">
<span class="datatable-loader-inner">
<span class="datatable-progress bg-primary"></span>
</span>
</div>
<p class="text-center text-muted my-4">Loading results...</p>
</ng-container>
<mdb-table-pagination #pagination [entries]="10"></mdb-table-pagination>
</div>
import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
import { tap, take } from 'rxjs/operators';
interface Person {
company: {
name: string
};
email: string;
name: string;
phone: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
dataUrl = 'https://jsonplaceholder.typicode.com/users';
loading = true;
editElementIndex = -1;
addRow = false;
company = {
name: ''
}
email = '';
name = '';
phone = '';
headers = ['Company', 'Email', 'Name', 'Phone'];
dataSource: Person[] = [];
constructor(private _http: HttpClient) {}
loadData() {
this.getData().pipe(take(1)).subscribe((data: any) => {
this.dataSource = data;
})
}
getData() {
return this._http.get<any>(this.dataUrl).pipe(
tap(() => (this.loading = false))
)
}
search(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value;
this.table.search(searchTerm);
}
addNewRow() {
const newRow: Person = {
company: this.company,
email: this.email,
name: this.name,
phone: this.phone
}
this.dataSource = [...this.dataSource, {...newRow}];
this.company.name = '';
this.email = '';
this.name = '';
this.phone = '';
this.addRow = false;
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource]
}
}
Custom rows
M.B.
(5 Avenue 26, New York)
Berkley & Clark
(43th Street 12, New York)
D&D Inc.
(14 Street 67, New York)
Thomas & Co.
(2 Avenue 54, New York)
<div id="template_list" class="row">
<div class="col-md-3 col-sm-6 p-3">
<h4>M.B.</h4>
<p>(5 Avenue 26, New York)</p>
<button
class="btn btn-primary btn-sm"
(click)="loadCustomRowMB()"
[disabled]="customRowMBLoaded || addRow"
>
{{ customRowMBLoaded ? 'Loaded' : 'Load into table'}}
</button>
</div>
<div class="col-md-3 col-sm-6 p-3">
<h4>Berkley & Clark</h4>
<p>(43th Street 12, New York)</p>
<button
class="btn btn-primary btn-sm"
(click)="loadCustomRowBarkleyAndClark()"
[disabled]="customRowBarkleyAndClarkLoaded || addRow"
>
{{ customRowBarkleyAndClarkLoaded ? 'Loaded' : 'Load into table'}}
</button>
</div>
<div class="col-md-3 col-sm-6 p-3">
<h4>D&D Inc.</h4>
<p>(14 Street 67, New York)</p>
<button
class="btn btn-primary btn-sm"
(click)="loadCustomRowDAndDInc()"
[disabled]="customRowDAndDIncLoaded || addRow"
>
{{ customRowDAndDIncLoaded ? 'Loaded' : 'Load into table'}}
</button>
</div>
<div class="col-md-3 col-sm-6 p-3">
<h4>Thomas & Co.</h4>
<p>(2 Avenue 54, New York)</p>
<button
class="btn btn-primary btn-sm"
(click)="loadCustomRowThomasAndCo()"
[disabled]="customRowThomasAndCoLoaded || addRow"
>
{{ customRowThomasAndCoLoaded ? 'Loaded' : 'Load into table'}}
</button>
</div>
</div>
<hr />
<div class="datatable table-editor mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[sort]="sort"
>
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr *ngIf="addRow"
scope="row"
>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="newRow.company"/>
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="newRow.address"/>
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="newRow.city"/>
</mdb-form-control>
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addNewRow()"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addRow=false"
>
<i class="fa fa-ban"></i>
</button>
</td>
</tr>
<tr
*ngFor="let data of table.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.company }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.company"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.address }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.address"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.city }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.city"/>
</mdb-form-control>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex === -1 || editElementIndex !== index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=index"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onDeleteClick(data)"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-trash-alt"></i>
</button>
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-ban"></i>
</button>
</ng-container>
</td>
</tr>
</tbody>
</table>
</div>
import { Component, ViewChild } from '@angular/core';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
export interface Person {
company: string,
address: string,
city: string,
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
editElementIndex = -1;
addRow = false;
customRowMBLoaded = false;
customRowBarkleyAndClarkLoaded = false;
customRowDAndDIncLoaded = false;
customRowThomasAndCoLoaded = false;
newRow = {
company: '',
address: '',
city: '',
};
headers = ['Company', 'Address', 'City',];
dataSource: Person[] = [
{ company: 'Smith & Johnson', address: 'Park Lane 2', city: 'London' },
{ company: 'P.J. Company', address: 'Oak Street 7', city: 'Aberdeen' },
{ company: 'Food & Wine', address: 'Netherhall Gardens 3', city: 'Hampstead' },
{ company: 'IT Service', address: 'Warwick Road 14', city: 'London' },
{ company: 'A. Jonson Gallery', address: 'Oaklands Avenue 2', city: 'London' },
{ company: 'F.A. Architects', address: 'Frognal Way 7', city: 'Hampstead' },
];
constructor() {}
search(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value;
this.table.search(searchTerm);
}
addNewRow() {
this.dataSource = [...this.dataSource, {...this.newRow}];
this.addRow = false;
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource]
}
loadCustomRowMB() {
const row = {
company: "M.B.",
address: "5 Avenue 26",
city: "New York",
}
this.customRowMBLoaded = true;
this.addRow = true;
this.newRow = row;
}
loadCustomRowBarkleyAndClark() {
const row = {
company: "Berkley & Clark",
address: "43th Street 12",
city: "New York",
}
this.customRowBarkleyAndClarkLoaded = true;
this.addRow = true;
this.newRow = row;
}
loadCustomRowDAndDInc() {
const row = {
company: "D&D Inc.",
address: "14 Street 67",
city: "New York",
}
this.customRowDAndDIncLoaded = true;
this.addRow = true;
this.newRow = row;
}
loadCustomRowThomasAndCo() {
const row = {
company: "Thomas & Co.",
address: "2 Avenue 54",
city: "New York",
}
this.customRowThomasAndCoLoaded = true;
this.addRow = true;
this.newRow = row;
}
}
Notifications
Note: This example use Alerts Remember to import them.
<div class="d-flex justify-content-end mb-4">
<mdb-form-control>
<input
mdbInput
type="text"
class="form-control"
id="search-input"
[disabled]="editElementIndex !== -1"
(keyup)="search($event)"
/>
<label mdbLabel class="form-label" for="search-input">Search</label>
</mdb-form-control>
<button
MdbRiple
class="btn btn-primary btn-sm ms-3"
[disabled]="editElementIndex !== -1"
(click)="addRow=true"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div class="datatable table-editor mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[sort]="sort"
[pagination]="pagination"
>
<thead class="datatable-header">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr *ngIf="addRow"
scope="row"
>
<td>
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="company" />
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<mdb-select [(ngModel)]="office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
</mdb-form-control>
</td>
<td>
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="employees" />
</mdb-form-control>
</td>
<td>
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="international"
/>
</div>
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addNewRow()"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="addRow=false"
>
<i class="fa fa-ban"></i>
</button>
</td>
</tr>
<tr
*ngFor="let data of table.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.company }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="text" class="form-control" [(ngModel)]="data.company"/>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.office }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<mdb-select [(ngModel)]="data.office">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Office</label>
</mdb-form-control>
</ng-container>
</td>
<td style="min-width: 250px; max-width: 250px">
<ng-container *ngIf="editElementIndex !== index">
{{ data.employees }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<mdb-form-control>
<input mdbInput type="number" class="form-control" [(ngModel)]="data.employees"/>
</mdb-form-control>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex !== index">
{{ data.international }}
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<div class="form-check ms-1 mt-1">
<input
mdbCheckbox
class="form-check-input"
type="checkbox"
[(ngModel)]="data.international"
/>
</div>
</ng-container>
</td>
<td>
<ng-container *ngIf="editElementIndex === -1 || editElementIndex !== index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=index"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onDeleteClick(data)"
[disabled]="editElementIndex !== -1 && editElementIndex !== index"
>
<i class="fa fa-trash-alt"></i>
</button>
</ng-container>
<ng-container *ngIf="editElementIndex === index">
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onEditClick(data)"
>
<i class="fa fa-check"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="editElementIndex=-1"
>
<i class="fa fa-ban"></i>
</button>
</ng-container>
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #pagination [entries]="5"></mdb-table-pagination>
</div>
import { Component, ViewChild } from '@angular/core';
import {
MdbNotificationService,
MdbNotificationRef,
} from 'mdb-angular-ui-kit/notification';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
import { NotificationComponent } from 'path-to-your-notification-component';
export interface Person {
company: string;
office: string;
employees: number;
international: boolean;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
notificationRef: MdbNotificationRef<NotificationComponent> | null = null;
editElementIndex = -1;
addRow = false;
company = '';
office = 'Warsaw';
employees = 1;
international = false;
options = [
{ value: 'London', label: 'London' },
{ value: 'Warsaw', label: 'Warsaw' },
{ value: 'New York', label: 'New York' },
];
headers = ['Company', 'Office', 'Employees', 'International'];
dataSource: Person[] = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
constructor(private notificationService: MdbNotificationService) {}
search(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value;
this.table.search(searchTerm);
}
addNewRow() {
const newRow = {
company: this.company,
office: this.office,
employees: this.employees,
international: this.international,
};
this.dataSource = [...this.dataSource, { ...newRow }];
this.openAlert(newRow, 'add');
this.company = '';
this.office = 'Warsaw';
this.employees = 1;
this.international = false;
this.addRow = false;
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource];
this.openAlert(data, 'delete');
}
onEditClick(data: Person) {
this.editElementIndex = -1;
this.openAlert(data, 'edit');
}
openAlert(data: Person, action: 'add' | 'delete' | 'edit') {
const options = {
action: action,
rowData: `${data.company} (${data.office})`,
};
this.notificationRef = this.notificationService.open(
NotificationComponent,
{ data: options, autohide: true, delay: 1000 }
);
}
}
<div class="alert alert-{{color}}" role="alert">
<strong>{{ actionText }}</strong> {{ rowData }}
</div>
import { Component, OnInit } from '@angular/core';
import { MdbNotificationRef } from 'mdb-angular-ui-kit/notification';
@Component({
selector: 'app-notification',
templateUrl: './notification.component.html',
styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit {
action: 'add' | 'delete' | 'edit' | null = null;
rowData: string | null = null;
color: string | null = null;
actionText: string | null = null;
constructor(public notificationRef: MdbNotificationRef<NotificationComponent>) {}
ngOnInit(): void {
switch (this.action) {
case 'add':
this.color = 'success'
this.actionText = 'New entry:'
break;
case 'delete':
this.color = 'danger'
this.actionText = 'Deleted entry:'
break;
case 'edit':
this.color = 'primary'
this.actionText = 'Updated entry:'
break;
default:
break;
}
}
}
Dark
Note: This example use Modal. Remember to import them.
| Company | Address | Employees |
|---|---|---|
| Smith & Johnson | Park Lane 2, London | 30 |
| P.J. Company | Oak Street 7, Aberdeen | 80 |
| Food & Wine | Netherhall Gardens 3, Hampstead | 12 |
| IT Service | Warwick Road 14, London | 17 |
| A. Jonson Gallery | Oaklands Avenue 2, London | 4 |
| F.A. Architects | Frognal Way 7, Hampstead | 4 |
<section class="p-4 bg-dark">
<div class="d-flex justify-content-end mb-4">
<mdb-form-control class="form-white">
<input
mdbInput
type="text"
class="form-control"
id="search-input"
(keyup)="search($event)"
/>
<label mdbLabel class="form-label" for="search-input">Search</label>
</mdb-form-control>
<button
MdbRiple
class="btn btn-primary btn-sm ms-3"
(click)="openModal('add')"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div class="datatable table-editor bg-dark dark text-white border-white mt-4">
<table
class="table datatable-table"
mdbTable
mdbTableSort
#table="mdbTable"
#sort="mdbTableSort"
[dataSource]="dataSource"
[sort]="sort"
[pagination]="pagination"
>
<thead class="datatable-header text-white">
<tr>
<th
*ngFor="let header of headers"
[mdbTableSortHeader]="header"
scope="col"
>
{{ header | titlecase }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="datatable-body text-white">
<tr
*ngFor="let data of table.data; let index = index"
scope="row"
>
<td style="min-width: 250px; max-width: 250px">
{{ data.company }}
</td>
<td style="min-width: 250px; max-width: 250px">
{{ data.address }}
</td>
<td style="min-width: 250px; max-width: 250px">
{{ data.employees }}
</td>
<td>
<button
class="me-2 m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="openModal('edit', data)"
>
<i class="fa fa-edit"></i>
</button>
<button
class="m-0 p-0 shadow-0 btn btn-lg text-dark"
(click)="onDeleteClick(data)"
>
<i class="fa fa-trash-alt"></i>
</button>
</td>
</tr>
</tbody>
</table>
<mdb-table-pagination #pagination [entries]="5"></mdb-table-pagination>
</div>
</section>
import { Component, ViewChild } from '@angular/core';
import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';
import { MdbTableDirective } from 'mdb-angular-ui-kit/table';
import { ModalComponent } from 'your-path-to-modal-component;
export interface Person {
company: string,
address: string,
employees: number,
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('table') table!: MdbTableDirective<Person>;
modalRef: MdbModalRef<ModalComponent> | null = null;
newRow = {
company: '',
address: '',
employees: 1,
};
headers = ['Company', 'Address', 'Employees'];
dataSource: Person[] = [
{
company: 'Smith & Johnson',
address: 'Park Lane 2, London',
employees: 30,
},
{
company: 'P.J. Company',
address: 'Oak Street 7, Aberdeen',
employees: 80,
},
{
company: 'Food & Wine',
address: 'Netherhall Gardens 3, Hampstead',
employees: 12,
},
{
company: 'IT Service',
address: 'Warwick Road 14, London ',
employees: 17,
},
{
company: 'A. Jonson Gallery',
address: 'Oaklands Avenue 2, London ',
employees: 4,
},
{
company: 'F.A. Architects',
address: 'Frognal Way 7, Hampstead ',
employees: 4,
},
];
constructor(private modalService: MdbModalService) {}
search(event: Event): void {
const searchTerm = (event.target as HTMLInputElement).value;
this.table.search(searchTerm);
}
openModal(mode: 'add' | 'edit', data?: Person) {
this.modalRef = this.modalService.open(ModalComponent, { data: {
modalTitle: mode === 'edit' ? 'Edit item' : 'New item',
company: data ? data.company : '',
address: data ? data.address : '',
employees: data ? data.employees : 1,
}})
this.modalRef.onClose.subscribe((modalData: Person) => {
if (!modalData) {
return;
}
if (mode === 'add') {
this.dataSource = [...this.dataSource, {...modalData}];
} else if (mode === 'edit' && data) {
const index = this.dataSource.indexOf(data)
this.dataSource[index] = modalData;
this.dataSource = [...this.dataSource]
}
});
}
onDeleteClick(data: Person) {
const index = this.dataSource.indexOf(data);
this.dataSource.splice(index, 1);
this.dataSource = [...this.dataSource]
}
}
<div class="modal-header bg-dark text-white">
<h5 class="modal-title" id="exampleModalLabel">{{modalTitle}}</h5>
<button
type="button"
class="btn-close"
aria-label="Close"
(click)="modalRef.close()"
></button>
</div>
<div class="modal-body bg-dark text-white">
<div class="my-4 table-editor_input-wrapper">
<mdb-form-control class="form-white">
<input mdbInput type="text" id="company-input" class="form-control" [(ngModel)]="company" />
<label mdbLabel class="form-label" for="company-input">Company</label>
</mdb-form-control>
</div>
<div class="my-4 table-editor_input-wrapper">
<mdb-form-control class="form-white">
<input mdbInput type="text" id="address-input" class="form-control" [(ngModel)]="address" />
<label mdbLabel class="form-label" for="address-input">Address</label>
</mdb-form-control>
</div>
<div class="my-4 table-editor_input-wrapper">
<mdb-form-control class="form-white">
<input mdbInput type="number" id="employees-input" class="form-control" [(ngModel)]="employees"/>
<label mdbLabel class="form-label" for="employees-input">Employees</label>
</mdb-form-control>
</div>
</div>
<div class="modal-footer bg-dark text-white">
<button type="button" class="shadow-0 btn btn-md btn-outline-primary" (click)="modalRef.close()">
Cancel
</button>
<button type="button" class="shadow-0 btn btn-md btn-primary" (click)="saveData()">Save</button>
</div>
import { Component } from '@angular/core';
import { MdbModalRef } from 'mdb-angular-ui-kit/modal';
@Component(
{ selector: 'app-modal',
templateUrl: './modal.component.html',
})
export class ModalComponent {
modalTitle: string | null = null;
company: string | null = null;
address: string | null = null;
employees: string | null = null;
options = [
{ value: 'London', label: 'London' },
{ value: 'Warsaw', label: 'Warsaw' },
{ value: 'New York', label: 'New York' },
];
constructor(public modalRef: MdbModalRef<ModalComponent>) {}
saveData(): void {
const closeMessage = {
company: this.company,
address: this.address,
employees: this.employees,
};
this.modalRef.close(closeMessage)
}
}