dnet-applications/frontends/dnet-is-application/src/app/info/info.component.ts

import { Component } from '@angular/core';
import { ISService } from '../common/is.service';
import { MatTableDataSource } from '@angular/material/table';
import { Module } from '../common/is.model';

export interface KeyValueDatasource {
  name: string;
  datasource: MatTableDataSource<any>;
}

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css']
})
export class InfoComponent {
  
  kvDatasources:KeyValueDatasource[] = [];
  moduleDatasource:MatTableDataSource<Module> = new MatTableDataSource<Module>([]); 

  displayedKVColumns: string[] = ['k', 'v'];
  displayedModuleColumns: string[] = ['group', 'name', 'versions', 'files'];
 
  constructor(public service:ISService)  {
    this.service.loadInfo((data:any[]) => {
        data.forEach(section => {
          if (section['name'] == 'Modules') {
            this.moduleDatasource.data = section['data'];
          } else {
            this.kvDatasources.push({
              name: section['name'],
              datasource :  new MatTableDataSource(section['data'])
            });
          }
        })
      });
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    this.kvDatasources.forEach(s => s.datasource.filter = filterValue)
    this.moduleDatasource.filter = filterValue;
  }

}