Back

Github example

This example showcase usage of Generic UI grid with Github API. Typing anything in the input field and the grid will display repositories with the used search phrase. The grid source is directly connected with the Github search API. The grid columns are configured in a way so they can display attributes of the searched repository: name of a repository, its description, used coding language, repository owner, number of stars and forks. The source code of this example can be found at the bottom of this page.

Showing 100 out of 70899 results.

Source code

This the source code of the Github example. The search API is used in search() function. The items variable is reflects as a grid's source. The field attribute found in the columns configuration, reflects the values of Github repositories.

app.component.html
app.component.ts
<div class="gw-example-github">
	<form [formGroup]="searchForm">

		<label>
			<input gui-input type="text" placeholder="Type here..." formControlName="query" value="Tetris">
		</label>
		<button gui-button type="submit" (click)="submit()">Search</button>

	</form>

	<div class="result-count">
		Showing {{items.length}} out of {{total_count}} results.
	</div>

	<gui-grid
		[loading]="fetching"
		[columns]="columns"
		[source]="items"
		[sorting]="true"
		[maxHeight]="700"
		infoPanel]="true">
	</gui-grid>
</div>
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { GuiColumn, GuiDataType } from '@generic-ui/ngx-grid';

@Component({
	templateUrl: './example-github-grid.component.html',
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleGithubGridComponent implements OnInit {

	total_count;

	items = [];

	columns: Array<GuiColumn> = [{
		header: 'Full name',
		field: 'full_name',
		type: GuiDataType.STRING
	}, {
		header: 'Description',
		field: 'description',
		type: GuiDataType.STRING
	}, {
		header: 'Language',
		field: 'language',
		type: GuiDataType.STRING
	}, {
		header: 'Owner',
		field: (item: any) => item.owner.login,
		type: GuiDataType.STRING
	}, {
		header: 'Stars',
		field: 'stargazers_count',
		type: GuiDataType.NUMBER,
		width: 100
	}, {
		header: 'Forks',
		field: 'forks',
		type: GuiDataType.NUMBER,
		width: 100
	}];

	searchForm: FormGroup;

	fetching = false;

	constructor(private http: HttpClient,
				private formBuilder: FormBuilder,
				private changeDetectorRef: ChangeDetectorRef) {
	}

	ngOnInit() {

		this.searchForm = this.formBuilder.group({
			'query': ['Tetris', [Validators.required]]
		});

		this.search();
	}

	submit(): void {
		this.search();
	}

	search(): void {

		if (this.fetching) {
			return;
		}

		this.fetching = true;

		this.http
			.get('https://api.github.com/search/repositories?per_page=100&q=' + this.searchForm.value.query)
			.subscribe((response: any) => {

				this.total_count = response.total_count;
				this.items = response.items;

				this.fetching = false;
				this.changeDetectorRef.detectChanges();
			});
	}

}