Data source
The source input sets up the data inside the grid in a format defined by the columns. The columns are created based on two attributes: header and field. The field specifies what data should be bound to the particular column. If we give field a variable named 'type' , we can use that variable in the source input to bind a specific value to it. Generic UI also has an option to indicate data loading. You can activate that by adding loading input to the <gui-grid>.
See the code example below.
Note:
The items inside source do not have to have all fields filled e.g. 'Shoes' can be a sole source entity.
import { Component } from '@angular/core';
import { GuiColumn } from '@generic-ui/ngx-grid';
@Component({
selector: 'basic-grid',
template: `
<gui-grid [columns]="columns"
[source]="source"
[loading]="loading">
</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' //Source items does not have to have all entities specified
},
{
name: 'Ball cap',
type: 'headgear',
price: '50$'
}];
loading: boolean = true
}
Generic UI is built with great focus put on performance, so it is able to handle very big sets of elements. In order to get more information about how to configure grid refer to this section Virtual Scroll