### File

`packages/components/eui-table-v2/testing/virtual-scroll-async.component.ts`

### Implements

`OnInit`

### Metadata

imports | `EuiTableV2Component` `EuiTemplateDirective` `DecimalPipe`

template

    <div style="height: 600px">
        <eui-table-v2 #euiDataTable isVirtualScroll isAsync [virtualScrollAsyncItemsLength]="duplicatedData.length" [data]="data" (scrollChange)="onScrollChange($event)">
            <ng-template euiTemplate="header">
                <tr>
                    <th>Id</th>
                    <th>Country</th>
                    <th>Year</th>
                    <th>ISO</th>
                    <th>Population</th>
                    <th>Capital</th>
                </tr>
            </ng-template>
            <ng-template let-row euiTemplate="body">
                <tr>
                    <td>{{ row.id }}</td>
                    <td nowrap><span class="eui-flag-icon eui-flag-icon-{{ row.iso.toLowerCase() }} eui-u-mr-s"></span>{{ row.country }}</td>
                    <td>{{ row.year }}</td>
                    <td>{{ row.iso }}</td>
                    <td>{{ row.population | number }}</td>
                    <td>{{ row.capital }}</td>
                </tr>
            </ng-template>
            <ng-template let-row euiTemplate="footer">
                <tr>
                    <td></td>
                    <td></td>
                    <td colspan="6">Footer</td>
                </tr>
            </ng-template>
        </eui-table-v2>
    </div>

### Index

###### Properties

- data
- duplicatedData
- euiDataTable

###### Methods

- onScrollChange

### Methods

onScrollChange
`onScrollChange(e: literal type)`

Parameters :

Name | Type | Optional
e | `literal type` | No

Returns : `void`

### Properties

data
Type : `any[]`
Default value : `[]`

duplicatedData
Type : `any[]`
Default value : `[]`

euiDataTable
Type : `EuiTableV2Component`
Decorators : `@ViewChild('euiDataTable')`

# results matching ""

# No results matching ""