Searching
Default global search can be enabled using globalSearch property of m-header
component.
<m-header title="Countries" globalSearch="true"></m-header>
Searching triggers onFilter event from m-table
component.
<m-table [value]=countries
(onFilter)="onFilter($event)">
</m-table>
SearchField
By default search filed is search icon which expand and collapse on click, to change the search field to box use searchField property of m-header
component.
<m-header title="Countries" globalSearch="true" searchField="box"></m-header>
Server Side Searching
By default search is local, to disable local search and implement custom server side searching use filterLocal property of m-table
.
<m-table [value]=countries
filterLocal="false">
</m-table>
Table Component m-table
Properties
Name | Default | Description |
---|---|---|
@Output() onFilter |
- | Emits event on search with filter data. |
@Input() filterLocal: boolean |
true | whether to search locally or server side. |
Header Component m-header
Properties
Name | Default | Description |
---|---|---|
@Input() globalSearch: boolean |
false | Enable global search. |
@Input() searchField: string |
'line' | whether search field is box or line. |