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
Achieve Loft
Tillie Hoffman
ACME Corporation
30/09/2020
81 %
Actionable Transactions
Imogene Obrien
Globex Corporation
28/12/2020
90 %
The Novice Crypto
Scota Ferguson
Soylent Corp
22/12/2020
89 %
Yaeger
Rhoda Lee
ACME Corporation
13/08/2019
37 %
Phoenix
Nelson Mills
Globex Corporation
29/04/2019
26 %
Wombat
Alice Cunningham
Soylent Corp
05/06/2020
68 %
Flamingo
Lee Ruiz
ACME Corporation
05/01/2019
14 %
Antix Ant
Nelson Mills
Globex Corporation
12/10/2020
82 %
Excalibur
Tristana Garza
Soylent Corp
23/12/2018
13 %
Prelude
Rhoda Lee
ACME Corporation
27/03/2020
61 %
Amigos
Lee Ruiz
Globex Corporation
19/08/2018
0 %
Gold Star
Nohely Andrews
Soylent Corp
14/01/2019
15 %
HopeStone
Elizabeth Moore
ACME Corporation
17/10/2020
82 %
Ivory
Scota Ferguson
Globex Corporation
23/09/2019
41 %
Jonah
Tillie Hoffman
Soylent Corp
18/02/2019
19 %
Aurora
Cecilia Cooper
ACME Corporation
29/08/2018
1 %
Stratos
Eleanor Nelson
Globex Corporation
25/06/2019
32 %
Trion Tree
Lillias Scott
Soylent Corp
13/11/2020
85 %
YoungMarker
Leo James
ACME Corporation
22/09/2020
80 %
Town of Coins
Cara Crawford
Globex Corporation
23/03/2021
99 %
Indigo
Natalie Rice
Soylent Corp
09/02/2019
18 %
Insane hammer
Allie Griffin
ACME Corporation
28/01/2020
55 %
Pink Ladies
Orla Collins
Globex Corporation
04/05/2019
27 %
Town of Coins
Daniel Gutierrez
Soylent Corp
23/03/2021
99 %
Nitro
Elizabeth Moore
ACME Corporation
15/03/2020
60 %
Laguna
Allie Griffin
Globex Corporation
04/03/2019
20 %
Wombat
Grace Wheeler
Soylent Corp
04/06/2020
68 %
Heybro
Scota Ferguson
ACME Corporation
27/09/2020
80 %
Zeus
Orla Collins
Globex Corporation
21/08/2019
38 %
Yodha
Franklin Cox
Soylent Corp
21/06/2020
70 %
Gemini-84
Viviefont Robinson
ACME Corporation
08/02/2020
56 %
Futureishere
Leila Perez
Globex Corporation
31/03/2021
100 %
Gemini
Orla Guzman
Soylent Corp
12/01/2019
15 %
Rainbow Wish
Oriole Carter
ACME Corporation
24/08/2020
77 %
Graphon
Imogene Obrien
Globex Corporation
07/12/2020
88 %
Weekend Warriors
Grace Wheeler
Soylent Corp
28/07/2019
36 %
Insane hammer
Imogene Obrien
ACME Corporation
27/01/2020
55 %
Blockchain Country
Allie Griffin
Globex Corporation
13/12/2020
88 %
MadMatrix
Tristana Garza
Soylent Corp
09/09/2020
78 %
PowerPlex
Veronica Anderson
ACME Corporation
05/10/2020
81 %
Massive Monkey
Oriole Carter
Globex Corporation
29/03/2019
23 %
Antix Ant
Bessie Roberts
Soylent Corp
11/10/2020
82 %
Antix Ant
Grace Wheeler
ACME Corporation
13/10/2020
82 %
Wide string
Leo James
Globex Corporation
31/05/2020
68 %
SugarLady
Lorinda Ryan
Soylent Corp
22/10/2020
83 %
hashtag
Bessie Roberts
ACME Corporation
07/12/2019
49 %
LittleShine
Isabelle Taylor
Globex Corporation
16/09/2020
79 %
Cherrystone
Isabelle Taylor
Soylent Corp
27/11/2019
48 %
The Crypto Party
Scota Ferguson
ACME Corporation
17/12/2020
89 %
Kingsmen
Alva Carter
Globex Corporation
27/02/2019
20 %
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: