# EuiTableFilterComponent

**Type:** component

<p>Component used with <code>eui-table</code> to add a filter feature to the table.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-table-filter #filter placeholder=&quot;Search filter...&quot; (filterChange)=&quot;onFilterChange($event)&quot;&gt;&lt;/eui-table-filter&gt;
&lt;table #euiTable euiTable [data]=&quot;data&quot; [filter]=&quot;filter&quot;&gt;
    &lt;ng-template euiTemplate=&quot;header&quot;&gt;
        &lt;tr&gt;
            &lt;th&gt;Country&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;ISO&lt;/th&gt;
            &lt;th&gt;Population&lt;/th&gt;
            &lt;th&gt;Capital city&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template let-row euiTemplate=&quot;body&quot;&gt;
        &lt;tr&gt;
            &lt;td data-col-label=&quot;Country&quot;&gt;{{ row.country }}&lt;/td&gt;
            &lt;td data-col-label=&quot;Year&quot;&gt;{{ row.year }}&lt;/td&gt;
            &lt;td data-col-label=&quot;ISO&quot;&gt;{{ row.iso }}&lt;/td&gt;
            &lt;td data-col-label=&quot;Population&quot;&gt;{{ row.population | number }}&lt;/td&gt;
            &lt;td data-col-label=&quot;Capital city&quot;&gt;{{ row.capital }}&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template euiTemplate=&quot;footer&quot;&gt;
        &lt;tr&gt;
            &lt;td colspan=&quot;5&quot; class=&quot;text-right&quot;&gt;Table footer&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/table&gt;</code></pre></div><p>Typescript logic</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-ts">data: Country[] = [
    { id: 1, country: &#39;Belgium&#39;, year: 1958, iso: &#39;BE&#39;, population: 11198638, capital: &#39;Brussels&#39; },
]

onFilterChange(event: string) {
    this.filteredData = this.euiTable.getFilteredData();
    this.getTotalPopulation();
}</code></pre></div>

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

**Standalone:** false

## Inputs

- **placeholder**: `string` - <p>Placeholder text for the filter input.</p>


## Outputs

- **filterChange**: `EventEmitter` - <p>Event emitted when the value of the input changes.</p>

