Skip to content

Commit

Permalink
docs(cdk/table): document fixedLayout and recycleRows (#21926)
Browse files Browse the repository at this point in the history
  • Loading branch information
MichaelJamesParsons committed Aug 19, 2021
1 parent 1f1cf42 commit 4a32707
Showing 1 changed file with 22 additions and 0 deletions.
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

0 comments on commit 4a32707

Please sign in to comment.