<div *ngIf="MyDataSource">
      <div class="alert alert-info">
          <strong>RECORDS</strong>
      </div>
      <div class="example-container mat-elevation-z8 data-table">
          <mat-table #Table class="full-width-table" [dataSource]="MyDataSource "  matSort>

              <!-- For ID -->
              <!-- <ng-container matColumnDef="id">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
                  <mat-cell *matCellDef="let row">{{row.id}}</mat-cell>
                </ng-container> -->

                <!-- vehicle_no Column -->
                <ng-container matColumnDef="vehicle_no">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>vehicle_no</mat-header-cell>
                  <mat-cell *matCellDef="let row">{{row.vehicle_no}}</mat-cell>
                </ng-container>

                <!-- challan_no Column -->
                <ng-container matColumnDef="challan_no">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>challan_no</mat-header-cell>
                  <mat-cell *matCellDef="let row">{{row.challan_no}}</mat-cell>
                </ng-container>

                <!-- name Column -->
                <ng-container matColumnDef="name">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>name</mat-header-cell>
                  <mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
                </ng-container>

                <!-- state_name Column -->
                <ng-container matColumnDef="state_name">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>state_name</mat-header-cell>
                  <mat-cell *matCellDef="let row">{{row.state_name}}</mat-cell>
                </ng-container>

                <!-- rto_name Column -->
                <ng-container matColumnDef="rto_name">
                  <mat-header-cell *matHeaderCellDef mat-sort-header>rto_name</mat-header-cell>>
                  <mat-cell *matCellDef="let row">{{row.rto_name}}</mat-cell>
                </ng-container>

              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
          </mat-table>
      </div>
    </div>

MyDataSource: any;
displayedColumns = [ 'vehicle_no', 'challan_no', 'name' ,'state_name', 'rto_name'];

getRecords(event){
  event.preventDefault();
  const target = event.target;


// VALUES SUBMITTED USING FORM-GROUP
 const stateName= this.challanDataFilterForm.get('state_name').value;
 const fuelType= this.challanDataFilterForm.get('fuel').value;
 const optChallanNo= this.challanDataFilterForm.get('challan_no').value;
 const optVehicleNo= this.challanDataFilterForm.get('vehicle_no').value;
 const optDrivingLicense= this.challanDataFilterForm.get('drive').value;
 const optDateTime=this.challanDataFilterForm.get('date_time').value;
 const optOfficerName= this.challanDataFilterForm.get('name').value;
 const optVehicleClass= this.challanDataFilterForm.get('vh_class').value;
 const optStateName= this.challanDataFilterForm.get('state_name1').value;

  this.Auth.getAuthRecords(stateName, fuelType,optChallanNo,optVehicleNo,optDrivingLicense,optDateTime,optOfficerName,optVehicleClass,optStateName)
 .subscribe(
    data => this.MyDataSource = new MatTableDataSource(data)
 );
 }