<div class="content__title">
|
<h1>
|
Tables
|
<small>Native support</small>
|
</h1>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Basic">
|
<nz-table [nzDataSource]="data" [nzPageSize]="10">
|
<thead nz-thead>
|
<tr>
|
<th nz-th><span>Name</span></th>
|
<th nz-th><span>Age</span></th>
|
<th nz-th><span>Address</span></th>
|
<th nz-th><span>Action</span></th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let data of data">
|
<td nz-td>{{data.name}}</td>
|
<td nz-td>{{data.age}}</td>
|
<td nz-td>{{data.address}}</td>
|
<td nz-td>
|
<span>
|
<a>Action</a>
|
<span nz-table-divider></span>
|
<a>Delete</a>
|
<span nz-table-divider></span>
|
<nz-dropdown>
|
<a class="ant-dropdown-link" nz-dropdown>
|
More<i class="anticon anticon-down"></i>
|
</a>
|
<ul nz-menu>
|
<li nz-menu-item>1st menu item</li>
|
<li nz-menu-item>2st menu item</li>
|
<li nz-menu-item>3st menu item</li>
|
</ul>
|
</nz-dropdown>
|
</span>
|
</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Sort">
|
<nz-table [nzDataSource]="data" [nzPageSize]="10">
|
<thead nz-thead>
|
<tr>
|
<th nz-th><span>Name</span></th>
|
<th nz-th><span>Age<nz-table-sort [(nzValue)]="ageSort" (nzValueChange)="ageSortChange($event)"></nz-table-sort></span></th>
|
<th nz-th><span>Address</span></th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let data of data">
|
<td nz-td>{{data.name}}</td>
|
<td nz-td>{{data.age}}</td>
|
<td nz-td>{{data.address}}</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Selection">
|
<nz-table [nzDataSource]="data" [nzPageSize]="10" (nzDataChange)="_displayDataChange($event)" (nzPageIndexChange)="_refreshStatus()" (nzPageSizeChange)="_refreshStatus()">
|
<thead nz-thead>
|
<tr>
|
<th nz-th [nzCheckbox]="true">
|
<label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
|
</label>
|
</th>
|
<th nz-th><span>Name</span></th>
|
<th nz-th><span>Age</span></th>
|
<th nz-th><span>Address</span></th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let data of data">
|
<td nz-td [nzCheckbox]="true">
|
<label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
|
</label>
|
</td>
|
<td nz-td>{{data.name}}</td>
|
<td nz-td>{{data.age}}</td>
|
<td nz-td>{{data.address}}</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Ajax">
|
<nz-table #nzTable2
|
[nzAjaxData]="_ajaxDataSet"
|
[nzShowSizeChanger]="true"
|
[nzLoading]="_ajaxLoading"
|
[nzTotal]="_total"
|
[(nzPageIndex)]="_current"
|
(nzPageIndexChange)="_ajaxRefreshData()"
|
[(nzPageSize)]="_pageSize"
|
(nzPageSizeChange)="_ajaxRefreshData()">
|
<thead nz-thead>
|
<tr>
|
<th nz-th><span>Name</span></th>
|
<th nz-th><span>Age</span></th>
|
<th nz-th><span>Email</span></th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let i of nzTable2.data">
|
<td nz-td>
|
<a>{{i.name.first}} {{i.name.last}}</a>
|
</td>
|
<td nz-td>{{i.gender}}</td>
|
<td nz-td>{{i.email}}</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="24">
|
<nz-card nzTitle="Dynamic Settings">
|
<form nz-form [nzLayout]="'inline'" class="mb-sm">
|
<div nz-row nz-form-item>
|
<div nz-form-label>
|
<label>Bordered</label>
|
</div>
|
<div nz-form-control>
|
<nz-switch [(ngModel)]="_bordered" [ngModelOptions]="{standalone: true}"></nz-switch>
|
</div>
|
</div>
|
<div nz-row nz-form-item>
|
<div nz-form-label>
|
<label>Loading</label>
|
</div>
|
<div nz-form-control>
|
<nz-switch [(ngModel)]="_loading" [ngModelOptions]="{standalone: true}"></nz-switch>
|
</div>
|
</div>
|
<div nz-row nz-form-item>
|
<div nz-form-label>
|
<label>Pagination</label>
|
</div>
|
<div nz-form-control>
|
<nz-switch [(ngModel)]="_pagination" [ngModelOptions]="{standalone: true}"></nz-switch>
|
</div>
|
</div>
|
<div nz-row nz-form-item>
|
<div nz-form-label>
|
<label>Title</label>
|
</div>
|
<div nz-form-control>
|
<nz-switch [(ngModel)]="_title" [ngModelOptions]="{standalone: true}"></nz-switch>
|
</div>
|
</div>
|
<div nz-row nz-form-item>
|
<div nz-form-label>
|
<label>Column Header</label>
|
</div>
|
<div nz-form-control>
|
<nz-switch [(ngModel)]="_header" [ngModelOptions]="{standalone: true}"></nz-switch>
|
</div>
|
</div>
|
<div nz-row nz-form-item>
|
<div nz-form-label>
|
<label>Footer</label>
|
</div>
|
<div nz-form-control>
|
<nz-switch [(ngModel)]="_footer" [ngModelOptions]="{standalone: true}"></nz-switch>
|
</div>
|
</div>
|
<div nz-row nz-form-item>
|
<div nz-form-label>
|
<label>Size</label>
|
</div>
|
<div nz-form-control>
|
<nz-radio-group [(ngModel)]="_size" [ngModelOptions]="{standalone: true}">
|
<label nz-radio-button [nzValue]="'default'">
|
<span>Default</span>
|
</label>
|
<label nz-radio-button [nzValue]="'middle'">
|
<span>Middle</span>
|
</label>
|
<label nz-radio-button [nzValue]="'small'">
|
<span>Small</span>
|
</label>
|
</nz-radio-group>
|
</div>
|
</div>
|
<div nz-row nz-form-item>
|
<div nz-form-label>
|
<label>No Result</label>
|
</div>
|
<div nz-form-control>
|
<nz-switch [(ngModel)]="_noresult" (ngModelChange)="_toggleData()" [ngModelOptions]="{standalone: true}"></nz-switch>
|
</div>
|
</div>
|
</form>
|
<nz-table
|
#nzTable
|
[nzDataSource]="_dataSet"
|
[nzPageSize]="10"
|
[nzBordered]="_bordered"
|
[nzLoading]="_loading"
|
[nzIsPagination]="_pagination"
|
[nzShowFooter]="_footer"
|
[nzShowTitle]="_title"
|
[nzSize]="_size">
|
<span nz-table-title>Here is Title</span>
|
<thead nz-thead *ngIf="_header">
|
<tr>
|
<th nz-th><span>Name</span></th>
|
<th nz-th><span>Age</span></th>
|
<th nz-th><span>Address</span></th>
|
<th nz-th><span>Action</span></th>
|
</tr>
|
</thead>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let data of nzTable.data">
|
<td nz-td>{{data.name}}</td>
|
<td nz-td>{{data.age}}</td>
|
<td nz-td>{{data.address}}</td>
|
<td nz-td>
|
<span>
|
<a>Action 一 {{data.name}}</a>
|
<span nz-table-divider></span>
|
<nz-popconfirm [nzTitle]="'Are you sure？'" [nzOkText]="'ok'" [nzCancelText]="'cancel'" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">
|
<a nz-popconfirm>Delete</a>
|
</nz-popconfirm>
|
<span nz-table-divider></span>
|
<nz-dropdown>
|
<a class="ant-dropdown-link" nz-dropdown>
|
More actions <i class="anticon anticon-down"></i>
|
</a>
|
<ul nz-menu>
|
<li nz-menu-item>1st menu item</li>
|
<li nz-menu-item>2st menu item</li>
|
<li nz-menu-item>3st menu item</li>
|
</ul>
|
</nz-dropdown>
|
</span>
|
</td>
|
</tr>
|
</tbody>
|
<span nz-table-footer>Here is footer</span>
|
</nz-table>
|
</nz-card>
|
</div>
|
</div>
|
