Back

Countries example

In this section you can see how Generic UI grid can change themes dynamically. The grid is filled with the countries list data and their most interesting information: e.g. country code, flag, Capital, Region, language.

To check how easy is to change theme of our grid, just click the 'Dark theme' toggle button. The grid will switch from 'Material' theme to 'Dark' theme. You can learn more about the grid themes in our guide section.

This grid example, also has enabled sort function. Click on one of the grid headers and it will rearrange the column values, based on the sort type. The grid can be sorted either in a ascending or a descending fashion.

See the source code at the bottom of this page.



Anchor

Source code

This is the source code of the countries example. Themes are applied to grid by using the theme input. In this case we are using two variation 'dark' theme and 'material' theme. The changeTheme() function easily changes the grid theme and it all is done dynamically. You can use this mechanism, for example to switch between light and dark theme, without much effort.

The field found in columns configuration is very versatile and can be used for a more complex functions. As you can see the getLanguages() function checks if there is more than one spoken language in the specific country and if it has, then the function will return all of the spoken languages.

The sorting is simply initialized with the sorting input set to true. In addition, the sort function works best when all of the columns has their type marked. It can be done by adding type attribute in the columns configuration e.g.type: GuiDataType.NUMBER for columns that display values as numbers.

app.component.html
app.component.ts
CountriesResource
countries.json
<gui-button-toggle (changed)="changeTheme($event)">Dark theme</gui-button-toggle>

<gui-grid
		  [columns]="columns"
		  [sorting]="true"
		  [source]="source"
		  [maxHeight]="600"
		  [searching]="searching"
		  [virtualScroll]="true"
		  [theme]="theme"
		  [infoPanel]="true">
</gui-grid>

import { Component, Renderer2 } from '@angular/core';

import { GuiColumn, GuiDataType, GuiPaging, GuiTheme } from '@generic-ui/ngx-grid';

import { CountriesResource } from '../data/countries.resource';

@Component({
	selector: 'gw-example-countries-grid',
	templateUrl: './example-countries-grid.component.html',
	styleUrls: ['./example-countries-grid.component.css']
})
export class ExampleCountriesGridComponent {

	columns: Array<GuiColumn> = [{
		header: 'Nr',
		field: 'index',
		width: 25,
		type: GuiDataType.NUMBER
	}, {
		header: 'Code',
		field: 'cca2',
		width: 65,
		type: GuiDataType.STRING
	}, {
		header: 'Flag',
		field: 'flag',
		width: 45,
		type: GuiDataType.STRING
	}, {
		header: 'Name',
		field: (country: any) => country.name.common,
		type: GuiDataType.STRING,
		view: GuiCellView.BOLD
	}, {
		header: 'Capital',
		field: 'capital',
		type: GuiDataType.STRING,
		view: GuiCellView.ITALIC
	}, {
		header: 'Region',
		field: 'region',
		type: GuiDataType.STRING
	}, {
		header: 'Subregion',
		field: 'subregion',
		type: GuiDataType.STRING
	}, {
		header: 'Language',
		field: (country: any) => this.getLanguages(country),
		type: GuiDataType.STRING,
		view: GuiCellView.ITALIC
	}, {
		header: 'Currency',
		field: (country: any) => this.getCurrency(country),
		type: GuiDataType.STRING
	}, {
		header: 'Area',
		field: 'area',
		width: 80,
		type: GuiDataType.NUMBER
	}];

	source = this.countriesResource.getCountries();

	theme = GuiTheme.FABRIC;

	searching: GuiSearching = {
		enabled: true,
		placeholder: 'Search countries',
		highlighting: true
	};

	constructor(private countriesResource: CountriesResource,
				private renderer: Renderer2) {
	}

	getLanguages(country): string {
		const languages = country.languages,
			firstLanguage = languages[Object.keys(languages)[0]],
			secondLanguage = languages[Object.keys(languages)[1]],
			thirdLanguage = languages[Object.keys(languages)[2]];
		if (!secondLanguage) {
			return firstLanguage;
		}
		if (!thirdLanguage) {
			return `${firstLanguage} | ${secondLanguage}`;
		}
		return `${firstLanguage} | ${secondLanguage} | ${thirdLanguage}`;
	}

	getCurrency(country): string {
		const currencies = country.currencies,
			currency = currencies[Object.keys(currencies)[0]];
		if (currency) {
			return currency.name;
		}
	}

	changeTheme(checked: boolean): void {
		if (checked) {
			this.theme = GuiTheme.DARK;
			this.renderer.addClass(document.body, 'gui-dark');
		} else {
			this.theme = GuiTheme.FABRIC;
			this.renderer.removeClass(document.body, 'gui-dark');
		}
	}

}

import { Injectable } from '@angular/core';

import * as rawStats from './countries.json';

@Injectable()
export class CountriesResource {

	private countries: Array<any>;

	constructor() {
		this.prepareData();
	}

	getCountries(): Array<any> {
		return this.countries;
	}

	private prepareData(): void {

		let index = 1;

		const results = (rawStats as any).countriesList;

		this.countries = results.map((country) => {
			country.index = index;

			index += 1;

			return country;
		});
	}

}

{
	"countriesList": [
		{
			"name": {
				"common": "Aruba",
				"official": "Aruba",
				"native": {
					"nld": {
						"official": "Aruba",
						"common": "Aruba"
					},
					"pap": {
						"official": "Aruba",
						"common": "Aruba"
					}
				}
			},
			"tld": [
				".aw"
			],
			"cca2": "AW",
			"ccn3": "533",
			"cca3": "ABW",
			"cioc": "ARU",
			"independent": false,
			"status": "officially-assigned",
			"currencies": {
				"AWG": {
					"name": "Aruban florin",
					"symbol": "ƒ"
				}
			},
			"idd": {
				"root": "+2",
				"suffixes": [
					"97"
				]
			},
			"capital": [
				"Oranjestad"
			],
			"altSpellings": [
				"AW"
			],
			"region": "Americas",
			"subregion": "Caribbean",
			"languages": {
				"nld": "Dutch",
				"pap": "Papiamento"
			},
			"translations": {
				"ces": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"deu": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"fra": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"hrv": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"ita": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"jpn": {
					"official": "アルバ",
					"common": "アルバ"
				},
				"nld": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"por": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"rus": {
					"official": "Аруба",
					"common": "Аруба"
				},
				"slk": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"spa": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"fin": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"est": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"zho": {
					"official": "阿鲁巴",
					"common": "阿鲁巴"
				},
				"pol": {
					"official": "Aruba",
					"common": "Aruba"
				},
				"urd": {
					"official": "اروبا",
					"common": "اروبا"
				},
				"kor": {
					"official": "아루바",
					"common": "아루바"
				}
			},
			"latlng": [
				12.5,
				-69.96666666
			],
			"demonym": "Aruban",
			"landlocked": false,
			"borders": [],
			"area": 180,
			"flag": "🇦🇼"
		},
... rest of the JSON file