In the previous articles we have the Material Table up and running, bound to a JSON file, and styled in a nice way. Today we want to add Search function.
<div appGrid columns=".1fr .7fr">
<label>Search</label>
<input type="text">
</div>
We start off with a div. It uses our appGrid directive which sets the style to display:grid and sets the width of the label to .1fr; and the input width of .7fr.
The Search Box
Next we want to capture keyup events and use a filter to change the view of the table.
<div appGrid columns=".1fr .7fr">
<label>Search</label>
<input #search (keyup)='onSearchKeyUp(search)' type="text">
</div>
We give the input a name and tell it to call onSearchKeyUp when the user types. It sends in the actual input element to the event handler.
onSearchKeyUp(search){
var currentFilter = search.value;
this.dataSource.filter = currentFilter;
}
That's all you need to add a Search filter. As you type; the grid is filtered, and returns to 'normal state' by removing the text from the search. If you add a button named "Clear" or "Reset" this is the code to clear the filter.
onClearClicked(){
this.dataSource.filter = "";
}
As you can see the response is excellent!
Next up: Sortable column headers
JWP2020
Top comments (0)