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
Rhinestone
Laura Crawford
ACME Corporation
30/05/2019
29 %
Pink Ladies
Adam Wagner
Globex Corporation
04/05/2019
27 %
BlueDrops
Fannie Cole
Soylent Corp
20/07/2020
73 %
Omega
Valonia Chapman
ACME Corporation
18/04/2019
25 %
Sultans of Sales
Louise Kelley
Globex Corporation
28/06/2019
32 %
The Crypto Party
Celia Berry
Soylent Corp
18/12/2020
89 %
City of Bitcoins
Ralph Cole
ACME Corporation
23/01/2021
93 %
Python
Orchid Gutierrez
Globex Corporation
17/05/2019
28 %
Diesel
Emma Dean
Soylent Corp
25/11/2018
10 %
Bladerunner
Wilson Allen
ACME Corporation
01/11/2019
46 %
Moonshine
Lucy Gardner
Globex Corporation
06/04/2019
24 %
FastTransactions
Lucy Gardner
Soylent Corp
01/03/2021
96 %
OutofRisk Crypto
Mollie Oliver
ACME Corporation
11/02/2021
95 %
Illumino Eye
Karlee Morgan
Globex Corporation
20/11/2020
86 %
Clear Transaction
Susie Austin
Soylent Corp
07/04/2021
100 %
Riviera
Alonzo Gilbert
ACME Corporation
13/04/2020
63 %
Beta Finger
Tristana Anderson
Globex Corporation
29/06/2020
71 %
Rare
Jessie Wells
Soylent Corp
09/12/2019
50 %
Kryptonite
Newton Gray
ACME Corporation
21/02/2020
57 %
Bullwinkle
Lenora Obrien
Globex Corporation
02/10/2018
4 %
Orion
Emily Kelley
Soylent Corp
21/03/2020
60 %
RandomSky
Wilson Allen
ACME Corporation
24/10/2020
83 %
Red Butter
Lucy Gardner
Globex Corporation
25/05/2019
29 %
Safe Deposits
Laura Wells
Soylent Corp
15/02/2021
95 %
Lobster
Lenora Obrien
ACME Corporation
30/09/2019
42 %
Husky Cat
Everett Edwards
Globex Corporation
05/02/2019
17 %
The Novice Crypto
Gill Hunter
Soylent Corp
21/12/2020
89 %
Cyclone
Mollie Oliver
ACME Corporation
10/11/2018
8 %
Boomrenge
Earl Chapman
Globex Corporation
21/10/2019
44 %
Zulu
Verena Martin
Soylent Corp
24/08/2019
38 %
Bride of Buster
Laura Wells
ACME Corporation
27/09/2018
4 %
Green Jade
Imogene Hart
Globex Corporation
21/01/2019
16 %
Crypto-tium
Adam Wagner
Soylent Corp
14/03/2021
98 %
Edison
Lora Jackson
ACME Corporation
14/12/2018
12 %
Whistler
Sebastianne Carlson
Globex Corporation
03/08/2019
36 %
GoodTrace
Gill Hunter
Soylent Corp
09/11/2020
85 %
Cryptowizard
Adeline Watson
ACME Corporation
26/01/2021
93 %
Firestorm
Sarah Dixon
Globex Corporation
01/01/2019
14 %
Tungston
John Ford
Soylent Corp
27/04/2020
64 %
Smart Money
Cordelia Arnold
ACME Corporation
19/02/2021
95 %
Fusion
Verena Martin
Globex Corporation
31/01/2020
55 %
Epic Touch
Emily Kelley
Soylent Corp
10/07/2020
72 %
Illumina Sky
Rhea Oliver
ACME Corporation
30/07/2020
74 %
Skyhawks
Adam Wagner
Globex Corporation
17/06/2019
31 %
Diesel
Mildred Hansen
Soylent Corp
25/11/2018
10 %
Striped Foxes
Mollie Oliver
ACME Corporation
27/06/2019
32 %
Kryptonite
Lucy Gardner
Globex Corporation
02/03/2019
20 %
Python
John Ford
Soylent Corp
16/05/2019
28 %
MIghtyRise
Lucy Gardner
ACME Corporation
21/11/2020
86 %
Bender
Celia Berry
Globex Corporation
12/09/2018
2 %
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.