Basics

Generic UI is easy to use, all you need to do is specify the columns and the source. Below is a simple example of our grid with three columns and three items.

Name
Type
Price
T-shirt clothes 15$ Shoes footwear 100$ Ball cap headgear 50$

The creation of a gui-grid will be done in these simple steps:

  • Setup the template
  • Specify the columns and source in grid component
  • Include GridModule

Setup the template

Add code below to you html template. Notice that <gui-grid> has two input [columns] and [source]. These will help you specify the shape of the grid and the data you wish to bind.

app.component.html
<gui-grid [columns]="columns"
		  [source]="source">
</gui-grid>

Specify columns and source

Now write a variable inside app.component.ts named as columns and we will use this to create column headers. In this example we are using two attributes:

  • header to represent the header name
  • field to binds data from the source

You can find more column options in the columns section

app.component.ts
columns: Array<GuiColumn> = [
	{
		header: 'Name',
		field: 'name'
	},
	{
		header: 'Type',
		field: 'type'
	},
	{
		header: 'Price',
		field: 'price'
	}];


Having specified columns, we now need to bind them with the source. Create a new variable called source in app.component.ts and copy the code below. Inside the source there are three items and each has three values: name, type and price. These values are the names of our column fields.

You can find more information on the source in this section.

app.component.ts
source: Array<any> = [
	{
		name: 'T-shirt',
		type: 'clothes',
		price: '15$'
	},
	{
		name: 'Shoes',
		type: 'footwear',
		price: '100$'
	},
	{
		name: 'Ball cap',
		type: 'headgear',
		price: '50$'
	}];

Include GridModule

The only thing that remains is to include GridModule in app.module.ts and we are done.

app.module.ts
import { GridModule } from '@generic-ui/ngx-grid';

@NgModule({
	imports: [
		GridModule
	]
})
export class BasicModule {

}

Final code

This is what your code should look like.

app.component.ts
import { Component } from '@angular/core';
import { GuiColumn } from '@generic-ui/ngx-grid';

@Component({
	selector: 'basic-grid',
	template: `
		<gui-grid [columns]="columns"
				  [source]="source">
		</gui-grid>`
})
export class BasiGridComponenet {

	columns: Array<GuiColumn> = [
		{
			header: 'Name',
			field: 'name' 			//source {name: 'T-shirt'}
		},
		{
			header: 'Type',
			field: 'type' 			//source {type: 'clothes'}
		},
		{
			header: 'Price',
			field: 'price'			//source {price: '15$'}
		}];

	source: Array<any> = [
		{
			name: 'T-shirt',		//columns {header: 'Name', field: 'name'}
			type: 'clothes',		//columns {header: 'Type', field: 'type'}
			price: '15$' 			//columns {header: 'Price', field: 'price'}
		},
		{
			name: 'Shoes',
			type: 'footwear',
			price: '100$'
		},
		{
			name: 'Ball cap',
			type: 'headgear',
			price: '50$'
		}];

}

Next Steps:

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