feat(cdk/table) add directive to enable recycle view repeater #21508
Conversation
google-cla
bot
added
the
cla: yes
MichaelJamesParsons
force-pushed
the
recycle-view-repeater-directive
branch
2 times, most recently
from
c555c3b to
8e8f7fe
Compare
MichaelJamesParsons
added
G
MichaelJamesParsons
force-pushed
the
recycle-view-repeater-directive
branch
4 times, most recently
from
c0af9f7 to
e81b022
Compare
| table { | ||
| width: 100%; | ||
| } | ||
|
|
||
| th { | ||
| text-align: left; | ||
| } |
There was a problem hiding this comment.
Could you add CSS classes to the example like .example-table and .example-row and use those here? I like to make it unambiguously clear where each styles comes from in examples so that anyone inspecting the example can quickly distinguish between example styles and component styles.
(similar for other examples)
There was a problem hiding this comment.
Done. Updated here and in the mat table demo.
src/cdk/table/table.ts
Outdated
| * tables that animate rows. | ||
| */ | ||
| @Directive({ | ||
| selector: 'cdk-table[cdkRecycleRows], table[cdk-table][cdkRecycleRows]', |
There was a problem hiding this comment.
| selector: 'cdk-table[cdkRecycleRows], table[cdk-table][cdkRecycleRows]', | |
| selector: 'cdk-table[recycleRows], table[cdk-table][recycleRows]', |
I would do just recycleRows since we're conceptually pretending that this is an option on CdkTable, the properties of which wouldn't be prefixed. Same for the mat version
There was a problem hiding this comment.
Done. Updated here and in the mat table.
MichaelJamesParsons
force-pushed
the
recycle-view-repeater-directive
branch
2 times, most recently
from
d5a6ed1 to
bab9edd
Compare
MichaelJamesParsons
force-pushed
the
recycle-view-repeater-directive
branch
from
bab9edd to
46c9e7e
Compare
There was a problem hiding this comment.
LGTM
@MichaelJamesParsons would you be willing to send a follow-up PR with docs? (just adding a brief section to table.md)
|
@jelbourn yes, I'll prepare a PR for the docs this week. |
|
Documented in #21926 |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
The CDK and Material tables use the dispose view repeater strategy, which creates new rows from scratch when the dataset changes. This PR adds directives that enable the recycle view repeater, which caches disposed rows and reuses them when the dataset changes. This strategy reduces rendering latency for most tables, but may not be compatible with tables that animate rows.