Columns Template

Name

Position

Actions

import { Component } from '@angular/core';

@Component({
	templateUrl: `./app.component.html`
})
export class SingleSortComponent {

	users = users;

	showDetails(item): void {
		alert(item.name);
	}

	remove(item): void {
		alert('Remove item: ' + item.name);
	}
}

<gui-grid [source]="users">

	<gui-grid-column header="#" width="60">
		<ng-template let-index="index">
			#{{index+1}}
		</ng-template>
	</gui-grid-column>

	<gui-grid-column header="Name" field="name">
		<ng-template let-value="value">
			{{value}}
		</ng-template>
	</gui-grid-column>

	<gui-grid-column header="Position" field="position" width="150">
		<ng-template let-value="value">
			<i>{{value}}</i>
		</ng-template>
	</gui-grid-column>

	<gui-grid-column header="Actions" width="200">
		<ng-template let-item="item">
			<button mat-stroked-button (click)="showDetails(item)">Details</button>
			<button mat-stroked-button (click)="remove(item)">Remove</button>
		</ng-template>
	</gui-grid-column>

</gui-grid>

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

The ng-template takes three optional parameters

cell value - let-value="value"
item displayed in the row - let-item="item"
index - let-index="index"

<gui-grid-column>
	<ng-template let-value="value"
				  let-item="item"
				  let-index="index">

		{{value}} 			<!-- presents cell value -->
		{{item | json}} 	<!-- presents row data -->
		{{index}} 			<!-- presents index -->

	</ng-template>
</gui-grid-column>

The example of data grid with custom templates

Columns custom template as functions

The grid allows you to use your own custom template.

In order to do that you need to create a template function, that returns a string. It will be used to render the cell. In addition, the template function takes one argument, which is cellValue. This argument relates to the value of the specific column cell. The custom template function is extremely useful when you want to use different HTML element as the column cell. It also provides the option to change the built-in cell styles.

type ViewTemplateMethod = (cellValue: any, item?: any) => string

function myTemplate(cellValue: any, item?: any) {

	if (cellValue > 10) {
		return '<div class="color-red" >Great JOB! ' + cellValue + '</div>';
	} else {
		return '<div class="color-green">The Best template ' + cellValue + '</div>';
	}
}

In order for the grid to use custom template you need to define it in the columns input as a view object.

interface GuiColumn {

	field?: string | FieldAccessor;

	type?: string | GuiDataType;

	view?: string | GuiCellView | ViewTemplateFunction;

	header?: string | ViewTemplateFunction;

	width?: string | number;

	enabled?: boolean;

	align?: string | GuiColumnAlign;

	summaries?: GuiColumnSummaries;

	sorting?: boolean | GuiColumnSorting;

	cellEditing?: boolean | GuiColumnCellEditing;

	formatter?: (item: any, index: number) => any;

	matcher?: (item: any) => any;

}

The custom template mechanism allows achieving a lot o great things. It gives the opportunity to use any HTML element as the grid cell. Take a look at the example below where custom templates are used to show fruits and vegetables with different templates.

Name

Calories

Fruit

@Component({
	selector: 'columns-template-example',
	template: `
		<gui-grid [columns]="columns"
				  [source]="source" >
		</gui-grid>
	`
})
export class DocsColumnsTemplateExampleComponent {

	columns = [{
		header: 'Name',
		field: 'name',
		type: GuiDataType.STRING,
		view: GuiCellView.TEXT
	}, {
		header: 'Calories',
		field: 'calories',
		type: GuiDataType.NUMBER,
		view: (value: number) => {
			if (value > 85) {
				return `<div style="color: blue;font-weight: bold">${value}</div>`;
			} else if (value > 30) {
				return `<div style="color: red;font-weight: bold">${value}</div>`;
			} else {
				return `<div style="color: green">${value}</div>`;
			}
		}
	}, {
		header: 'Fruit',
		field: 'isFruit',
		type: GuiDataType.BOOLEAN,
		view: (value: boolean) => {
			if (value) {
				return `<div style="font-weight: bold">Yes</div>`;
			} else {
				return `<div >No</div>`;
			}
		}
	}];

	source = food;
}

const food = [{
	name: 'Avocado',
	isFruit: true,
	calories: 160,
	wiki: 'https://en.wikipedia.org/wiki/Avocado',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Persea_americana_fruit_2.JPG/220px-Persea_americana_fruit_2.JPG'
}, {
	name: 'Bananas',
	isFruit: true,
	calories: 89,
	wiki: 'https://en.wikipedia.org/wiki/Banana',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/d/de/Bananavarieties.jpg/220px-Bananavarieties.jpg'
}, {
	name: 'Pears',
	isFruit: true,
	calories: 81,
	wiki: 'https://en.wikipedia.org/wiki/Pear',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Pears.jpg/220px-Pears.jpg'
}, {
	name: 'Celery',
	isFruit: false,
	calories: 16,
	wiki: 'https://en.wikipedia.org/wiki/Celery',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Illustration_Apium_graveolens0.jpg/220px-Illustration_Apium_graveolens0.jpg'
}, {
	name: 'Radish',
	isFruit: false,
	calories: 16,
	wiki: 'https://en.wikipedia.org/wiki/Radish',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Radish_3371103037_4ab07db0bf_o.jpg/220px-Radish_3371103037_4ab07db0bf_o.jpg'
}, {
	name: 'Strawberry',
	isFruit: true,
	calories: 32,
	wiki: 'https://en.wikipedia.org/wiki/Strawberry',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Strawberry_BNC.jpg/220px-Strawberry_BNC.jpg'
}];

Columns Template

Columns custom template as functions

Related articles: