Searching

Generic UI grid has a built-in search feature. It allows to search value in all GuiDataType.STRING columns. When user types some text into the input grid will scan for this phrase in the data and it will present all rows which matches wanted phrase.

It is really simple to turn on searching. You just have to set input searching to true. Default value is false.

searching: GuiSearching = {
	enabled: true
};
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({
	selector: 'gweb-docs-search-basic',
	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
	};

	constructor(private dcDataService: SearchingExampleService) {
	}

	ngOnInit() {
		this.dcDataService.getHeroes()
			.subscribe(heroes => this.source = heroes);
	}

}

Related articles:






We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.