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
1BatmanBruce Waynemoney2FlashBarry Allenspeed3SupermanClark Kentinvincible4Wonder WomanDiana Princesuperhuman strength5NightwingDick Graysonmartial arts6Green LanternHal JordanPower ring7Green ArrowOliver Queenmoney8AquamanArthur Currycan talk with fishes9Martian ManhunterJohn Jonestelepathy10Captain MarvelBilly Batsonsuperhuman abilities11Black CanaryLaurel Lancesonic scream12ZatannaZatannamagic13RobinDamian Waynemartial arts, gadgets14SupergirlKara Zor-Elsuperhuman powers15BatgirlBarbara Gordonspeed, flexibility and strength16CyborgVic Stonehigh-tech gadgets17Kid FlashWally Westspeed18CatwomanSelina Kylestealthy and agile19Red RobinTim Drakemartial arts20John ConstantineJohn Constantinesorcery21RavenRachel Rothdark magic22StarfireKoriand'rflight and energy projection23Beast BoyGarfield Loganshape-shifting24HawkgirlKendra Saundersflight25Doctor FateKent Nelsonmagic26Red HoodJason Toddmartial arts27FirestormRonnie Raymond / Martin Steinnuclear power28The AtomRay Palmersize-changing29Jonah HexJonah Hexexcellent gunslinger30JokerClown Prince of Crimedeadly and unpredictable31Lex LuthorAlexander Luthormoney32DarkseidDarkseidunparalleled strength33SinestroThaal Sinestropower ring34BrainiacVril DoxExtremely advanced mental abilities35Black AdamTeth-Adamsuperhuman abilities36Ra's al GhulHead of the Demonimmortality37DeathstrokSlade Wilsonenhanced strength, agility and intelligence38Two-FaceHarvey Dentcan flip coins39Vandal SavageVandal Savageimmortality40Reverse FlashEobard Thawnespeed41DoomsdayDoomsdayregenerative abilities42MongulMongul Isuperhuman abilities43BizarroBizarrohas many duplicates44RiddlerEdward Nygmaexcellent at creating riddles45Maxwell LordMaxwell Lord IVmind control46Captain ColdLeonard Snartcold gun47BaneBanegood at taking steroid48Harley QuinnHarleen Quinzelspending money49Gorilla GroddGorilla Groddsuper-intelligence50LoboLoboincredible 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
Whistler
Garnet Cole
ACME Corporation28/05/2020 67 %
HopeStone
Kambrea Schmidt
Globex Corporation16/10/2020 82 %
Tango
Lachesis Stevens
Soylent Corp14/10/2019 44 %
Echo Lake
Lara Oliver
ACME Corporation13/12/2018 12 %
Desert Albatross
Lucinda Hudson
Globex Corporation13/12/2019 50 %
Great Marvell
Winnie Arnold
Soylent Corp08/07/2020 72 %
Solid Alpha
Auburn Miller
ACME Corporation05/02/2020 56 %
Cyclone
Nelson Burns
Globex Corporation04/12/2019 49 %
Antix Ant
Lilian Hudson
Soylent Corp12/10/2020 82 %
Edison
Winnie Arnold
ACME Corporation14/12/2018 12 %
Romeo
Muriel Hicks
Globex Corporation19/04/2020 63 %
Barcelona
Arva Franklin
Soylent Corp23/09/2019 42 %
Massive Monkey
Willie Simpson
ACME Corporation28/03/2019 23 %
Mustangs
Franklin Brown
Globex Corporation10/04/2019 24 %
Yaeger
Lachesis Stevens
Soylent Corp07/06/2020 69 %
Echo Lake
Amity Knight
ACME Corporation12/12/2018 12 %
ShinyWaves
Phoebe Long
Globex Corporation10/10/2020 82 %
white Feather
Willie Simpson
Soylent Corp01/06/2020 68 %
Duraflame
Urbana Graham
ACME Corporation03/12/2018 11 %
Orion
Lara Oliver
Globex Corporation24/04/2019 26 %
Indigo
Francis Clark
Soylent Corp16/02/2020 57 %
Edison
Sam Warren
ACME Corporation14/12/2018 12 %
WhiteJacks
Laura Ferguson
Globex Corporation06/09/2020 78 %
Rely-on-crypto
Arva Franklin
Soylent Corp02/04/2021 100 %
Smart Money
Laura Ferguson
ACME Corporation20/02/2021 96 %
Malibu
Stephen Hunt
Globex Corporation22/03/2019 22 %
Stratos
Willie Simpson
Soylent Corp24/06/2019 32 %
Yellow Moose
Sam Warren
ACME Corporation14/08/2019 37 %
Moonshot
Willie Simpson
Globex Corporation08/06/2020 69 %
Disco Ninjas
Constance Fisher
Soylent Corp29/11/2018 10 %
Ancient Dots
Lucy Stevens
ACME Corporation03/08/2020 75 %
Indigo
Stella Anderson
Globex Corporation16/02/2020 57 %
Python
Auburn Miller
Soylent Corp04/04/2020 62 %
Omega
Elsie Washington
ACME Corporation19/04/2019 25 %
Flamingo
Aaron Patel
Globex Corporation04/01/2019 14 %
Firefly
Benedetta Ross
Soylent Corp30/12/2018 14 %
Solid Alpha
Lavinia Ford
ACME Corporation05/02/2020 56 %
Bordeaux
Mike Burke
Globex Corporation06/11/2019 46 %
Random
Kadenza Olson
Soylent Corp14/09/2019 41 %
Casanova
Blase Daniels
ACME Corporation11/10/2018 5 %
Blue Moon
Harrison Nichols
Globex Corporation19/09/2018 3 %
Seawolves
Sam Warren
Soylent Corp13/06/2019 31 %
Batman
Garnet Cole
ACME Corporation09/09/2018 2 %
Cauldron
Candra Garcia
Globex Corporation15/10/2018 6 %
Apollo
Blase Daniels
Soylent Corp29/08/2019 39 %
Sahara
Aaron Patel
ACME Corporation09/06/2019 30 %
Torpedo
Willie Simpson
Globex Corporation19/06/2020 70 %
White Feather
Integrity Bishop
Soylent Corp04/08/2019 36 %
Durango
Franklin Brown
ACME Corporation21/12/2019 51 %
Wide Stringer
Lucy Ortiz
Globex Corporation06/08/2019 36 %
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.