### File

`packages/components/eui-table/directives/eui-table-sticky-col.directive.ts`

### Description

Directive used to activate the sticky feature on a column of the table.

### Basic Usage

Example :

    <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>

Typescript logic

Example :

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

### Metadata

Selector | `th[isStickyCol], td[isStickyCol]`

### Index

###### Properties
class
###### HostBindings
class

### HostBindings

class
Type : `string`
Default value : `'eui-table__col--sticky'`

### Properties

class
Type : `string`
Default value : `'eui-table__col--sticky'`
Decorators : `@HostBinding('class')`

# results matching ""

# No results matching ""