mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs(table): add missing table JsDoc (#5525)
This commit is contained in:
+5
-7
@@ -6,8 +6,9 @@ The table provides a foundation upon which other features, such as sorting and p
|
||||
built. Because it enforces no opinions on these matters, developers have full control over the
|
||||
interaction patterns associated with the table.
|
||||
|
||||
For a Material Design styled table, see the documentation for `<md-table>` which builds on top of
|
||||
the CDK data-table.
|
||||
For a Material Design styled table, see the
|
||||
[documentation for `<md-table>`](https://material.angular.io/components/table) which builds on
|
||||
top of the CDK data-table.
|
||||
|
||||
<!-- example(cdk-table-basic) -->
|
||||
|
||||
@@ -117,12 +118,9 @@ sorting and pagination.
|
||||
|
||||
##### `trackBy`
|
||||
To improve performance, a trackBy function can be provided to the table similar to Angular’s
|
||||
(`ngFor` trackBy)[trackBy]. This informs the table how to uniquely identify rows to track how the
|
||||
data changes with each update.
|
||||
[`ngFor` trackBy](https://angular.io/api/common/NgForOf#change-propagation). This informs the
|
||||
table how to uniquely identify rows to track how the data changes with each update.
|
||||
|
||||
```html
|
||||
<cdk-table [dataSource]="dataSource" [trackBy]="myTrackById">
|
||||
```
|
||||
|
||||
|
||||
[trackBy][https://angular.io/api/common/NgForOf#change-propagation]
|
||||
Generated
+662
-730
File diff suppressed because it is too large
Load Diff
+1
-1
@@ -113,7 +113,7 @@
|
||||
"stylelint": "^7.10.1",
|
||||
"ts-node": "^3.0.4",
|
||||
"tsconfig-paths": "^2.2.0",
|
||||
"tslint": "^5.2.0",
|
||||
"tslint": "~5.4.3",
|
||||
"typescript": "~2.2.1",
|
||||
"uglify-js": "^2.8.14",
|
||||
"web-animations-js": "^2.2.5"
|
||||
|
||||
@@ -32,9 +32,13 @@ export class CdkHeaderCellDef {
|
||||
*/
|
||||
@Directive({selector: '[cdkColumnDef]'})
|
||||
export class CdkColumnDef {
|
||||
/** Unique name for this column. */
|
||||
@Input('cdkColumnDef') name: string;
|
||||
|
||||
/** @docs-private */
|
||||
@ContentChild(CdkCellDef) cell: CdkCellDef;
|
||||
|
||||
/** @docs-private */
|
||||
@ContentChild(CdkHeaderCellDef) headerCell: CdkHeaderCellDef;
|
||||
}
|
||||
|
||||
|
||||
@@ -13,6 +13,20 @@ export interface CollectionViewer {
|
||||
}
|
||||
|
||||
export abstract class DataSource<T> {
|
||||
/**
|
||||
* Connects a collection viewer (such as a data-table) to this data source.
|
||||
* @param collectionViewer The component that exposes a view over the data provided by this
|
||||
* data source.
|
||||
* @returns Observable that emits a new value when the data changes.
|
||||
*/
|
||||
abstract connect(collectionViewer: CollectionViewer): Observable<T[]>;
|
||||
|
||||
/**
|
||||
* Disconnects a collection viewer (such as a data-table) from this data source. Can be used
|
||||
* to perform any clean-up or tear-down operations when a view is being destroyed.
|
||||
*
|
||||
* @param collectionViewer The component that exposes a view over the data provided by this
|
||||
* data source.
|
||||
*/
|
||||
abstract disconnect(collectionViewer: CollectionViewer): void;
|
||||
}
|
||||
|
||||
@@ -39,6 +39,7 @@ import {Subscription} from 'rxjs/Subscription';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class MdSortHeader implements MdSortable {
|
||||
/** @docs-private */
|
||||
sortSubscription: Subscription;
|
||||
|
||||
/**
|
||||
|
||||
@@ -10,7 +10,8 @@ instead of `cdk-`.
|
||||
Note that the column definition directives (`cdkColumnDef` and `cdkHeaderCellDef`) are still
|
||||
prefixed with `cdk-`.
|
||||
|
||||
For more information on the interface and how it works, see the guide covering the CDK data-table.
|
||||
For more information on the interface and how it works, see the
|
||||
[guide covering the CDK data-table](https://material.angular.io/guides/cdk-table).
|
||||
|
||||
### Features
|
||||
|
||||
@@ -46,4 +47,4 @@ an update via the table's data source.
|
||||
|
||||
In the near future, we will provide a simplified version of the data-table with an easy-to-use
|
||||
interface, material styling, array input, and more out-of-the-box features (sorting, pagination,
|
||||
and selection).
|
||||
and selection).
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<md-input-container class="example-input-container">
|
||||
<input mdInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
|
||||
<md-button *ngIf="value" mdSuffix md-icon-button aria-label="Clear" (click)="value=''">
|
||||
<button md-button *ngIf="value" mdSuffix md-icon-button aria-label="Clear" (click)="value=''">
|
||||
<md-icon>close</md-icon>
|
||||
</md-button>
|
||||
</button>
|
||||
</md-input-container>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 500px;
|
||||
background: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<div class="example-header"> Users </div>
|
||||
|
||||
<md-table #table [dataSource]="dataSource">
|
||||
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
@@ -33,4 +31,4 @@
|
||||
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
</md-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 500px;
|
||||
background: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<div class="example-header">
|
||||
Users
|
||||
|
||||
<md-input-container floatPlaceholder="never">
|
||||
<input mdInput #filter placeholder="Filter users">
|
||||
</md-input-container>
|
||||
@@ -39,4 +37,4 @@
|
||||
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
</md-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 500px;
|
||||
background: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<div class="example-header" [style.display]="selection.isEmpty() ? '' : 'none'">
|
||||
Users
|
||||
|
||||
<md-input-container floatPlaceholder="never">
|
||||
<input mdInput #filter placeholder="Filter users">
|
||||
</md-input-container>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 500px;
|
||||
background: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<div class="example-header"> Users </div>
|
||||
|
||||
<md-table #table [dataSource]="dataSource">
|
||||
|
||||
@@ -40,4 +39,4 @@
|
||||
[pageSize]="25"
|
||||
[pageSizeOptions]="[5, 10, 25, 100]">
|
||||
</md-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 500px;
|
||||
background: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
@@ -21,4 +20,4 @@
|
||||
|
||||
.mat-header-cell .mat-sort-header-sorted {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<div class="example-header"> Users </div>
|
||||
|
||||
<md-table #table [dataSource]="dataSource" mdSort>
|
||||
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
@@ -33,4 +31,4 @@
|
||||
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
</md-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -115,6 +115,8 @@ let apiDocsPackage = new DgeniPackage('material2-api-docs', dgeniPackageDeps)
|
||||
'lib/slide-toggle/index.ts',
|
||||
'lib/slider/index.ts',
|
||||
'lib/snack-bar/index.ts',
|
||||
'lib/sort/index.ts',
|
||||
'lib/table/index.ts',
|
||||
'lib/tabs/index.ts',
|
||||
'lib/toolbar/index.ts',
|
||||
'lib/tooltip/index.ts',
|
||||
|
||||
Reference in New Issue
Block a user