### File

`packages/components/eui-table/filter/eui-table-filter.component.ts`

### Description

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

### Basic Usage

Example :

    <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

Example :

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

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

### Implements

`OnInit` `OnDestroy`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-table-filter`
imports | `ReactiveFormsModule` `EUI_ICON` `EUI_ICON_INPUT` `EUI_INPUT_TEXT`
templateUrl | `./eui-table-filter.component.html`

### Index

###### Properties
Public filter$ filterInput Public form
###### Methods
Public resetFilter Public setFilter
###### Inputs
placeholder
###### Outputs
filterChange
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

placeholder
Type : `string`
Placeholder text for the filter input.

### Outputs

filterChange
Type : `EventEmitter`
Event emitted when the value of the input changes.

### HostBindings

class
Type : `string`
Computes and returns the CSS classes for the component based on its current state.

### Methods

Public resetFilter
`resetFilter()`
Reset the filter and emit the change event. Returns : `void`

Public setFilter
`setFilter(value: string)`
Set the filter value and emit the change event. Parameters :
Name | Type | Optional | Description
value | `string` | No | Value of the input.
Returns : `void`

### Properties

Public filter$
Type : `BehaviorSubject<string>`
Default value : `new BehaviorSubject(null)`

filterInput
Type : `ElementRef<HTMLInputElement>`
Decorators : `@ViewChild('filterInput', {read: ElementRef})`

Public form
Type : `unknown`
Default value : `new FormGroup({ filter: new FormControl<string>(null), })`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

# results matching ""

# No results matching ""