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
Sultans of Sales
Marina Powell
ACME Corporation 28/06/2019 32 %
White Feather
Sam Guzman
Globex Corporation 05/08/2019 36 %
Cryptowizard
Adrienne Crawford
Soylent Corp 25/01/2021 93 %
Chained
Modestus Mitchell
ACME Corporation 24/12/2020 90 %
Firestorm
Victoria Carlson
Globex Corporation 30/12/2018 14 %
MettlePaw
Mollie Knight
Soylent Corp 26/07/2020 74 %
Cold Fusion
Narda Coleman
ACME Corporation 28/10/2018 7 %
Rainbow Wish
Cordelia Holmes
Globex Corporation 24/08/2020 77 %
Tungston
Genevieve Palmer
Soylent Corp 27/04/2020 64 %
Revolution
Floyd Wood
ACME Corporation 27/05/2019 29 %
UrbanSuper
Eunice Lawson
Globex Corporation 15/08/2020 76 %
Blue Moon
Virgil Lopez
Soylent Corp 19/09/2018 3 %
UglyFox
Aemilia Harper
ACME Corporation 14/09/2020 79 %
Cryptolink
Narda Coleman
Globex Corporation 26/12/2020 90 %
Network Safe
Oistin Morrison
Soylent Corp 09/01/2021 91 %
Royal
Fortitude Gutierrez
ACME Corporation 24/04/2020 64 %
RapidBrite
Adrienne Crawford
Globex Corporation 25/09/2020 80 %
Rainbow Wish
Lawrence Bennett
Soylent Corp 23/08/2020 77 %
Canary
Beatrice Fisher
ACME Corporation 22/11/2019 48 %
Fusion
Julius Morris
Globex Corporation 09/01/2019 15 %
Hornets
Julius Morris
Soylent Corp 03/02/2019 17 %
Next Tiger
Virgil Lopez
ACME Corporation 03/10/2019 43 %
Poseidon
Matilda Hayes
Globex Corporation 09/05/2019 27 %
Bordeaux
Lawrence Bennett
Soylent Corp 27/09/2018 4 %
Great Marvell
Karmen Sanders
ACME Corporation 08/07/2020 72 %
Bride of Buster
Sylvia Thomas
Globex Corporation 29/09/2018 4 %
The Cheque Hub
Dido Brown
Soylent Corp 17/02/2021 95 %
Topaz
Lily Hill
ACME Corporation 12/05/2020 66 %
Hackifyoucan
Lulu Hunt
Globex Corporation 21/01/2021 92 %
Quadro
Mollie Knight
Soylent Corp 18/05/2019 28 %
Bride of Buster
Beatrice Fisher
ACME Corporation 29/09/2018 4 %
hashtag
Isaac Gardner
Globex Corporation 09/12/2019 50 %
Gold Star
Oistin Morrison
Soylent Corp 14/01/2019 15 %
Spell of Blockchain
Marina Powell
ACME Corporation 31/01/2021 93 %
Jaguar
Julius Morris
Globex Corporation 16/02/2019 19 %
BlockMagic
Barbara James
Soylent Corp 27/01/2021 93 %
Quadro
Floyd Wood
ACME Corporation 19/05/2019 28 %
AeronMan
Sylvia Thomas
Globex Corporation 21/09/2020 80 %
Rhinestone
Floyd Wood
Soylent Corp 11/10/2019 43 %
Dead Beta
Fortitude Gutierrez
ACME Corporation 19/01/2020 54 %
Crypto-tium
Florence Phillips
Globex Corporation 16/03/2021 98 %
Cherrystone
Oistin Morrison
Soylent Corp 23/10/2018 6 %
Kodiak
Genevieve Palmer
ACME Corporation 02/03/2019 20 %
Spell of Blockchain
Cordelia Holmes
Globex Corporation 01/02/2021 94 %
Cyclone
Dido Brown
Soylent Corp 10/11/2018 8 %
X mind
Dabria Moreno
ACME Corporation 19/12/2019 51 %
Indigo
Mollie Rice
Globex Corporation 16/02/2020 57 %
Fireball
Pauline Palmer
Soylent Corp 26/12/2018 13 %
Jonah
Virgil Lopez
ACME Corporation 17/02/2019 19 %
Voyager
Dabria Moreno
Globex Corporation 25/05/2020 67 %
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.