Componentes >

CRUD

Anatomía

Las casillas de verificación son un extensión que permite hacer control de selección sobre la información

Implementación

				
					<p-table 
    #dt1
    [value]="data" 
    [tableStyle]="{ 'min-width': '50rem' }"
    [globalFilterFields]="['usuario', 'correo', 'celular']"
    [paginator]="true"
    >

    <ng-template pTemplate="caption">
        <div style="display: flex; align-items: center; width: 100%; justify-content: space-between;">
            <input pInputText #textInput type="text" (input)="dt1.filterGlobal(textInput.value, 'contains')"
                        placeholder="Buscar" style=" max-width: 250px;" />
            <p-button label="Nuevo usuario"/>
        </div>
    </ng-template>

<ng-template pTemplate="header">
        <tr>
            <th pSortableColumn="usuario" >Usuario<p-sortIcon field="usuario"></p-sortIcon></th>
            <th pSortableColumn="correo" >Correo<p-sortIcon field="correo"></p-sortIcon></th>
            <th pSortableColumn="celular" >Celular<p-sortIcon field="celular"></p-sortIcon></th>
            <th style="text-align: center;">Habilitado</th>
            <th style="text-align: center;">Acciones</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-data>
        <tr>
            <td>{{ data.usuario }}</td>
            <td>{{ data.correo }}</td>
            <td>{{ data.celular }}</td>
            <td style="text-align: center;">
                <p-checkbox [readonly]="true" [ngModel]="(data.habilitado) === 1 ? true : false" [binary]="true" inputId="binary"></p-checkbox>
            </td>
            <td>
                <p-button icon="pi pi-check"></p-button>
            </td>
        </tr>
    </ng-template>
</p-table>
				
			
es_ESSpanish