tfabrica/ClientApp/app/components/crud/tfabrica.crud.datatable.component.html

library for TFabrica - TechSol

<div fxFlex>
    <style>
        td, th {
            padding: 5px;
        }

        md-sidenav {
            width: 300px;
        }
    </style>
    <div>
        <table>
            <thead>
                <tr>
                    <th *ngFor="let field of fieldsToDisplay">

                        <div *ngIf="filterEnabled">
                            <md-input-container>
                                <input md-input mdInput type="{{field.type}}" (keyup.enter)="onEnter(field)"
                                       name="{{field.name}}" id="{{field.valueSelect}}"
                                       placeholder="{{field.label}}">
                            </md-input-container>
                        </div>

                        <div *ngIf="!filterEnabled">
                            {{field.label}}
                        </div>
                    </th>
                </tr>
            </thead>

            <tbody>


                <!--With pagination enabled-->
                <ng-container *ngIf="paginateItems > 0">
                    <tr *ngFor="let row of rows | paginate: {itemsPerPage: paginateItems, currentPage:page, id: '1'}; "
                        (click)="clickOnRow(row)">
                        <td *ngFor="let field of fieldsToDisplay" [ngStyle]="field.getStyle()">
                            {{row[field.name]}}
                        </td>
                    </tr>
                </ng-container>

                <!--Without pagination-->
                <ng-container *ngIf="paginateItems == 0">
                    <tr *ngFor="let row of rows" (click)="clickOnRow(row)" >
                      <td *ngFor="let field of fieldsToDisplay" [ngStyle]="field.getStyle()"  >
                                {{row[field.name]}}
                      </td>                      
                    </tr>
                </ng-container>

            </tbody>

        </table>
        <p></p>
        <p></p>
        <!--https://github.com/michaelbromley/ngx-pagination-->
        <pagination-controls *ngIf="paginateItems > 0"
                             class="my-pagination"
                             fxLayoutAlign ="center"
                             (pageChange)="page = $event" id="1"
                             maxSize="20"
                             directionLinks="true"
                             autoHide="true" >
        </pagination-controls>
 
    </div> 
    </div>