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
Striped Foxes
Harvey Hamilton
ACME Corporation 26/06/2019 32 %
DollarHouse
Alva Allen
Globex Corporation 25/03/2021 99 %
Sputnik
Alba Henry
Soylent Corp 04/05/2020 65 %
Fusion
Mike Peters
ACME Corporation 31/01/2020 55 %
RockStable
Liliana Campbell
Globex Corporation 03/10/2020 81 %
Crypto Experts
Aemilia Ortiz
Soylent Corp 09/01/2021 91 %
Tribe
Celia Vargas
ACME Corporation 21/07/2019 35 %
Trion Tree
Kitty Walker
Globex Corporation 13/11/2020 85 %
Canary
Alex Lynch
Soylent Corp 21/11/2019 48 %
hashtag
Clementine Jimenez
ACME Corporation 07/12/2019 49 %
Casanova
Nora Burke
Globex Corporation 22/11/2019 48 %
Vikings
Aemilia Reed
Soylent Corp 21/07/2019 35 %
Fireball
Mike Peters
ACME Corporation 27/12/2018 13 %
Mountaineers
Silas Castillo
Globex Corporation 09/04/2019 24 %
The Crypto Trend
Bert Jackson
Soylent Corp 17/01/2021 92 %
Silverstar
Aemilia Ortiz
ACME Corporation 26/10/2019 45 %
GoldFish
Maricel Gutierrez
Globex Corporation 30/08/2020 77 %
Riviera
Mike Peters
Soylent Corp 01/06/2019 30 %
Silverstar
Mary Rose
ACME Corporation 27/10/2019 45 %
City of Bitcoins
Maricel Gutierrez
Globex Corporation 23/01/2021 93 %
Ivory
Dan Holmes
Soylent Corp 21/09/2019 41 %
Hydra
Nedra Larson
ACME Corporation 07/02/2019 18 %
Desert Albatross
Maricel Gutierrez
Globex Corporation 12/12/2019 50 %
Omega
Petula Warren
Soylent Corp 19/03/2020 60 %
Hades
Alex Lynch
ACME Corporation 24/01/2019 16 %
Foster
August Flores
Globex Corporation 03/01/2020 52 %
Vegas
Kitty Walker
Soylent Corp 19/05/2020 67 %
Graphon
Alex King
ACME Corporation 06/12/2020 88 %
Disco Ninjas
Christine Diaz
Globex Corporation 29/11/2018 10 %
Lorax
Valisa Armstrong
Soylent Corp 18/03/2019 22 %
Nautilus
Cassiel Marshall
ACME Corporation 12/04/2019 24 %
PurpleCow
Alva Allen
Globex Corporation 23/11/2020 86 %
Ranzer
Oriana Cooper
Soylent Corp 17/06/2020 70 %
Batman
Odina Flores
ACME Corporation 08/09/2018 2 %
GoodTrace
Barbara Sullivan
Globex Corporation 09/11/2020 85 %
Cheerio
Ursula Collins
Soylent Corp 22/10/2018 6 %
Skyhawks
Tisha Elliott
ACME Corporation 18/06/2019 31 %
Pharoahs
Lizzie Bryant
Globex Corporation 28/04/2019 26 %
MettlePaw
Alex Lynch
Soylent Corp 24/07/2020 73 %
Python
Ursula Collins
ACME Corporation 05/04/2020 62 %
Spell of Blockchain
Aemilia Ortiz
Globex Corporation 31/01/2021 93 %
Bordeaux
Alex King
Soylent Corp 26/09/2018 4 %
Sunergy
Tisha Elliott
ACME Corporation 03/07/2019 33 %
Safe Transact
Nelson Burns
Globex Corporation 20/12/2020 89 %
Elmer
Sabana Wilson
Soylent Corp 20/12/2018 12 %
Pink Ladies
Nedra Larson
ACME Corporation 04/05/2019 27 %
Quadro
Nedra Larson
Globex Corporation 20/05/2019 28 %
Zenderon
Odina Flores
Soylent Corp 13/09/2020 79 %
Project X
Clementine Jimenez
ACME Corporation 13/05/2019 28 %
RapidBrite
Manuel Taylor
Globex Corporation 25/09/2020 80 %
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.