fuse-angular/src/app/main/components/datatable/ngx-datatable.component.html

<div id="ngx-datatable" class="page-layout simple fullwidth">

    <!-- HEADER -->
    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between">
        <div fxLayout="column" fxLayoutAlign="center start">
            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                <md-icon class="secondary-text s-16">home</md-icon>
                <md-icon class="secondary-text s-16">chevron_right</md-icon>
                <span class="secondary-text">Tables</span>
            </div>
            <div class="h2 mt-16">ngx-datatable</div>
        </div>

        <div fxLayout="row" fxLayoutAlign="start center">
            <a md-raised-button class="md-white-bg"
               href="https://github.com/swimlane/ngx-datatable"
               target="_blank">
                <md-icon>link</md-icon>
                <span>Reference</span>
            </a>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">

        <p class="mb-32">
            <b>ngx-datatable</b> is a Angular component for presenting large and complex data.
            It has all the features you would expect from any other table but in a light package with no external
            dependencies. The table was designed to be extremely flexible and light; it doesn't make any assumptions
            about your data or how you: filter, sort or page it.
        </p>

        <ngx-datatable
            class="material"
            [rows]="rows"
            [loadingIndicator]="loadingIndicator"
            [columnMode]="'force'"
            [headerHeight]="48"
            [footerHeight]="56"
            [rowHeight]="'auto'"
            [scrollbarH]="true"
            [reorderable]="reorderable"
            [selectionType]="'checkbox'"
            [limit]="10">

            <ngx-datatable-column [width]="48"
                                  [canAutoResize]="false"
                                  [sortable]="false">
                <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
                             let-selectFn="selectFn">
                    <md-checkbox [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)"></md-checkbox>
                </ng-template>

                <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
                             let-onCheckboxChangeFn="onCheckboxChangeFn">
                    <md-checkbox [checked]="isSelected" (change)="onCheckboxChangeFn($event)"></md-checkbox>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="Name" prop="name">
            </ngx-datatable-column>

            <ngx-datatable-column name="Last Name" prop="lastName">
            </ngx-datatable-column>

            <ngx-datatable-column name="Company" prop="company">
            </ngx-datatable-column>
        </ngx-datatable>

    </div>

</div>