Columns custom template

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

	header?: string;

	width?: string | number;

	summaries?: GuiColumnSummaries;
}

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.