Javascript 如何在Angular 2中创建表作为通用组件？

我有这张桌子在下面。这种表可以在我的项目中的任何地方找到，有不同的列数，有或没有标题列。这就是为什么我想创建一个更简单的通用组件，并拥有自己的CSS

<table class="table">
  <thead>
    <tr>
      <th style="width: 100px"></th>
      <th> {{ 'nameColumn_result_name' | translate }} </th>
      <th> {{ 'nameColumn_result_date' | translate }} 
    </tr>
  </thead>                  
  <tbody #lines>
    <tr #lineSelected *ngFor="let result of results" 
      (click)="appendLine($event, lineSelected, result)" 
      (contextmenu)="multipleSelection($event)">
      <td (click)="selectUnitaryLine($event, result)" class="arrowDown"></td>
      <td>{{result.name}}</td>
      <td>{{result.date}}</td>
    </tr>       
    <tr *ngIf="result && result .length == 0" >
      <td colspan="10" class="text-center">{{ 'no_result _found' | translate }}</td>
    </tr>   
  </tbody>
</table>

我不知道怎么做

你能帮我吗

---

谢谢

嘿，我想知道你能不能解决像这样添加嵌套组件的问题？嘿，我想知道你能不能解决像这样添加嵌套组件的问题？

<CustomTable [data]="results" (click)="appendLine($event, lineSelected, result)" (contextmenu)="multipleSelection($event)">
   <CustomTableColumn style="width: 100px" (click)="selectUnitaryLine($event, result)"></CustomTableColumn>
   <CustomTableColumn [data]="name"> {{ 'nameColumn_result_name' | translate }} </CustomTableColumn>
   <CustomTableColumn [data]="date"> {{ 'nameColumn_result_date' | translate }}</CustomTableColumn> 
</CustomTable>

 @Component({
   selector: 'CustomTable',
   templateUrl: './customtable.component.html',
   styleUrls: ['./customtable.component.css']
 })
 (...)