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;

}
Example
app.component.ts
users.ts
style.css
Name
Position
Team
Training
Company
Mark Ross
Team Leader
TI
13
Genco Pura Olive Oil Company
Concepción King
Carpenter
KN
33
Globex Corporation
Vanecia Green
Painter
CR
42
Soylent Corp
Samara Anderson
Electrician
PU
100
Initech
Maxine Hamilton
SEO Manager
KN
29
Gekko & Co
Dan Lee
Director
TI
92
Sterling Cooper
Paul Long
Web Developer
AN
13
Hooli
Madonna Snyder
Product Manager
DR
81
Vehement Capital Partners
Oriole Perkins
Public Relations
TI
72
Massive Dynamic
Ernest Jordan
Copywriter
TI
55
Wonka Industries
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'
	};
	
	
}
[
    {
        "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.

Example
app.component.ts
users.ts
style.css
Name
Position
Team
Training
Company
Mark Ross
Team Leader
TI
13
Genco Pura Olive Oil Company
Concepción King
Carpenter
KN
33
Globex Corporation
Vanecia Green
Painter
CR
42
Soylent Corp
Samara Anderson
Electrician
PU
100
Initech
Maxine Hamilton
SEO Manager
KN
29
Gekko & Co
Dan Lee
Director
TI
92
Sterling Cooper
Paul Long
Web Developer
AN
13
Hooli
Madonna Snyder
Product Manager
DR
81
Vehement Capital Partners
Oriole Perkins
Public Relations
TI
72
Massive Dynamic
Ernest Jordan
Copywriter
TI
55
Wonka Industries
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 '';
		}
	};

}
[
    {
        "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;

}
Example
app.component.ts
users.ts
Name
Position
Team
Training
Company
Mark Ross
Team Leader
TI
13
Genco Pura Olive Oil Company
Concepción King
Carpenter
KN
33
Globex Corporation
Vanecia Green
Painter
CR
42
Soylent Corp
Samara Anderson
Electrician
PU
100
Initech
Maxine Hamilton
SEO Manager
KN
29
Gekko & Co
Dan Lee
Director
TI
92
Sterling Cooper
Paul Long
Web Developer
AN
13
Hooli
Madonna Snyder
Product Manager
DR
81
Vehement Capital Partners
Oriole Perkins
Public Relations
TI
72
Massive Dynamic
Ernest Jordan
Copywriter
TI
55
Wonka Industries
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'
	};
	
	
}
[
    {
        "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.

Example
app.component.ts
users.ts
Name
Position
Team
Training
Company
Mark Ross
Team Leader
TI
13
Genco Pura Olive Oil Company
Concepción King
Carpenter
KN
33
Globex Corporation
Vanecia Green
Painter
CR
42
Soylent Corp
Samara Anderson
Electrician
PU
100
Initech
Maxine Hamilton
SEO Manager
KN
29
Gekko & Co
Dan Lee
Director
TI
92
Sterling Cooper
Paul Long
Web Developer
AN
13
Hooli
Madonna Snyder
Product Manager
DR
81
Vehement Capital Partners
Oriole Perkins
Public Relations
TI
72
Massive Dynamic
Ernest Jordan
Copywriter
TI
55
Wonka Industries
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';
			}
		}
	};

}
[
    {
        "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;

}
InputTypeDefaultDescription
classstring- 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;

}
InputTypeDefaultDescription
stylestring- 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.

Related articles:









We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.