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
Cryptowizard
Ginger Chavez
ACME Corporation
24/01/2021
93 %
TopCow
Guy Payne
Globex Corporation
10/05/2020
66 %
Sultans of Sales
Messina Watson
Soylent Corp
29/06/2019
33 %
Town of Coins
Felix Johnston
ACME Corporation
24/03/2021
99 %
FastTransactions
Virgo Gilbert
Globex Corporation
28/02/2021
96 %
Prelude
Marion Larson
Soylent Corp
10/05/2019
27 %
Riviera
Jessie Robinson
ACME Corporation
01/06/2019
30 %
HotJava
Maude Stewart
Globex Corporation
13/02/2020
56 %
Batman
Felix Johnston
Soylent Corp
08/09/2018
2 %
Astron
Lydia Ramirez
ACME Corporation
31/08/2019
39 %
White Feather
Cordelia Long
Globex Corporation
04/08/2019
36 %
Flamingo
Sally Robertson
Soylent Corp
04/01/2019
14 %
ArizonaBay
Calcite Jenkins
ACME Corporation
28/07/2020
74 %
PowerPlex
Melvin Meyer
Globex Corporation
06/10/2020
81 %
Cherrystone
Claud Duncan
Soylent Corp
25/10/2018
7 %
Horned Frogs
Norma Vargas
ACME Corporation
31/01/2019
17 %
Indigo
Marshall Tran
Globex Corporation
09/02/2019
18 %
Fusion
Bertha Reyes
Soylent Corp
09/01/2019
15 %
Ranzer
Camille Jensen
ACME Corporation
17/06/2020
70 %
white Feather
Ginger Diaz
Globex Corporation
02/06/2020
68 %
Colossus
Lawrence White
Soylent Corp
30/10/2018
7 %
Sunburst
Bertha Reyes
ACME Corporation
01/07/2019
33 %
Irongate
Jay Hernandez
Globex Corporation
18/02/2020
57 %
The Crypt Narration
Ginger Chavez
Soylent Corp
09/03/2021
97 %
Firetruck
Cordelia Long
ACME Corporation
03/01/2019
14 %
Zenderon
Cordelia Long
Globex Corporation
12/09/2020
79 %
Odyssey
Melba Perry
Soylent Corp
17/03/2020
60 %
HotJava
Citrine Salazar
ACME Corporation
14/02/2020
57 %
Bender
Peter Gutierrez
Globex Corporation
12/09/2018
2 %
Alberton
Barbara Robinson
Soylent Corp
18/07/2020
73 %
OutofRisk Crypto
Messina Watson
ACME Corporation
10/02/2021
95 %
Bladerunner
Lawrence White
Globex Corporation
01/11/2019
46 %
Omega
Calcite Jenkins
Soylent Corp
19/04/2019
25 %
Husky Cat
Jessie Robinson
ACME Corporation
06/02/2019
18 %
Zeus
Lydia Lopez
Globex Corporation
21/08/2019
38 %
Crypto Companion
Jay Hernandez
Soylent Corp
22/03/2021
99 %
Quicksilver
Fredrick Nelson
ACME Corporation
21/05/2019
28 %
Project X
Jovanna Henry
Globex Corporation
03/04/2020
62 %
KingFish
Virgo Gilbert
Soylent Corp
25/02/2019
19 %
Fireball
Revelation Perry
ACME Corporation
27/12/2018
13 %
Ultimate Currant
Citrine Salazar
Globex Corporation
04/07/2020
71 %
Sultans of Sales
Norma Vargas
Soylent Corp
28/06/2019
32 %
Prelude
Beata Palmer
ACME Corporation
11/05/2019
27 %
HotJava
Viola Jensen
Globex Corporation
13/02/2020
56 %
FreshMove
Jovanna Henry
Soylent Corp
05/09/2019
40 %
Wide string
Viola Hawkins
ACME Corporation
31/05/2020
68 %
Hades
Norma Vargas
Globex Corporation
25/01/2019
16 %
GoodTrace
Claud Duncan
Soylent Corp
08/11/2020
85 %
Foster
Amory Knight
ACME Corporation
03/01/2020
52 %
Timberwolves
Marion Larson
Globex Corporation
09/07/2019
34 %
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: