# EuiTableFilterComponent

**Type:** component



Component used with `eui-table` to add a filter feature to the table.

### Basic Usage
```html
<eui-table-filter #filter placeholder="Search filter..." (filterChange)="onFilterChange($event)"></eui-table-filter>
<table #euiTable euiTable [data]="data" [filter]="filter">
    <ng-template euiTemplate="header">
        <tr>
            <th>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 data-col-label="Country">{{ row.country }}</td>
            <td data-col-label="Year">{{ row.year }}</td>
            <td data-col-label="ISO">{{ row.iso }}</td>
            <td data-col-label="Population">{{ row.population | number }}</td>
            <td data-col-label="Capital city">{{ row.capital }}</td>
        </tr>
    </ng-template>
    <ng-template euiTemplate="footer">
        <tr>
            <td colspan="5" class="text-right">Table footer</td>
        </tr>
    </ng-template>
</table>
```
Typescript logic
```ts
data: Country[] = [
    { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
]

onFilterChange(event: string) {
    this.filteredData = this.euiTable.getFilteredData();
    this.getTotalPopulation();
}
```


**Selector:** `eui-table-filter`

## Inputs
- **placeholder**: `string` - Placeholder text for the filter input.

## Outputs
- **filterChange**: `EventEmitter` - Event emitted when the value of the input changes.