Searching
Generic UI grid has a built-in search feature. When a user types some text into the input grid will scan for this phrase in the data and it will present all rows which match wanted phrase.
It allows to search value in all type: GuiDataType.STRING columns. So it will work for columns that have a type specified as 'string'. Search will not take into consideration columns of type: GuiDataType.NUMBER, GuiDataType.DATE, GuiDataType.BOOLEAN, etc. To read more about types of columns see this guide Columns and their types.
It is really simple to turn on searching. You just have to set the input searching to true. Default value is false.
Index
Character
Real name
Abilities
import { GuiColumn, GuiSearching } from '@generic-ui/ngx-grid';
@Component({
template: `
<gui-grid [columns]="columns"
[source]="source"
[searching]="searching">
</gui-grid>
`
})
export class DocsSearchBasicComponent {
columns: Array<GuiColumn> = [{
header: 'Index',
field: 'index',
width: 60
}, {
header: 'Character',
field: 'character'
}, {
header: 'Real name',
field: 'name'
}, {
header: 'Abilities',
field: 'abilities'
}];
source: Array<any>;
searching: GuiSearching = {
enabled: true,
placeholder: 'Search heroes'
};
constructor(private dcDataService: SearchingExampleService) {
}
ngOnInit() {
this.dcDataService.getHeroes()
.subscribe(heroes => this.source = heroes);
}
}searching: GuiSearching = {
enabled?: boolean;
highlighting?: boolean;
placeholder?: string;
phrase?: string;
};Search highlighting & initial phrase
The search feature allows highlighting search phrases. It is easy to enable just change the flag highlighting to true . All of the matched phrases with be highlighted by the yellow label, which makes them easy to spot.
You can also specify a starting search phrase. To do it use config property phrase. Grid will filter out values that do not fit the search phrase from the start.
Grid search allows a lot of configurations, one of them is a placeholder. It relates to the text which appears in the search input as a placeholder or suggestion.
Index
Character
Real name
Abilities
import { GuiColumn, GuiSearching } from '@generic-ui/ngx-grid';
@Component({
template: `
<gui-grid [columns]="columns"
[source]="source"
[searching]="searching">
</gui-grid>
`
})
export class SearchBasicComponent {
columns: Array<GuiColumn> = [{
header: 'Index',
field: 'index',
width: 60
}, {
header: 'Character',
field: 'character'
}, {
header: 'Real name',
field: 'name'
}, {
header: 'Abilities',
field: 'abilities'
}];
source: Array<any>;
searching: GuiSearching = {
enabled: true,
placeholder: 'Search heroes',
phrase: 'man',
highlighting: true
};
constructor(private dcDataService: SearchingExampleService) {
}
ngOnInit() {
this.dcDataService.getHeroes()
.subscribe(heroes => this.source = heroes);
}
}searching: GuiSearching = {
enabled: true,
placeholder: 'Search heroes',
phrase: 'man',
highlighting: true
};Search matcher - working with complex objects
Sometimes you need to use in the column a more complex value e.g. object, in that case, it seems natural that search requires more configuration. The grid search features work on the primitive values, so you need to specify which property in the object should be used for searching. You can do that by specifying the matcher, just like in the example below. Matcher is a function which is used by the grid to get the property from the object and use it for searching.
Project name
Owner
Company
Deadline
Progress
Fantasia Ramos
06/08/2020
Renata Salazar
31/05/2020
Esther Ruiz
11/10/2019
Ed Flores
26/06/2019
Lara Chapman
07/06/2019
Fantasia Ramos
01/09/2018
Mira Cox
27/11/2018
Frances Hernandez
26/02/2020
Muriel Greene
27/02/2020
Flavia Schmidt
11/03/2019
Lara Chapman
05/02/2020
Lucrece Nguyen
29/12/2019
Lola Ruiz
20/10/2019
Lola Ruiz
13/11/2018
Cecelia Cruz
22/10/2018
Cecelia Cruz
04/12/2020
Samuel Howard
21/03/2020
Eva Garza
28/11/2018
Amanda Greene
05/07/2020
Muriel Greene
06/01/2020
Eva Garza
06/08/2020
Julius Mitchell
12/12/2019
Susie Nichols
30/07/2020
Otto Kennedy
18/06/2019
Cecelia Cruz
27/11/2018
Norma Rose
15/08/2020
Carolyn Gibson
11/01/2020
Lara Chapman
20/01/2019
Nicholas Perez
03/08/2019
Carolyn Gibson
05/01/2020
Lola Ruiz
06/03/2021
Fannie Jones
30/12/2018
Eva Garza
04/04/2021
Renata Salazar
12/10/2020
Alma Ross
01/06/2019
Bertha Schmidt
14/03/2020
Frances Hernandez
01/08/2019
Frances Hernandez
07/08/2019
Otto Kennedy
14/11/2018
Nicholas Perez
09/01/2019
Dora Sullivan
01/08/2020
Jane Bradley
29/11/2020
Henrietta Thomas
15/06/2019
Jay Lewis
20/02/2020
Amanda Greene
10/09/2018
Cornelia Perry
23/05/2019
Renata Salazar
11/04/2019
Bertha Schmidt
03/11/2018
Alma Ross
03/04/2019
Moses Washington
06/12/2018
import { Component } from '@angular/core';
import { GuiCellView, GuiColumn, GuiDataType, GuiSearching } from '@generic-ui/ngx-grid';
@Component({
template: `
<gui-grid [columns]="columns"
[source]="source"
[maxHeight]="400"
[searching]="searching"></gui-grid>
`
})
export class DocsSearchMatcherComponent {
columns: Array<GuiColumn> = [{
header: 'Project name',
field: 'name'
}, {
header: 'Owner',
field: 'owner',
view: (owner: any) => {
return '<b>' + owner.firstName + ' ' + owner.lastName + '</b>';
},
matcher: (owner: any) => {
return owner.firstName + ' ' + owner.lastName;
}
}, {
header: 'Company',
field: 'company',
type: GuiDataType.STRING
}, {
header: 'Deadline',
field: 'deadline',
type: GuiDataType.DATE
}, {
header: 'Progress',
field: 'progress',
type: GuiDataType.NUMBER,
view: GuiCellView.PERCENTAGE
}];
source: Array<any> = [projects];
searching: GuiSearching = {
enabled: true,
placeholder: 'Search project'
};
}const projects = [{
name: 'Fusion',
company: 'ACME Corporation',
deadline: new Date(2020, ...),
progress: 72,
owner: {
firstName: 'Bruce',
lastName: 'Wayne'
}
}, ...];Searching - Inputs
| Input | Type | Default | Description |
|---|---|---|---|
| enabled | boolean | false | Enables searching feature. |
| highlighting | boolean | false | Enables highlighting, which marks search phrase in the grid. |
| placeholder | string | 'Search' | Configures placeholder for input search field. |
| phrase | string | - | Starting search phrase for the searching feature. |
Searching - Outputs
| Output | Type | Description |
|---|---|---|
| searchPhraseChanged | EventEmitter<string> | Emits search phrase typed in the search input by the user. |