multiple angular material table in single page pagination issue

import { Component, OnInit, ViewChild, Input, Inject} from '@angular/core';
import { from } from 'rxjs/internal/observable/from';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { DataSource } from '@angular/cdk/collections';
import { arInvoiceHeaderService} from './ar-invoice-header.service';
import { arInvoiceHeaderModel, arInvoiceHeader } from './ar-invoice-header-model';
import { MatSort, MatSortable, MatPaginator,MatTable, MatTableDataSource } from '@angular/material';
import { Injectable } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {animate, state, style, transition, trigger} from '@angular/animations';
import { FormControl } from '@angular/forms';
import { arErrorModel } from './ar-error-model';
import { MatPaginatorModule } from '@angular/material';
@Component({
  selector: 'app-ar-invoice-header',
  templateUrl: './ar-invoice-header.component.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed, void', style({height: '0px', minHeight: '0', display: 'none'})),
      state('expanded', style({height: '*'})),
      transition('* <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
  styleUrls: ['./ar-invoice-header.component.css']
})
@Injectable()
export class ArInvoiceHeaderComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;
  //@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('errorpaginator') errorpaginator: MatPaginator;
 @ViewChild(MatTable) table: MatTable<any>;
 
  isLoading = true;
  noGridData: boolean = false;
  dataSource = new MatTableDataSource(this.dataSource);
  errordataSource = new MatTableDataSource(this.errordataSource);
  //dataSource;
  //errordataSource;
  expandedElement: arInvoiceHeader;
  displayedColumns = ['id','invoiceNumber','status','orgName','setOfBooks','transactionSource','transactionType','errorCodeH','invoiceTotal','lineCount','interfaceFileLineNo','interfaceFileName','interfaceFilePath','createdBy','creationTimestamp'];
  errordisplayedColumns = ['id','invoiceNumber','lineNumber','interfaceFileName','interfaceFilePath','errorDescription'];


  constructor(private arinvoiceheaderService: arInvoiceHeaderService) {

   }

  ngOnInit() { 

    this.reloadList();
    this.arErrorList();
  }




//First table data loading function (currently working well with pagination )
  reloadList() {
    this.arinvoiceheaderService.getArInvoiceHeader().subscribe(results => {
      console.log(results);
      if (!results) {
       // return;
       alert("ERRor");
      }
    
      this.dataSource = new MatTableDataSource(results['ArInvoiceHeaders']);
      if(results.ArInvoiceHeaders.length > 0)
      {
       
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.isLoading = false;
        this.noGridData = false;
      }
      else{
        this.noGridData = true;
        this.isLoading = false;
      }
      
    });
  }

//seconf table data loading function (all data loading without pagination)
  arErrorList(){
    this.arinvoiceheaderService.getArErrorDetails().subscribe(results => {
      console.log(results);
      if (!results) {
        return;
      }
      this.errordataSource = new MatTableDataSource(results['ArInterfaceErrors']);

      this.errordataSource.errorpaginator = this.errorpaginator;
      this.errordataSource.sort = this.sort;


    });
  }
}