Columns Template

Example
app.component.html
app.component.ts
users.ts
#
Name
Position
Actions
#1
Mark Ross
Team Leader
#2
Concepción King
Carpenter
#3
Vanecia Green
Painter
#4
Samara Anderson
Electrician
#5
Maxine Hamilton
SEO Manager
#6
Dan Lee
Director
#7
Paul Long
Web Developer
#8
Madonna Snyder
Product Manager
#9
Oriole Perkins
Public Relations
#10
Ernest Jordan
Copywriter
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>
[
    {
        "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.

Templates Example
templates.component.ts
food.ts
Name
Calories
Fruit
Avocado
160
Yes
Bananas
89
Yes
Pears
81
Yes
Celery
16
No
Radish
16
No
Strawberry
32
Yes
@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'
}];

Related articles:









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