Grid rows
This guide covers grid rows functions. They allow you to define how rows should be structured, including horizontal grid, vertical grid and row coloring. The rows can be colored in three different schemes: even, odd or no coloring at all. It is simple and easy just use one of the inputs in the <gui-grid> selector. Row coloring can be specified as a string ('odd') or an enum (GuiRowColoring.ODD). See the 'Grid rows' tab below.
On the example below you can check following functions:
- Horizontal grid,
- Vertical grid,
- Row coloring:
None,Odd,Even.
Name
Position
Team
Training
Company
13
33
42
100
29
92
13
81
72
55
import { Component } from '@angular/core';
@Component({
template: `
<gui-grid [source]="users"
[columns]="columns"
[horizontalGrid]="horizontalGrid"
[verticalGrid]="verticalGrid"
[rowColoring]="rowColoring">
</gui-grid>
`
})
export class RowComponent {
users = users;
columns: Array<GuiColumn> = [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: GuiDataType.NUMBER,
width: 100
}, {
header: 'Company',
field: 'company'
}];
horizontalGrid: boolean = true;
verticalGrid: boolean = true;
rowColoring: GuiRowColoring = GuiRowColoring.NONE;
}[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]Row - Inputs
| Input | Type | Default | Description |
|---|---|---|---|
| horizontalGrid | boolean | true | Enables horizontal lines that separate rows within the grid. |
| verticalGrid | boolean | true | Enables vertical lines that separate columns within the grid. |
| rowColoring | string | GuiRowColoring | GuiRowColoring.EVEN | Applies colored shading to the grid rows. Available shading options: even, odd, none. |