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.

Example
search.component.ts
Index
Character
Real name
Abilities
1
Batman
Bruce Wayne
money
2
Flash
Barry Allen
speed
3
Superman
Clark Kent
invincible
4
Wonder Woman
Diana Prince
superhuman strength
5
Nightwing
Dick Grayson
martial arts
6
Green Lantern
Hal Jordan
Power ring
7
Green Arrow
Oliver Queen
money
8
Aquaman
Arthur Curry
can talk with fishes
9
Martian Manhunter
John Jones
telepathy
10
Captain Marvel
Billy Batson
superhuman abilities
11
Black Canary
Laurel Lance
sonic scream
12
Zatanna
Zatanna
magic
13
Robin
Damian Wayne
martial arts, gadgets
14
Supergirl
Kara Zor-El
superhuman powers
15
Batgirl
Barbara Gordon
speed, flexibility and strength
16
Cyborg
Vic Stone
high-tech gadgets
17
Kid Flash
Wally West
speed
18
Catwoman
Selina Kyle
stealthy and agile
19
Red Robin
Tim Drake
martial arts
20
John Constantine
John Constantine
sorcery
21
Raven
Rachel Roth
dark magic
22
Starfire
Koriand'r
flight and energy projection
23
Beast Boy
Garfield Logan
shape-shifting
24
Hawkgirl
Kendra Saunders
flight
25
Doctor Fate
Kent Nelson
magic
26
Red Hood
Jason Todd
martial arts
27
Firestorm
Ronnie Raymond / Martin Stein
nuclear power
28
The Atom
Ray Palmer
size-changing
29
Jonah Hex
Jonah Hex
excellent gunslinger
30
Joker
Clown Prince of Crime
deadly and unpredictable
31
Lex Luthor
Alexander Luthor
money
32
Darkseid
Darkseid
unparalleled strength
33
Sinestro
Thaal Sinestro
power ring
34
Brainiac
Vril Dox
Extremely advanced mental abilities
35
Black Adam
Teth-Adam
superhuman abilities
36
Ra's al Ghul
Head of the Demon
immortality
37
Deathstrok
Slade Wilson
enhanced strength, agility and intelligence
38
Two-Face
Harvey Dent
can flip coins
39
Vandal Savage
Vandal Savage
immortality
40
Reverse Flash
Eobard Thawne
speed
41
Doomsday
Doomsday
regenerative abilities
42
Mongul
Mongul I
superhuman abilities
43
Bizarro
Bizarro
has many duplicates
44
Riddler
Edward Nygma
excellent at creating riddles
45
Maxwell Lord
Maxwell Lord IV
mind control
46
Captain Cold
Leonard Snart
cold gun
47
Bane
Bane
good at taking steroid
48
Harley Quinn
Harleen Quinzel
spending money
49
Gorilla Grodd
Gorilla Grodd
super-intelligence
50
Lobo
Lobo
incredible strength and regeneration
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.

Example
highlight.component.ts
highlight.config.ts
Index
Character
Real name
Abilities
1
Batman
Bruce Wayne
money
3
Superman
Clark Kent
invincible
4
Wonder Woman
Diana Prince
superhuman strength
8
Aquaman
Arthur Curry
can talk with fishes
9
Martian Manhunter
John Jones
telepathy
10
Captain Marvel
Billy Batson
superhuman abilities
14
Supergirl
Kara Zor-El
superhuman powers
18
Catwoman
Selina Kyle
stealthy and agile
35
Black Adam
Teth-Adam
superhuman abilities
42
Mongul
Mongul I
superhuman abilities
43
Bizarro
Bizarro
has many duplicates
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.

