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.

$('#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;
}

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.

$('#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;
}

Row style

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
    }, ...
]

Row style function

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.