### File

`packages/components/eui-table/testing/playground.component.ts`

### Metadata

imports | `EuiTableComponent` `EuiPaginatorComponent` `EuiTemplateDirective` `DecimalPipe` `EuiTableStickyColumnDirective` `EuiTableSortableColComponent` `EuiTableSelectableRowComponent` `EuiTableExpandableRowComponent`

template

    <div class="eui-table__sticky-container" style="width: 100%; height: 600px">
        <table #euiTable euiTable isVirtualScroll hasStickyHeader hasStickyColumns [rows]="data" [paginator]="paginator">
            <ng-template euiTemplate="header">
                <tr [isSelectable]="hasSelectionFeature">
                    <th isStickyColumn>Id</th>
                    <th isStickyColumn sortable sortOn="country">Country</th>
                    <th sortable sortOn="year">Year</th>
                    <th width="100">ISO</th>
                    <th width="200">Population</th>
                    <th sortable sortOn="capital">Capital</th>
                </tr>
            </ng-template>
            <ng-template let-row euiTemplate="body">
                <tr [isSelectable]="hasSelectionFeature ? row : null">
                    <td isStickyColumn>{{ row.id }}</td>
                    <td isStickyColumn nowrap><span></span>{{ row.country }}</td>
                    <td>{{ row.year }}</td>
                    <td>{{ row.iso }}</td>
                    <td>{{ row.population | number }}</td>
                    <td>{{ row.capital }}</td>
                </tr>
                <tr euiTableExpandableRow></tr>
            </ng-template>
            <ng-template let-row euiTemplate="footer">
                <tr>
                    <td isStickyColumn></td>
                    <td isStickyColumn></td>
                    <td>Footer</td>
                </tr>
            </ng-template>
        </table>
    </div>

    <eui-paginator #paginator [pageSizeOptions]="[5, 10, 25, 50]" [pageSize]="10" (pageChange)="onPageChange($event)" />

### Index

###### Properties

- data
- euiTable
- Public hasSelectionFeature

###### Methods

- Public onPageChange

### Methods

Public onPageChange
`onPageChange(e: EuiPaginationEvent)`

Parameters :

Name | Type | Optional
e | `EuiPaginationEvent` | No

Returns : `void`

### Properties

data
Type : `[]`

Default value : `[ { id: 1, country: 'Austria', year: 1995, iso: 'AT', population: 8504850, capital: 'Vienna' }, { id: 2, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' }, { id: 3, country: 'Bulgaria', year: 2007, iso: 'BG', population: 7364570, capital: 'Sofia' }, { id: 4, country: 'Croatia', year: 2013, iso: 'HR', population: 4284889, capital: 'Zagreb' }, { id: 5, country: 'Cyprus', year: 2004, iso: 'CY', population: 1117000, capital: 'Nicosia' }, { id: 6, country: 'Czechia', year: 2004, iso: 'CZ', population: 10513209, capital: 'Prague' }, { id: 7, country: 'Denmark', year: 1973, iso: 'DK', population: 5655750, capital: 'Copenhagen' }, { id: 8, country: 'Estonia', year: 2004, iso: 'EE', population: 1315819, capital: 'Tallinn' }, { id: 9, country: 'Finland', year: 1995, iso: 'FI', population: 5470820, capital: 'Helsinki' }, { id: 10, country: 'France', year: 1958, iso: 'FR', population: 67210000, capital: 'Paris' }, { id: 11, country: 'Germany', year: 1958, iso: 'DE', population: 80716000, capital: 'Berlin' }, { id: 12, country: 'Greece', year: 1981, iso: 'GR', population: 10816286, capital: 'Athens' }, { id: 13, country: 'Hungary', year: 2004, iso: 'HU', population: 9877365, capital: 'Budapest' }, { id: 14, country: 'Ireland', year: 1973, iso: 'IE', population: 4609600, capital: 'Dublin' }, { id: 15, country: 'Italy', year: 1958, iso: 'IT', population: 60782668, capital: 'Rome' }, { id: 16, country: 'Latvia', year: 2004, iso: 'LV', population: 1990300, capital: 'Riga' }, { id: 17, country: 'Lithuania', year: 2004, iso: 'LT', population: 2944459, capital: 'Vilnius' }, { id: 18, country: 'Luxembourg', year: 1958, iso: 'LU', population: 549680, capital: 'Luxembourg' }, { id: 19, country: 'Malta', year: 2004, iso: 'MT', population: 446547, capital: 'Valletta' }, { id: 20, country: 'Netherlands', year: 1958, iso: 'NL', population: 16856620, capital: 'Amsterdam' }, { id: 21, country: 'Poland', year: 2004, iso: 'PL', population: 38483957, capital: 'Warsaw' }, { id: 22, country: 'Portugal', year: 1986, iso: 'PT', population: 10427301, capital: 'Lisbon' }, { id: 23, country: 'Romania', year: 2007, iso: 'RO', population: 19942642, capital: 'Bucharest' }, { id: 24, country: 'Slovakia', year: 2004, iso: 'SK', population: 5415949, capital: 'Bratislava' }, { id: 25, country: 'Slovenia', year: 2004, iso: 'SI', population: 2061085, capital: 'Ljubljana' }, { id: 26, country: 'Spain', year: 1986, iso: 'ES', population: 46704314, capital: 'Madrid' }, { id: 27, country: 'Sweden', year: 1995, iso: 'SE', population: 10004962, capital: 'Stockholm' }, { id: 28, country: 'United Kingdom', year: 1973, iso: 'GB', population: 64100000, capital: 'London' }, ]`

euiTable
Type : `EuiTableComponent`
Decorators : `@ViewChild('euiTable')`

Public hasSelectionFeature
Default value : `false`

# results matching ""

# No results matching ""