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>
				
			
en_USEnglish