mercredi 3 octobre 2018

Angular 6 PrimeNG - how to add a checkbox with distinct values from one column?

I have example Angular PrimeNG code for creating a Html Table:

<h3 class="first">Basic</h3>
<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </ng-template>
</p-table>

<h3>Dynamic Columns</h3>
<p-table [columns]="cols" [value]="cars">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                    
            </td>
        </tr>
    </ng-template>
</p-table>

How to create a dynamic checkbox (e.g. on the left side of a screen next to a table) so that options are generated based on unique values from a column? (something like Amazon has on the left side of the screen): enter image description here

And based on a click for each checkbox - it would show subset of rows in a table...

Thanks




Aucun commentaire:

Enregistrer un commentaire