📄 tanstack/virtual/v3/docs/framework/angular/examples/padding

=========================================================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

.devcontainer
src
- app
  - app.component.ts
  - column-virtualizer-padding.component.ts
  - grid-virtualizer-padding.component.ts
  - row-virtualizer-padding.component.ts
- favicon.ico
- index.html
- main.ts
- styles.css
.gitignore
README.md
angular.json
package.json
tsconfig.app.json
tsconfig.json

import { ChangeDetectionStrategy, Component } from '@angular/core'

import { ColumnVirtualizerPadding } from './column-virtualizer-padding.component'
import { GridVirtualizerPadding } from './grid-virtualizer-padding.component'
import { RowVirtualizerPadding } from './row-virtualizer-padding.component'

@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [\
    ColumnVirtualizerPadding,\
    GridVirtualizerPadding,\
    RowVirtualizerPadding,\
  ],
  template: `
    <p>
      These components are using <strong>dynamic</strong> sizes. This means that
      each element's exact dimensions are unknown when rendered. An estimated
      dimension is used to get an a initial measurement, then this measurement
      is readjusted on the fly as each element is rendered. Each component has
      padding at the beginning and end of its scroll container.
    </p>

    <row-virtualizer-padding [rows]="rows" />
    <column-virtualizer-padding [columns]="columns" />
    <grid-virtualizer-padding [columns]="columns" [rows]="rows" />
  `,
  styles: [],
})
export class AppComponent {
  rows = new Array(10000)
    .fill(true)
    .map(() => 25 + Math.round(Math.random() * 100))

  columns = new Array(10000)
    .fill(true)
    .map(() => 75 + Math.round(Math.random() * 100))
}


import { ChangeDetectionStrategy, Component } from '@angular/core'

import { ColumnVirtualizerPadding } from './column-virtualizer-padding.component'
import { GridVirtualizerPadding } from './grid-virtualizer-padding.component'
import { RowVirtualizerPadding } from './row-virtualizer-padding.component'

@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [\
    ColumnVirtualizerPadding,\
    GridVirtualizerPadding,\
    RowVirtualizerPadding,\
  ],
  template: `
    <p>
      These components are using <strong>dynamic</strong> sizes. This means that
      each element's exact dimensions are unknown when rendered. An estimated
      dimension is used to get an a initial measurement, then this measurement
      is readjusted on the fly as each element is rendered. Each component has
      padding at the beginning and end of its scroll container.
    </p>

    <row-virtualizer-padding [rows]="rows" />
    <column-virtualizer-padding [columns]="columns" />
    <grid-virtualizer-padding [columns]="columns" [rows]="rows" />
  `,
  styles: [],
})
export class AppComponent {
  rows = new Array(10000)
    .fill(true)
    .map(() => 25 + Math.round(Math.random() * 100))

  columns = new Array(10000)
    .fill(true)
    .map(() => 75 + Math.round(Math.random() * 100))
}

Dynamic

Sticky

Partners Become a Partner

scarf analytics