docs(table): add missing table JsDoc (#5525)

This commit is contained in:
Jeremy Elbourn
2017-07-05 18:50:27 -07:00
committed by mmalerba
parent 3181335074
commit 8a74973c8a
19 changed files with 699 additions and 761 deletions
+5 -7
View File
@@ -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]
+662 -730
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -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"
+4
View File
@@ -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;
}
+14
View File
@@ -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;
}
+1
View File
@@ -39,6 +39,7 @@ import {Subscription} from 'rxjs/Subscription';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MdSortHeader implements MdSortable {
/** @docs-private */
sortSubscription: Subscription;
/**
+3 -2
View File
@@ -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>
+2
View File
@@ -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',