Create a custom table similar to primeng table

In our project earlier we used p-table from primeng. Now we try to create a custom one.

So, I want to create a custom table similar to https://www.primefaces.org/primeng/#/table

I need a table with checkbox, I do not need sort, pagination, filter and other features.

I search to create a custom table, Most of them could not customize the column we want to display. I mean, custom table component has designed with static or to bind from api response.

i.e The custom component seems like this. (I don't like want this)

in app.component.ts

<custom-table [options]="tableOptions">Custom table here</custom-table>


custom-table.ts

<table class="table-striped table-hover custom-table">
<thead>
<tr>
<th class="th-checkbox">
<tri-state-checkbox class="toggle-all" [items]="filteredDataObservable"></tri-state-checkbox>
</th>
<th *ngFor="let column of options.columns" (click)="sortHeaderClick(column.value)" [ngClass]="{ 'sorting': isSorting(column.value), 'sorting_asc': isSortAsc(column.value), 'sorting_desc': isSortDesc(column.value) }">
<span [innerHTML]="column.name"></span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of filteredData">
<td class="td-checkbox">
<input type="checkbox" [(ngModel)]="row.isSelected">
</td>
<td *ngFor="let column of options.columns">{{getCellValue(row, column)}}</td>
</tr>
</tbody>
</table>



I need like this shown below. we can customize the tbody,tbody with what we what to show

in app.component.ts

<custom-table
#table
[value]="holidays"
[(selection)]="selectedItems"
>
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col style="width: 100px" />
<col style="width: 150px" />
<col style="width: 100px" />
<col style="width: 120px" />
</colgroup>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th >
<tableHeaderCheckbox></tableHeaderCheckbox>
</th>
<th pSortableColumn="id">
Id <p-sortIcon field="id"></p-sortIcon>
</th>
<th pSortableColumn="title">
Title <p-sortIcon field="title"></p-sortIcon>
</th>
<th pSortableColumn="slug">
Slug <p-sortIcon field="slug"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data>
<tr>
<td>
<tableCheckbox [value]="data"></tableCheckbox>
</td>
<td>{{ data.id }}</td>
<td>{{ data.title }}</td>
<td>{{ data.slug }}</td>
</tr>
</ng-template>
</custom-table>


I want to create a customTableComponent to bind like this.

please some help me how to do this. Any examples?

Continue reading...