Skip to content

Commit 8e6875a

Browse files
docs(cdk/table): document fixedLayout and recycleRows
1 parent 65330c2 commit 8e6875a

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

src/cdk/table/table.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,18 @@ updates. This can be based on _anything_: websocket connections, user interactio
135135
time-based intervals, etc. Most commonly, updates will be triggered by user interactions like
136136
sorting and pagination.
137137

138+
##### `fixedLayout`
139+
The CDK table measures the dimensions of sticky elements before applying the styles that make them
140+
"stick". Because native tables derive column widths from the content within each cell, these
141+
dimensions are re-checked when the underlying data changes.
142+
143+
Enabling `fixedLayout` will enforce uniform column widths, so the table can reliably cache and reuse
144+
them when calculating sticky styles. This can reduce rendering latency for large native tables.
145+
146+
```html
147+
<table cdk-table [dataSource]="dataSource" fixedLayout>
148+
```
149+
138150
##### `trackBy`
139151

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

160+
##### `recycleRows`
161+
By default, `CdkTable` creates and destroys an internal Angular view for each row. This allows rows
162+
to participate in animations and to toggle between different row templates with `cdkRowDefWhen`. If
163+
you don't need these features, you can instruct the table to cache and recycle rows by specifying
164+
`recycleRows`.
165+
166+
```html
167+
<table cdk-table [dataSource]="dataSource" recycleRows>
168+
```
169+
148170
### Alternate HTML to using native table
149171

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

0 commit comments

Comments
 (0)