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.

Row Styling

Row css class

Row css class function

Row style

Row style function

Row styling - css class - Inputs

Row styling - css style - Inputs

Related articles: