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
Gemini-84
Khara Patel
ACME Corporation 08/02/2020 56 %
Camelot
Claire Andrews
Globex Corporation 07/10/2018 5 %
Fast Payments
Modestus Gilbert
Soylent Corp 26/02/2021 96 %
Yellow Moose
Jeanette Long
ACME Corporation 15/08/2019 37 %
Charlie
Matilda Thomas
Globex Corporation 05/10/2019 43 %
FlyTap
Allen Flores
Soylent Corp 08/08/2020 75 %
Voyager
Allie Ward
ACME Corporation 26/07/2019 35 %
PayNow!
Claire Andrews
Globex Corporation 10/03/2021 97 %
Rhinestone
Sylvia Herrera
Soylent Corp 29/05/2019 29 %
Top Tiger
Khara Patel
ACME Corporation 05/07/2020 72 %
RightTrack
Rebecca Jimenez
Globex Corporation 20/10/2020 83 %
Skyhawks
Paul Daniels
Soylent Corp 18/06/2019 31 %
LittleShine
Camille Carpenter
ACME Corporation 17/09/2020 79 %
Zenderon
Eli Carpenter
Globex Corporation 11/09/2020 79 %
Achieve Loft
Dillian Wilson
Soylent Corp 02/10/2020 81 %
YoungMarker
Harold Moreno
ACME Corporation 24/09/2020 80 %
Futureishere
Salina Warren
Globex Corporation 29/03/2021 99 %
Lobster
Hugh Riley
Soylent Corp 01/10/2019 42 %
City of Bitcoins
Regina Andrews
ACME Corporation 23/01/2021 93 %
BrettMan
Lily Reynolds
Globex Corporation 31/07/2020 74 %
Royal
Allen Flores
Soylent Corp 24/04/2020 64 %
BrickHOuse
Beatrice Wheeler
ACME Corporation 09/12/2020 88 %
The Novice Crypto
Modestus Gilbert
Globex Corporation 21/12/2020 89 %
HopeStone
Camille Carpenter
Soylent Corp 16/10/2020 82 %
Smart Money
Matilda Thomas
ACME Corporation 19/02/2021 95 %
Rampage
Laura Daniels
Globex Corporation 24/05/2019 29 %
Dangerous Rocks
Livi Gibson
Soylent Corp 15/11/2018 9 %
CryptoAbode
Rosa Hamilton
ACME Corporation 19/01/2021 92 %
Blue Moon
Neci Kelly
Globex Corporation 19/09/2018 3 %
The Cheque Hub
Dillian Wilson
Soylent Corp 18/02/2021 95 %
Gold Star
Jeanette Long
ACME Corporation 16/01/2019 15 %
Uzzin
Grace Bryant
Globex Corporation 15/05/2020 66 %
Autopsy
Allen Flores
Soylent Corp 26/01/2020 55 %
Reborn Flag
Neci Kelly
ACME Corporation 19/04/2020 63 %
Trusty-crypto
Lily Reynolds
Globex Corporation 05/04/2021 100 %
CheckBalance
Sabrina Reyes
Soylent Corp 09/02/2021 94 %
PurpleCow
Marion Mendoza
ACME Corporation 24/11/2020 86 %
Roadrunner
Maxine Greene
Globex Corporation 19/10/2019 44 %
Hades
Quirita Scott
Soylent Corp 23/01/2019 16 %
Rhinestone
Odina Kennedy
ACME Corporation 10/10/2019 43 %
The Bomb Squad
Regina Andrews
Globex Corporation 06/07/2019 33 %
PepperSmith
Harold Moreno
Soylent Corp 14/08/2020 76 %
Dagwood
Sylvia Herrera
ACME Corporation 12/11/2018 9 %
Durango
Hugh Riley
Globex Corporation 06/12/2018 11 %
Husky Cat
Vita Moreno
Soylent Corp 03/07/2020 71 %
Phoenix
Grace Bryant
ACME Corporation 30/04/2019 26 %
Steamy Ray
Quirita Scott
Globex Corporation 06/09/2019 40 %
Mad Hatter
Hugh Riley
Soylent Corp 27/02/2020 58 %
The Strongbox
Eli Carpenter
ACME Corporation 13/02/2021 95 %
Blockchain Country
Claire Andrews
Globex Corporation 13/12/2020 88 %
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.