Create grouped column mat-table

Question

I am using mat-table for showing data in table format. I wanted to display the data in grouped column format as displayed in the following image. I've same columns in the first group & second group as well. I tried but not able to achieve the same. it is showing only one column. any solution will be very useful. thank you.

import {Component} from '@angular/core';

export interface PeriodicElement {
  symbol: string;
  ol: {
    put: number,
    call: number,
    ratio: number
  },
  volume: {
     put: number,
    call: number,
    ratio: number
  } 
}

const ELEMENT_DATA: PeriodicElement[] = [
  {symbol: 'Hydrogen', 
  ol: {
    put: 777,
    call: 111,
    ratio: 111
  },
   volume: {
      put: 777,
    call: 111,
    ratio: 111
  } 
  },

   {symbol: 'Hydrogen', 
  ol: {
    put: 777,
    call: 111,
    ratio: 111
  },
   volume: {
      put: 777,
    call: 111,
    ratio: 111
  } 
  },

   {symbol: 'Hydrogen', 
  ol: {
    put: 777,
    call: 111,
    ratio: 111
  },
   volume: {
      put: 777,
    call: 111,
    ratio: 111
  } 
  },
   {symbol: 'Hydrogen', 
  ol: {
    put: 777,
    call: 111,
    ratio: 111
  },
   volume: {
      put: 777,
    call: 111,
    ratio: 111
  } 
  },
   {symbol: 'Hydrogen', 
  ol: {
    put: 777,
    call: 111,
    ratio: 111
  },
   volume: {
      put: 777,
    call: 111,
    ratio: 111
  } 
  }
];

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['symbol', 'ol', 'volume'];

  dataSource = ELEMENT_DATA;
}

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>

    <ng-container matColumnDef="ol">
        <th mat-header-cell *matHeaderCellDef> OL </th>
        <td mat-cell *matCellDef="let element"> {{element.ol.put}} </td>

        <td mat-cell *matCellDef="let element"> {{element.ol.call}} </td>

        <td mat-cell *matCellDef="let element"> {{element.ol.ratio}} </td>
    </ng-container>

    <ng-container matColumnDef="volume">
        <th mat-header-cell *matHeaderCellDef> Volume</th>
        <td mat-cell *matCellDef="let element"> {{element.volume.put}} </td>

        <td mat-cell *matCellDef="let element"> {{element.volume.call}} </td>

        <td mat-cell *matCellDef="let element"> {{element.volume.ratio}} </td>

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

screenshot