<div class="eui-table__scrollable-wrapper" style="width: 800px; height: 600px; overflow: auto" tabindex="0">
    <table euiTable hasStickyHeader hasStickyFooter hasStickyCols [data]="data" style="width: 1400px">
        <ng-template euiTemplate="header">
            <tr>
                <th isStickyCol>Country</th>
                <th>Year</th>
                <th>ISO</th>
                <th>Population</th>
                <th>Capital city</th>
            </tr>
        </ng-template>
        <ng-template let-row euiTemplate="body">
            <tr>
                <td isStickyCol>{{ 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 euiTemplate="footer">
            <tr>
                <td isStickyCol class="eui-u-text-center">Footer</td>
                <td class="eui-u-text-center">Footer</td>
                <td class="eui-u-text-center">Footer</td>
                <td class="eui-u-text-center">Footer</td>
                <td class="eui-u-text-center">Footer</td>
            </tr>
        </ng-template>
    </table>
</div>

data: Country[] = [
    { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
]