Row Styling - Generic UI Data Grid for Angular

The Grid allows us to style each row separately.

You can simply add specific css class to each row of the grid.

export interface GuiRowClass {

	class?: string;

	classFunction?: (data: any, index: number) => string;

}

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

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.

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

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;

}

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

Same as classFunction, the styleFunction allows you to add different style to a grids row.

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

Below you can find row styling inputs for both css style and css class.

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.

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.