mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-11 21:15:07 +00:00
c06e99dc97
Lots of breaking changes, all "md" prefixes changed with "mat" due to angular material deprecation of "md", md2 package removed, its not compatible with latest material version, will be replaced with another date picker later.
74 lines
3.0 KiB
HTML
74 lines
3.0 KiB
HTML
<div id="ngx-datatable" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
|
|
|
<!-- HEADER -->
|
|
<div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
|
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
|
|
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
|
<mat-icon class="secondary-text s-16">home</mat-icon>
|
|
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
|
|
<span class="secondary-text">Tables</span>
|
|
</div>
|
|
<div class="h2 mt-16">ngx-datatable</div>
|
|
</div>
|
|
|
|
<a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0"
|
|
href="https://github.com/swimlane/ngx-datatable"
|
|
target="_blank">
|
|
<mat-icon>link</mat-icon>
|
|
<span>Reference</span>
|
|
</a>
|
|
</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">
|
|
<mat-checkbox [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)"></mat-checkbox>
|
|
</ng-template>
|
|
|
|
<ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
|
|
let-onCheckboxChangeFn="onCheckboxChangeFn">
|
|
<mat-checkbox [checked]="isSelected" (change)="onCheckboxChangeFn($event)"></mat-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>
|
|
|