Implementacija klase

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { faTrash, faSearch } from '@fortawesome/pro-regular-svg-icons';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { faPlus } from "@fortawesome/pro-solid-svg-icons";
import { faFileLines } from "@fortawesome/pro-regular-svg-icons";
import { faColumns3 } from "@fortawesome/pro-regular-svg-icons";
import { faFilter } from "@fortawesome/pro-regular-svg-icons";
import { SynTable } from "../../../core/services/syn-table-header.service";

export interface PeriodicElement {
    id: number;
    name: string;
    weight: number;
    date: string;
    email: string;
}

export interface SynTableColumnHeader {
    name: string [];
    field: string [];
}

const ELEMENT_DATA: PeriodicElement[] = [
    { id: 1, date: '2023-05-12', name: 'Hydrogen', weight: 1.0079, email: 'alumkarashaun@gmail.com' },
    { id: 2, date: '2023-05-12', name: 'Helium', weight: 4.0026, email: 'alumkarashaun@gmail.com' },
    { id: 3, date: '2023-05-12', name: 'Lithium', weight: 6.941, email: 'alumkarashaun@gmail.com' },
    { id: 4, date: '2023-05-12', name: 'Beryllium', weight: 9.0122, email: 'alumkarashaun@gmail.com' },
    { id: 5, date: '2023-05-12', name: 'Boron', weight: 10.811, email: 'alumkarashaun@gmail.com' },
    { id: 6, date: '2023-05-12', name: 'Carbon', weight: 12.0107, email: 'alumkarashaun@gmail.com' },
    { id: 7, date: '2023-05-12', name: 'Nitrogen', weight: 14.0067, email: 'alumkarashaun@gmail.com' },
    { id: 8, date: '2023-05-12', name: 'Oxygen', weight: 15.9994, email: 'alumkarashaun@gmail.com' },
    { id: 9, date: '2023-05-12', name: 'Fluorine', weight: 18.9984, email: 'alumkarashaun@gmail.com' },
    { id: 10, date: '2023-05-12', name: 'Neon', weight: 20.1797, email: 'alumkarashaun@gmail.com' },
];

@Component({
    selector: 'app-example-table',
    templateUrl: './example-table.component.html',
    styleUrls: ['./example-table.component.scss'],
})
export class ExampleTableComponent extends SynTable<PeriodicElement> implements AfterViewInit {

    protected readonly faTrash = faTrash;
    protected readonly faSearch = faSearch;
    protected readonly faPlus = faPlus;
    protected readonly faFileLines = faFileLines;
    protected readonly faColumns = faColumns3;
    protected readonly faFilter = faFilter;

    public displayedColumns: SynTableColumnHeader = {
        name: ['', 'Icon', 'String', 'Date', 'Number', 'Email', 'Icon'],
        field: ['select', 'id', 'name', 'date', 'weight', 'email', 'icon']
    };

    constructor() {
        super();
    }

    public ngAfterViewInit() {
        this.setTableData(ELEMENT_DATA);
    }

}