title: How to bring a multi-datatable with pagination,sorting,filtering in single component file in angular 7
body: <p>I am trying to get multi-table with pagination, sorting, filtering in a single component.</p>
  
  <p>I can get pagination for one table, unable to get pagination for multiple tables in a single component.</p>
  
  <p>I also received the data from all tables. I am receiving the data from the backend so it takes a few seconds.</p>
  
  <p>I Couldn't find any multi-data table example in angular7 material</p>
  
  <p>This is my code</p>
  
  <pre><code>  displayedColumns: string[] = ['name', 'id', 'products_count', 'domain'];
    public dataSource = new MatTableDataSource&lt;PeriodicElement&gt;(this.ELEMENT_DATA);
  
    public NONAR_ELEMENT_DATA: NonARElement[];
    displayedColumns1: string[] = ['pro_id', 'name', 'd_image'];
    public dataSource1 = new MatTableDataSource&lt;NonARElement&gt;(this.NONAR_ELEMENT_DATA);
  
  
    @ViewChild('paginator') paginator: MatPaginator;
    @ViewChild('paginator1', { read: MatPaginator }) paginator1: MatPaginator;
  
  
  
  _setDataSource(indexNumber) {
      console.log("indexNumber", indexNumber)
      setTimeout(() =&gt; {
        switch (indexNumber) {
          case 0:
            !this.dataSource1.paginator ? this.dataSource1.paginator = this.paginator1 : null;
            console.log("this.dataSource-NON AR.paginator", this.dataSource.paginator)
  
            break;
          case 1:
            !this.dataSource.paginator ? this.dataSource.paginator = this.paginator : null;
            console.log("this.dataSource-Storelist.paginator", this.dataSource1.paginator)
        }
      },1000);
    }```
  </code></pre>