### File

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

### Metadata

imports | `EuiTableComponent` `EuiTemplateDirective` `EuiTableStickyColumnDirective` `EuiTableSortableColComponent` `EuiTableExpandableRowComponent` `EuiTemplateDirective` `EuiTableSelectableRowComponent` `EuiTableSelectableHeaderComponent` `EuiTemplateDirective`

template

    <div class="eui-table__sticky-container">
        <table #table euiTable [rows] ="data" hasStickyColumns>
            <ng-template euiTemplate="header" >
                <tr  [isSelectableHeader] >
                    <th  data-testid="isStickyFirstColumn" sortable sortOn="country" >Country </th>
                    <th sortable sortOn="year">Year</th>
                    <th>ISO</th>
                    <th isStickyColumn sortable sortOn="capital"> Capital city</th>
                    <th isStickyColumn >Id</th>
                </tr>
                <tr euiTableExpandableRow></tr>
            </ng-template >
            <ng-template let-row let-index="index" euiTemplate="body">
                <tr [isSelectable] = row >
                    <td >{{ row.country }}</td>
                    <td >{{ row.year }}</td>
                    <td >{{ row.iso }}</td>
                    <td isStickyColumn>{{ row.capital }}</td>
                    <td isStickyColumn>{{ index + 1 }}</td>
                </tr>
            </ng-template>
            <ng-template euiTemplate="footer">
                <tr>
                    <td isStickyColumn data-col-label="TOTAL" colspan="5" class="text-right"><strong>TOTAL</strong></td>
                </tr>
            </ng-template>
            <ng-template euiTemplate="emptyMessage">
                <tr>
                    <td class="eui-u-text-center" colspan="5">No data</td>
                </tr>
            </ng-template>
        </table>
    </div>

### Index

###### Properties

- data
- isSelectableHeader
- table

### 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' }, ]`

isSelectableHeader
Type : `boolean`

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

# results matching ""

# No results matching ""