The Grid allows us to style each row separately.
You can simply add specific css class to each row of the grid.
$('#jquery-styling-class-grid').guiGrid({
rowClass: {
class: 'row-highlighted'
},
columns: [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: 'number',
width: 100
}, {
header: 'Company',
field: 'company'
}],
source: [...users]
});[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
].row-highlighted {
background: #fffddd;
}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.
$('#jquery-styling-class-function-grid').guiGrid({
rowClass: {
classFunction: (data: any, index: number) => {
if (index % 2) {
return 'row-highlighted';
}
return '';
}
}
columns: [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: 'number',
width: 100
}, {
header: 'Company',
field: 'company'
}],
source: [...users]
});[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
].row-highlighted {
background: #fffddd;
}This feature allows you to add specific css style to each row of the grid.
$('#jquery-styling-style-grid').guiGrid({
rowStyle: {
style: 'background: #fffddd'
},
columns: [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: 'number',
width: 100
}, {
header: 'Company',
field: 'company'
}],
source: [...users]
});[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]Same as classFunction, the styleFunction allows you to add different style to a grids row.
$('#jquery-styling-style-function-grid').guiGrid({
rowStyle: {
styleFunction: (data: any, index: number) => {
if (index % 2) {
return 'background: #fffddd';
}
}
}
columns: [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: 'number',
width: 100
}, {
header: 'Company',
field: 'company'
}],
source: [...users]
});[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]Row styling - css class - options
| Options | 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 - options
| Options | 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. |