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
1BatmanBruce Waynemoney3SupermanClark Kentinvincible4Wonder WomanDiana Princesuperhuman strength8AquamanArthur Currycan talk with fishes9Martian ManhunterJohn Jonestelepathy10Captain MarvelBilly Batsonsuperhuman abilities14SupergirlKara Zor-Elsuperhuman powers18CatwomanSelina Kylestealthy and agile35Black AdamTeth-Adamsuperhuman abilities42MongulMongul Isuperhuman abilities43BizarroBizarrohas 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
Zircon
Violet Boyd
ACME Corporation 23/08/2019 38 %
The Crypt Narration
Sidney Harvey
Globex Corporation 08/03/2021 97 %
Horned Frogs
Lillie Reed
Soylent Corp 02/02/2019 17 %
Ivory
Enza Howard
ACME Corporation 22/09/2019 41 %
TruQuest
Charlie Clark
Globex Corporation 03/11/2020 84 %
Honeycomb
Katharine Bishop
Soylent Corp 12/02/2020 56 %
Charming Chicks
Ernest Brown
ACME Corporation 20/10/2018 6 %
Gemini
Poppy Smith
Globex Corporation 12/01/2019 15 %
Barracuda
Dolores Ryan
Soylent Corp 07/09/2018 2 %
FreshMove
Jay Tran
ACME Corporation 05/09/2019 40 %
Elixir
Odina Ward
Globex Corporation 18/12/2018 12 %
Indigo
Tiara Morris
Soylent Corp 17/02/2020 57 %
Crusader
Vernice Burns
ACME Corporation 08/11/2018 8 %
Elixir
Corky Bell
Globex Corporation 19/12/2018 12 %
Topcat
Tiara Morris
Soylent Corp 15/07/2019 34 %
Yosemite
Eva Thompson
ACME Corporation 18/08/2019 38 %
Edison
Citrine Boyd
Globex Corporation 27/12/2019 51 %
HappyMove
Eddie Miller
Soylent Corp 04/08/2020 75 %
The Crypt Narration
Aemilia Mitchell
ACME Corporation 08/03/2021 97 %
Yaeger
Eva Thompson
Globex Corporation 12/08/2019 37 %
Sunburst
Aderes Fisher
Soylent Corp 14/12/2019 50 %
Rainbow Wish
Aemilia Mitchell
ACME Corporation 24/08/2020 77 %
Pluto
Matthew Nelson
Globex Corporation 07/05/2019 27 %
BrickHOuse
Sidney Harvey
Soylent Corp 09/12/2020 88 %
Firefly
Genesis Alvarez
ACME Corporation 07/01/2020 53 %
Cherrystone
Christina Owens
Globex Corporation 27/11/2019 48 %
PercipientMoney
Charlie Clark
Soylent Corp 24/02/2021 96 %
Laguna
Hulda Robertson
ACME Corporation 04/03/2019 20 %
Monte Mirage
Miranda Jimenez
Globex Corporation 13/07/2020 72 %
AeronMan
Aqualina Black
Soylent Corp 21/09/2020 80 %
Antique
Poppy Smith
ACME Corporation 01/05/2020 65 %
Malibu
Valencia Brown
Globex Corporation 22/03/2019 22 %
Soul Spartans
Maricel Lee
Soylent Corp 20/06/2019 32 %
BrickHOuse
Vera Kelly
ACME Corporation 10/12/2020 88 %
Elmer
Martha Garcia
Globex Corporation 20/12/2018 13 %
The Crypto Nation
Leola Fox
Soylent Corp 10/12/2020 88 %
SugarLady
Candra Chapman
ACME Corporation 23/10/2020 83 %
Odyssey
Jay Tran
Globex Corporation 17/03/2020 60 %
Bull Winky
Tiara Morris
Soylent Corp 19/11/2019 48 %
Reborn Flag
Lora Peters
ACME Corporation 20/04/2020 64 %
Pluto
Odina Ward
Globex Corporation 07/05/2019 27 %
Flamingo
Ernest Brown
Soylent Corp 04/01/2019 14 %
Whistler
Muriel Dean
ACME Corporation 29/05/2020 68 %
Orion
Marcia West
Globex Corporation 24/04/2019 26 %
Safe Deposits
Enza Howard
Soylent Corp 14/02/2021 95 %
Firecracker
Aemilia Mitchell
ACME Corporation 16/09/2019 41 %
Yoda
Emil Franklin
Globex Corporation 16/08/2019 38 %
Bulldozer
Maricel Lee
Soylent Corp 30/09/2018 4 %
Bulldozer
Madonna Reyes
ACME Corporation 08/11/2019 46 %
Jonah
Sarah Gibson
Globex Corporation 19/02/2019 19 %
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.