Row Styling
The Grid allows us to style each row separately.
Row css class
You can simply add specific css class to each row of the grid.
export interface GuiRowClass {
class?: string;
classFunction?: (data: any, index: number) => string;
}
Name
Position
Team
Training
Company
import { Component } from '@angular/core';
@Component({
template: `
<gui-grid [source]="users"
[rowClass]="rowClass"
[columns]="columns">
</gui-grid>
`
})
export class RowStylingComponent {
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'
}];
rowClass: GuiRowClass = {
class: 'row-highlighted'
};
}
[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]
.row-highlighted {
background: #fffddd;
}
Row css class function
This property allows for defining different CSS classes for each row. It is being invoked for each row with two parameters: item value and index. This way you can specify exactly which class should be added to the row.
Name
Position
Team
Training
Company
import { Component } from '@angular/core';
@Component({
template: `
<gui-grid [source]="users"
[rowClass]="rowClass"
[columns]="columns">
</gui-grid>
`
})
export class RowStylingComponent {
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'
}];
rowClass: GuiRowClass = {
classFunction: (data: any, index: number) => {
if (index % 2) {
return 'row-highlighted';
}
return '';
}
};
}
[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]
.row-highlighted {
background: #fffddd;
}
Row style
This feature allows you to add specific css style to each row of the grid.
export interface GuiRowStyle {
style?: string;
styleFunction?: (data: any, index: number) => string;
}
Name
Position
Team
Training
Company
import { Component } from '@angular/core';
@Component({
template: `
<gui-grid [source]="users"
[columns]="columns"
[rowStyle]="rowStyle">
</gui-grid>
`
})
export class LocalizationResolverComponent {
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'
}];
rowStyle: GuiRowStyle = {
style: 'background: #fffddd'
};
}
[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]
Row style function
Same as classFunction
, the styleFunction
allows you to add different style to a grids row.
Name
Position
Team
Training
Company
import { Component } from '@angular/core';
@Component({
template: `
<gui-grid [source]="users"
[columns]="columns"
[rowStyle]="rowStyle">
</gui-grid>
`
})
export class LocalizationResolverComponent {
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'
}];
rowStyle: GuiRowStyle = {
styleFunction: (data: any, index: number) => {
if (index % 2) {
return 'background: #fffddd';
}
}
};
}
[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]
Row styling - css class - Inputs
export interface GuiRowClass {
class?: string;
classFunction?: (data: any, index: number) => string;
}
Input | Type | Default | Description |
---|---|---|---|
class | string | - | This property contains a class or a list of class which will be added to each row of the grid. |
classFunction | (item: any, index: number) => string | - | A css class is added to a row based on the results of the function. |
Row styling - css style - Inputs
export interface GuiRowStyle {
style?: string;
styleFunction?: (data: any, index: number) => string;
}
Input | Type | Default | Description |
---|---|---|---|
style | string | - | Adds a specified style to each row of the grid. |
styleFunction | (item: any, index: number) => string | - | A style is added to each row based on the result of the function. |