I have an `Angular 13` app & building a common reusable component named `app-table`

html
----

```html
    <table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>DOB</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of tableItems">
            <td> {{ item.name }}</td>
            <td> {{ item.email } </td>
            <td> {{ item.dob }} </td>
        </tr>
    </tbody>
</table>

```

component.ts
------------

```js
    import { Component, Input, OnInit} from '@angular/core';
    import { TableItem } from './model/tableItem';

    @Component({
     selector: 'app-table',
     templateUrl: './table.component.html',
     styleUrls: ['./table.component.css'],
    })

    export class TableComponent implements OnInit {
     @Input() tableItems: TableItem[] = [];

     constructor() {}

     ngOnInit(): void {}
     }

```

Currently, this is reusable across 4-5 places, however reusability of this component is tied to `name`, `email`, `dob` fields. I want to make it generic so that any model could be linked to this component & can be reused across the app.

Please suggest. Thanks!