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
Rampage
Terah Castillo
ACME Corporation 22/05/2019 29 %
HopeStone
Arthur Russell
Globex Corporation 16/10/2020 82 %
maroon
Terah Castillo
Soylent Corp 07/10/2019 43 %
Camelot
Lotta Bryant
ACME Corporation 07/10/2018 5 %
Longhorns
Dora Romero
Globex Corporation 15/03/2019 21 %
LockedinSafety
Fred Perry
Soylent Corp 04/04/2021 100 %
HappyClub
Maud Garcia
ACME Corporation 23/07/2020 73 %
Early First
Harriet Perez
Globex Corporation 10/12/2018 12 %
Blue Skywalkers
Louise Harrison
Soylent Corp 22/09/2018 3 %
Durango
Carey Watkins
ACME Corporation 21/12/2019 51 %
Fusion
Rebecca Hart
Globex Corporation 09/01/2019 15 %
Elmer
Lori Campbell
Soylent Corp 21/12/2018 13 %
Blue Skywalkers
Maud Garcia
ACME Corporation 21/09/2018 3 %
Firetruck
Louise Harrison
Globex Corporation 01/01/2019 14 %
MasQue
Lotta Bryant
Soylent Corp 02/12/2020 87 %
Clear Transaction
Sophie Gonzalez
ACME Corporation 07/04/2021 100 %
Flyers
Lotta Bryant
Globex Corporation 06/01/2019 14 %
Severe
Emma Sanchez
Soylent Corp 11/09/2019 40 %
Darwin
Sibyl Watson
ACME Corporation 16/12/2019 50 %
MadMatrix
Florence Bryant
Globex Corporation 08/09/2020 78 %
WhiteJacks
Sadie Reed
Soylent Corp 07/09/2020 78 %
Crypto Experts
Sophie Gonzalez
ACME Corporation 08/01/2021 91 %
The Crypt Narration
Robert Elliott
Globex Corporation 09/03/2021 97 %
Nautilus
Solita Butler
Soylent Corp 12/03/2020 59 %
RuddyRex
Robert Elliott
ACME Corporation 03/09/2020 78 %
Blockchain and Co.
Revelation Patterson
Globex Corporation 29/12/2020 90 %
Echo Lake
Jean Willis
Soylent Corp 12/12/2018 12 %
Next Tiger
Emma Sanchez
ACME Corporation 02/10/2019 42 %
Yosemite
Maggie Gonzalez
Globex Corporation 18/08/2019 38 %
TruQuest
Lettie Davis
Soylent Corp 03/11/2020 84 %
HopeStone
Emma Sanchez
ACME Corporation 17/10/2020 82 %
Helium
Warren Perkins
Globex Corporation 13/06/2020 69 %
Pure Panther
Mattie Woods
Soylent Corp 12/01/2020 53 %
Mercury
Dora Romero
ACME Corporation 05/03/2020 59 %
Business as Unusual
Kira Stone
Globex Corporation 04/10/2018 4 %
Whistler
Virginia Carroll
Soylent Corp 28/05/2020 68 %
Lobster
Sadie Reed
ACME Corporation 30/09/2019 42 %
Topcat
Virginia Carroll
Globex Corporation 16/07/2019 34 %
Kodiak
Sophie Gonzalez
Soylent Corp 28/02/2019 20 %
Mango
Concordia Austin
ACME Corporation 03/03/2020 58 %
Firetruck
Sophie Gonzalez
Globex Corporation 02/01/2019 14 %
Rare
Dorothy Black
Soylent Corp 09/12/2019 50 %
maroon
Tom Howell
ACME Corporation 06/10/2019 43 %
Epic Touch
Lotta Bryant
Globex Corporation 10/07/2020 72 %
Two Scissors
Virginia Carroll
Soylent Corp 22/01/2020 54 %
Irongate
Rebecca Hart
ACME Corporation 18/02/2020 57 %
Golden Bulls
Lettie Davis
Globex Corporation 18/01/2019 16 %
Mercury
Mark Gonzales
Soylent Corp 04/03/2020 59 %
Bull Berry
Tom Howell
ACME Corporation 19/08/2020 76 %
Blockchain-reum
Dora Romero
Globex Corporation 17/03/2021 98 %
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.