Блог

Главная - Вопросы по программированию - Создание таблицы сгруппированных столбцов

Создание таблицы сгруппированных столбцов

#javascript #angular #angular-material #angular-datatables #angular-material-table

#javascript #угловой #angular-материал #angular-таблицы данных #угловой-материал-таблица

Вопрос:

Я использую mat-table для отображения данных в табличном формате. Я хотел отобразить данные в формате сгруппированных столбцов, как показано на следующем рисунке. У меня такие же столбцы и в первой группе, и во второй группе. Я пытался, но не смог добиться того же. он показывает только один столбец. любое решение будет очень полезным. Спасибо.

 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>

скриншот

Комментарии:

1. вам нужен вывод, как на прикрепленной картинке?

2. да, то же самое, чего я хотел добиться