The grid library is easy to use, all you need to do is specify the columns and the source. Below is a simple example of our data table component with three columns and three items.

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

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

You can see the final results in this github repository: https://github .com/generic-ui/generic-ui-grid-angular12

Add code below to your 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.

<gui-grid
		 [columns]="columns"
		 [source]="source">
</gui-grid>

Now write a variable inside app.component.ts named 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

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.

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

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

import { GuiGridModule } from '@generic-ui/ngx-grid';

@NgModule({
	imports: [
		GuiGridModule
	]
})
export class BasicsModule {
}

This is what your code should look like.

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$'
		}];

}

You can see code for this example in this github repository: Angular 12 with the grid library