Example
matcher.component.ts
projects.ts
Project name
Owner
Company
Deadline
Progress
Lobster
Emma Hill
ACME Corporation
29/09/2019
42 %
Colossus
Melvin Gilbert
Globex Corporation
02/12/2019
49 %
LittleShine
Levana Hudson
Soylent Corp
16/09/2020
79 %
Seawolves
Melvin Gilbert
ACME Corporation
14/06/2019
31 %
Flamy Cat
Maeve Diaz
Globex Corporation
30/01/2020
55 %
Yaeger
Amity Bell
Soylent Corp
06/06/2020
68 %
Amigos
Nellie Knight
ACME Corporation
19/08/2018
0 %
The Violent Storms
Lena Freeman
Globex Corporation
06/07/2019
33 %
Zenderon
Lena Freeman
Soylent Corp
11/09/2020
79 %
Barcelona
Will Gray
ACME Corporation
25/09/2019
42 %
Lobster
Jess Andrews
Globex Corporation
14/03/2019
21 %
Steamy Ray
Hettie Taylor
Soylent Corp
06/09/2019
40 %
PercipientMoney
Marion George
ACME Corporation
25/02/2021
96 %
Next Tiger
Marion George
Globex Corporation
02/10/2019
43 %
Kingsmen
Hester Jordan
Soylent Corp
27/02/2019
20 %
Bride of Buster
Septima Gutierrez
ACME Corporation
27/09/2018
4 %
TopCow
Nellie Knight
Globex Corporation
09/05/2020
65 %
Yellow Moose
Morris Henry
Soylent Corp
15/08/2019
37 %
Fester
Lucy Bailey
ACME Corporation
24/12/2018
13 %
Blue Moon
Maeve Diaz
Globex Corporation
20/09/2018
3 %
Firetruck
Nelson Ward
Soylent Corp
17/01/2020
54 %
SilverSoft
Merit Turner
ACME Corporation
27/10/2020
83 %
Barney
Harold Mitchell
Globex Corporation
06/09/2018
1 %
Himalaya Fly
Merit Turner
Soylent Corp
16/07/2020
73 %
Maroon
Phoebe Jimenez
ACME Corporation
26/03/2019
23 %
MasQue
Phoebe Jimenez
Globex Corporation
02/12/2020
87 %
Frostbite
Benedetta Allen
Soylent Corp
09/06/2020
69 %
Helium
Wallace Armstrong
ACME Corporation
12/06/2020
69 %
Seawolves
Morris Henry
Globex Corporation
14/06/2019
31 %
MagniZent
Nelson Ward
Soylent Corp
08/11/2020
85 %
Soul Spartans
Addie Mills
ACME Corporation
19/06/2019
32 %
Rampage
Melvin Gilbert
Globex Corporation
12/04/2020
63 %
Early First
Maeve Diaz
Soylent Corp
09/12/2018
11 %
Honeycomb
Maeve Diaz
ACME Corporation
30/01/2019
17 %
Striped Foxes
Lizzie Larson
Globex Corporation
26/06/2019
32 %
PowerPlex
Quirina Moore
Soylent Corp
07/10/2020
81 %
Early First
Melvin Gilbert
ACME Corporation
15/11/2019
47 %
Yosemite
Oscar Mitchell
Globex Corporation
19/08/2019
38 %
Mango
Hettie Taylor
Soylent Corp
24/03/2019
22 %
Elmer
Lucy Bailey
ACME Corporation
21/12/2018
13 %
Sunergy
Nellie Knight
Globex Corporation
06/05/2020
65 %
RapidBrite
Florence Oliver
Soylent Corp
25/09/2020
80 %
Fusion
Nelson Ward
ACME Corporation
02/02/2020
55 %
Bulldozer
Merit Turner
Globex Corporation
30/09/2018
4 %
Moonshine
Florence Oliver
Soylent Corp
09/03/2020
59 %
Skyhawks
Spica Ford
ACME Corporation
18/06/2019
31 %
PocketSafe
Emma Hill
Globex Corporation
15/01/2021
92 %
Sirius
Florence Oliver
Soylent Corp
16/06/2019
31 %
Mercury
Lulu Chapman
ACME Corporation
02/04/2019
23 %
white Feather
Lizzie Larson
Globex Corporation
01/06/2020
68 %
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

InputTypeDefaultDescription
enabledbooleanfalse Enables searching feature.
highlightingbooleanfalse Enables highlighting, which marks search phrase in the grid.
placeholderstring'Search' Configures placeholder for input search field.
phrasestring- Starting search phrase for the searching feature.

Searching - Outputs

OutputTypeDescription
searchPhraseChangedEventEmitter<string>Emits search phrase typed in the search input by the user.

Related articles:






We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.