Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(cdk/table): document fixedLayout and recycleRows #21926

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/cdk/table/table.md
Expand Up @@ -135,6 +135,18 @@ updates. This can be based on _anything_: websocket connections, user interactio
time-based intervals, etc. Most commonly, updates will be triggered by user interactions like
sorting and pagination.

##### `fixedLayout`
The CDK table measures the dimensions of sticky elements before applying the styles that make them
"stick". Because native tables derive column widths from the content within each cell, these
dimensions are re-checked when the underlying data changes.

Enabling `fixedLayout` will enforce uniform column widths, so the table can reliably cache and reuse
them when calculating sticky styles. This can reduce rendering latency for large native tables.

```html
<table cdk-table [dataSource]="dataSource" fixedLayout>
```

##### `trackBy`

To improve performance, a `trackBy` function can be provided to the table similar to Angular’s
Expand All @@ -145,6 +157,16 @@ table how to uniquely identify rows to track how the data changes with each upda
<table cdk-table [dataSource]="dataSource" [trackBy]="myTrackById">
```

##### `recycleRows`
By default, `CdkTable` creates and destroys an internal Angular view for each row. This allows rows
to participate in animations and to toggle between different row templates with `cdkRowDefWhen`. If
you don't need these features, you can instruct the table to cache and recycle rows by specifying
`recycleRows`.

```html
<table cdk-table [dataSource]="dataSource" recycleRows>
```

### Alternate HTML to using native table

The CDK table does not require that you use a native HTML table. If you want to have full control
Expand Down