/
githubmirror
/
components
Обзор
Документация
Войти
/
githubmirror
/
components
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/components-examples/cdk/table/cdk-table-virtual-scroll/cdk-table-virtual-scroll-example.html
37 строк
1 KB
Kristiyan Kostadinov
docs: add virtual scrolling examples
09 дек 2025, 20:37
09 дек 2025, 20:37
b85e5f5
Код
Авторство
О чём код?
<p>Showing {{dataSource.length}} rows</p> <!-- Enable virtual scrolling --> <cdk-virtual-scroll-viewport class="example-container" [itemSize]="48" [maxBufferPx]="1200" [minBufferPx]="400"> <table cdk-table [dataSource]="dataSource" [trackBy]="trackBy"> <!-- Position Column --> <ng-container cdkColumnDef="position"> <th cdk-header-cell *cdkHeaderCellDef> No. </th> <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td> <th cdk-footer-cell *cdkFooterCellDef> No. </th> </ng-container> <!-- Name Column --> <ng-container cdkColumnDef="name"> <th cdk-header-cell *cdkHeaderCellDef> Name </th> <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td> <th cdk-footer-cell *cdkFooterCellDef> Name </th> </ng-container> <!-- Weight Column --> <ng-container cdkColumnDef="weight"> <th cdk-header-cell *cdkHeaderCellDef> Weight </th> <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td> <th cdk-footer-cell *cdkFooterCellDef> Weight </th> </ng-container> <!-- Symbol Column --> <ng-container cdkColumnDef="symbol"> <th cdk-header-cell *cdkHeaderCellDef> Symbol </th> <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td> <th cdk-footer-cell *cdkFooterCellDef> Symbol </th> </ng-container> <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr> <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr> </table> </cdk-virtual-scroll-viewport>