eui documentation
  1. Components
  2. EuiTableFilterComponent

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
Methods
Inputs
Outputs
HostBindings
Accessors

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
getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string

results matching ""

    No results matching ""