Angular Datatables - - Bootstrap 4 & Material Design

        
            
          import { FormsModule } from '@angular/forms';
        
        
    

        
            
          import { HttpModule } from '@angular/http';
        
        
    

        
            
            import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
            import { MdbTableDirective, MdbTablePaginationComponent } from "ng-uikit-pro-standard";
            import { HttpClient } from "@angular/common/http";
      
            @Component({
              selector: 'remote-tables',
              templateUrl: './remote-tables.component.html',
              styleUrls: ['./remote-tables.component.scss']
            })
            export class RemoteTables implements OnInit, AfterViewInit {
              @ViewChild(MdbTableDirective, { static: true }) mdbTable: MdbTableDirective;
              @ViewChild(MdbTablePaginationComponent, { static: true }) mdbTablePagination: MdbTablePaginationComponent;
              @ViewChild('row', { static: true }) row: ElementRef;
      
              elements: any = [];
              headElements = ['id', 'first', 'last', 'handle'];
      
              searchText: string = '';
              previous: string;
      
              maxVisibleItems: number = 5;
      
              url = 'https://jsonplaceholder.typicode.com/posts';
      
              constructor(private cdRef: ChangeDetectorRef, private http: HttpClient) { }
      
              @HostListener('input') oninput() {
                this.mdbTablePagination.searchText = this.searchText;
              }
      
              ngOnInit() {
                this.http.get(this.url).subscribe((data: any) => {
                  data.forEach((el: any) => {
                    this.elements.push({
                      id: el.id.toString(),
                      first: el.title,
                      last: el.body,
                      handle: 'Handle ' + el.id.toString()
                    });
                  });
                  this.mdbTable.setDataSource(this.elements);
                });

                this.elements = this.mdbTable.getDataSource();
                this.previous = this.mdbTable.getDataSource();
              }
      
              ngAfterViewInit() {
                this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
        
                this.mdbTablePagination.calculateFirstItemIndex();
                this.mdbTablePagination.calculateLastItemIndex();
        
                this.cdRef.detectChanges();
              }
      
              searchItems() {
                const prev = this.mdbTable.getDataSource();
        
                if (!this.searchText) {
                  this.mdbTable.setDataSource(this.previous);
                  this.elements = this.mdbTable.getDataSource();
                }
        
                if (this.searchText) {
                  this.elements = this.mdbTable.searchLocalDataBy(this.searchText);
                  this.mdbTable.setDataSource(prev);
                }
      
                this.mdbTablePagination.calculateFirstItemIndex();
                this.mdbTablePagination.calculateLastItemIndex();
        
                this.mdbTable.searchDataObservable(this.searchText).subscribe(() => {
                  this.mdbTablePagination.calculateFirstItemIndex();
                  this.mdbTablePagination.calculateLastItemIndex();
                });
              }
            }
          
        
    

        
            
          import {ChangeDetectorRef, Component, ElementRef, ViewChild} from '@angular/core';
          import {MdbTableDirective, MdbTablePaginationComponent} from "path-to-mdb-angular";
          import {MDBModalRef, MDBModalService} from "path-to-mdb-angular";
          import {ModalEditComponent} from "./modal-edit/modal-edit.component";

          @Component({
            selector: 'app-root',
            templateUrl: './dynamic-modal-table.component.html',
            styleUrls: ['./dynamic-modal-table.component.scss']
          })
          export class DynamicModalTableComponent {
            @ViewChild(MdbTableDirective, { static: true }) mdbTable: MdbTableDirective;
            @ViewChild(MdbTablePaginationComponent, { static: true }) mdbTablePagination: MdbTablePaginationComponent;
            @ViewChild('row', { static: true }) row: ElementRef;

            elements: any = [];
            headElements = ['id', 'first', 'last', 'handle', 'command'];

            modalRef: MDBModalRef;

            constructor(
            private cdRef: ChangeDetectorRef,
            private modalService: MDBModalService) { }

            ngOnInit() {
              for (let i = 1; i <= 25; i++) {
                this.elements.push({id: i.toString(), first: 'User ' + i, last: 'Last ' + i, handle: 'Handle ' + i});
              }

              this.mdbTable.setDataSource(this.elements);
              this.elements = this.mdbTable.getDataSource();
            }

            ngAfterViewInit() {
              this.mdbTablePagination.setMaxVisibleItemsNumberTo(8);

              this.mdbTablePagination.calculateFirstItemIndex();
              this.mdbTablePagination.calculateLastItemIndex();
              this.cdRef.detectChanges();
            }

            editRow(el: any) {
              const elementIndex = this.elements.findIndex((elem: any) => el === elem);
              const modalOptions = {
                data: {
                  editableRow: el
                }
              };
              this.modalRef = this.modalService.show(ModalEditComponent, modalOptions);
              this.modalRef.content.saveButtonClicked.subscribe((newElement: any) => {
                this.elements[elementIndex] = newElement;
              });
              this.mdbTable.setDataSource(this.elements);
            }

            removeRow(el: any) {
              const elementIndex = this.elements.findIndex((elem: any) => el === elem);
              this.mdbTable.removeRow(elementIndex);
              this.mdbTable.getDataSource().forEach((el: any, index: any) => {
                el.id = (index + 1).toString();
              });
              this.mdbTable.setDataSource(this.elements);
            }
          }
        
        
    

        
            
          import { Component } from '@angular/core';
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            elements: any = [
              {
                id: 1,
                first: 'Mark',
                last: 'Otto',
                handle: '@mdo',
                collapsed: true,
                masterDetail: [{ orderId: 1, orderDate: '24-07-1996', adress: '35 King George' }],
              },
              {
                id: 2,
                first: 'Jacob',
                last: 'Thornton',
                handle: '@fat',
                collapsed: false,
                masterDetail: [{ orderId: 2, orderDate: '04-01-1992', adress: 'Obere Str. 57' }],
              },
              {
                id: 3,
                first: 'Larry',
                last: 'the Bird',
                handle: '@twitter',
                collapsed: false,
                masterDetail: [{ orderId: 3, orderDate: '15-01-1994', adress: 'Kirchgasse 6' }],
              },
            ];
          
            headElements = ['ID', 'First', 'Last', 'Handle'];
            masterHeadElements = ['Order Id', 'Order Date', 'Adress'];
          }
        
        
    

        
            
          .master-button {
            padding: 0.25rem 0.7rem !important;
            font-size: 0.9rem !important;
          }