Basics
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
Setup the template
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>Specify columns and source
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:
headerto represent the header namefieldto 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$'
}];Include GuiGridModule
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 {
}Final code
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