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
Fast Payments
Felix Hanson
ACME Corporation
25/02/2021
96 %
The Bomb Squad
Gill Barnes
Globex Corporation
06/07/2019
33 %
Indigo
Jasper Burns
Soylent Corp
17/02/2020
57 %
Bladerunner
Norma Young
ACME Corporation
17/09/2018
3 %
Olive Ong
Minerva Peters
Globex Corporation
08/10/2019
43 %
Hydra
Winfield Nguyen
Soylent Corp
08/02/2019
18 %
Beta Finger
Ginger Green
ACME Corporation
29/06/2020
71 %
Metro
Orchid Hernandez
Globex Corporation
06/03/2020
59 %
Pink Ladies
Estelle Henry
Soylent Corp
04/05/2019
27 %
Ultimate Currant
Scholastica Armstrong
ACME Corporation
04/07/2020
71 %
Boomrenge
Mercedes Wells
Globex Corporation
21/10/2019
44 %
Pure Panther
Harry Hunter
Soylent Corp
14/05/2019
28 %
maroon
Willard Chavez
ACME Corporation
06/10/2019
43 %
Fireball
Wilson Mendoza
Globex Corporation
05/01/2020
52 %
Rhinestone
Benjamin Russell
Soylent Corp
30/05/2019
29 %
Intese Lama
Winfield Nguyen
ACME Corporation
22/04/2020
64 %
Prime Eight
Oscar Torres
Globex Corporation
15/07/2020
73 %
Graphon
Marie Allen
Soylent Corp
07/12/2020
88 %
Quadro
Olive Ray
ACME Corporation
08/04/2020
62 %
Cryptocurrency Globe
Leon Gibson
Globex Corporation
03/02/2021
94 %
Just Jade
Oscar Torres
Soylent Corp
10/02/2020
56 %
Westerners
Winfield Nguyen
ACME Corporation
30/07/2019
36 %
Helium
Sarina Webb
Globex Corporation
13/06/2020
69 %
Indigo
Rosie Gonzalez
Soylent Corp
10/02/2019
18 %
The Violent Storms
Nivea Marshall
ACME Corporation
06/07/2019
33 %
SuproMax
Joe Palmer
Globex Corporation
05/12/2020
87 %
Just Jade
Rosie Gonzalez
Soylent Corp
09/02/2020
56 %
Irongate
Mercedes Wells
ACME Corporation
12/02/2019
18 %
Yaeger
Harry Hunter
Globex Corporation
12/08/2019
37 %
Einstein
Harold Wright
Soylent Corp
17/12/2018
12 %
The Bomb Squad
Cassiel Peters
ACME Corporation
04/07/2019
33 %
Disco Divas
Sarina Webb
Globex Corporation
28/11/2018
10 %
Crusader
Benjamin Russell
Soylent Corp
08/11/2018
8 %
Odyssey
Grace West
ACME Corporation
16/03/2020
60 %
Mango
Myra Kelly
Globex Corporation
25/03/2019
23 %
Red Butter
Warren Moreno
Soylent Corp
24/06/2020
70 %
Firetruck
Gill Barnes
ACME Corporation
03/01/2019
14 %
Cauldron
Scholastica Armstrong
Globex Corporation
15/10/2018
6 %
Riviera
Marie Allen
Soylent Corp
02/06/2019
30 %
Bigfoot
Oscar Torres
ACME Corporation
15/09/2018
2 %
Casanova
Grace West
Globex Corporation
11/10/2018
5 %
Kanga
Fanny Cox
Soylent Corp
22/02/2019
19 %
Firetruck
Rosanne Martin
ACME Corporation
03/01/2019
14 %
Yosemite
Leon Gibson
Globex Corporation
19/08/2019
38 %
Red Butter
Charlotte Wagner
Soylent Corp
23/06/2020
70 %
Spell of Blockchain
Willard Chavez
ACME Corporation
30/01/2021
93 %
Titan
Mercedes Wells
Globex Corporation
07/05/2020
65 %
BrickHOuse
Rosie Gonzalez
Soylent Corp
09/12/2020
88 %
Duracell
Winfield Nguyen
ACME Corporation
02/12/2018
11 %
Green Storm
Fanny Cox
Globex Corporation
30/03/2020
61 %
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: