Angular Users

Platform:Angular
Name
Company
Country
Mobile
Team
Training
Budget
Genco Pura Olive Oil Company
๐Ÿ‡ต๐Ÿ‡นPortugal
(231) 638-1199
TI
$ -7000.00
Globex Corporation
๐Ÿ‡น๐Ÿ‡ทTurkey
(490) 696-8066
KN
$ 8300.00
Soylent Corp
๐Ÿ‡ณ๐Ÿ‡ฑNetherlands
(607) 248-2032
CR
$ -2450.00
Initech
๐Ÿ‡จ๐Ÿ‡ณChina
(423) 564-7972
PU
$ 5900.00
Gekko & Co
๐Ÿ‡ง๐Ÿ‡ทBrazil
(588) 904-5858
KN
$ 4500.00
Sterling Cooper
๐Ÿ‡ฆ๐Ÿ‡นAustria
(413) 936-2806
TI
$ 12000.00
Hooli
๐Ÿ‡ฎ๐Ÿ‡ฑIsrael
(612) 436-2728
AN
$ 9900.00
Vehement Capital Partners
๐Ÿ‡ช๐Ÿ‡ธSpain
(540) 378-7247
DR
$ 100.00
Massive Dynamic
๐Ÿ‡ฏ๐Ÿ‡ตJapan
(471) 646-1055
TI
$ 6200.00
Wonka Industries
๐Ÿ‡ฉ๐Ÿ‡ชGermany
(309) 799-3429
TI
$ 7500.00
Items per page:
10
5
10
25
50
1
2
3
4
Showing 35 items

Angular Source Code

Platform:Angular
component.ts
component.html
component.scss
users.ts
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';

import { GuiCellView, GuiColumn, GuiColumnMenu, GuiDataType, GuiPaging, GuiPagingDisplay, GuiRowColoring } from '@generic-ui/ngx-grid';

@Component({
	template: './component.html',
	styles: ['./component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	encapsulation: ViewEncapsulation.None
})
export class UsersGridComponent implements OnInit {

	coloring = GuiRowColoring.ODD;

	source: Array<any> = [];

	columns: Array<GuiColumn> = [
		{
			field: (item) => item,
			header: 'Name',
			type: GuiDataType.STRING,
			view: (cellValue: any) => {
				let template = `
					<span class="gui-user-wrapper">
						<img src="${cellValue.avatar}" class="gui-user-img" />
					</span>
					
					<div class="gui-user-info" >
						<span class="gui-user-info-name" >${cellValue.name}</span>
						<span class="gui-user-info-position" >${cellValue.position}</span>
		
					</div>
				`;

				return template;
			},
			width: 210,
			sorting: {
				enabled: true
			},
			cellEditing: {
				enabled: false
			},
			matcher: (item) => item.name
		}, {
			field: 'company',
			header: 'Company',
			type: GuiDataType.STRING,
			view: GuiCellView.TEXT,
			cellEditing: {
				enabled: true
			}
		}, {
			field: 'country',
			header: 'Country',
			type: GuiDataType.STRING,
			view: (country: any) => {
				return `<span style="margin-right: 4px">${country.flag}</span><span>${country.name.common}</span>`;
			},
			sorting: {
				enabled: true
			},
			cellEditing: {
				enabled: false
			},
			matcher: (item) => item.name.common
		}, {
			field: 'mobile',
			header: 'Mobile',
			type: GuiDataType.STRING,
			view: GuiCellView.ITALIC,
			cellEditing: {
				enabled: true
			}
		}, {
			field: 'team',
			header: 'Team',
			type: GuiDataType.STRING,
			view: (cellValue: any) => {
				return `<div class="gui-team" style="background: ${cellValue.color}">
							${cellValue.short}
				</div>`;
			},
			width: 80,
			cellEditing: {
				enabled: false
			},
			matcher: (item) => item.short
		}, {
			field: 'training',
			header: 'Training',
			type: GuiDataType.NUMBER,
			width: 140,
			view: GuiCellView.BAR,
			},
			cellEditing: {
				enabled: true
			}
		}, {
			field: 'budget',
			header: 'Budget',
			type: GuiDataType.STRING,
			view: (cellValue: number) => {

				if (cellValue > 0) {
					return `<div class="gui-align-right gui-budget" style="color: rgb(86, 174, 71)">$ ${cellValue}.00</div>`;
				} else if (cellValue === 0) {
					return `<div class="gui-align-right gui-budget" style="color: #0747a6">$ ${cellValue}.00</div>`;
				} else {
					return `<div class="gui-align-right gui-budget" style="color: #ef4920">$ ${cellValue}.00</div>`;
				}
			},
			cellEditing: {
				enabled: false
			},
			width: 100
		}];

	sorting = {
		enabled: true,
		multiSorting: true
	};

	columnMenu: GuiColumnMenu = {
		enabled: true,
		columnsManager: true
	};

	paging: GuiPaging = {
		enabled: true,
		page: 1,
		pageSize: 10,
		pageSizes: [5, 10, 25, 50],
		display: GuiPagingDisplay.ADVANCED
	};

	ngOnInit() {
		this.source = users;
	}

}
<gui-grid #grid
	[theme]="'generic'"
	[source]="source"
	[columns]="columns"
	[sorting]="sorting"
	[paging]="paging"
	[columnMenu]="columnMenu"
	[verticalGrid]="false"
	[horizontalGrid]="true"
	[cellEditing]="true"
	[rowHeight]="52"
	[maxHeight]="600"
	[infoPanel]="true">
</gui-grid>
.gui-budget {
	justify-content: flex-end;
	font-weight: bold;
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
}

.gui-user-info {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	align-content: center;
	justify-content: center;
}

.gui-user-info-name {
	padding-bottom: 4px;
}

.gui-user-info-position {
	color: #606060;
	font-style: italic;
	font-size: 13px;
	overflow: hidden;
}

.gui-team {
	border-radius: 50%;
	color: white;
	display: inline-block;
	font-weight: bold;
	height: 30px;
	width: 30px;
	text-align: center;
	line-height: 30px;
}

.gui-user-wrapper {
	width: 30px;
	height: 30px;
	margin-right: 8px;
	display: flex;
}

.gui-user-img {
	width: 100%;
	min-height: 100%;
	display: block;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
}
const users = [{
	name: 'Bruce Wayne',
	avatar: 'url-to-img.gif',
	company: 'Wayne Industries',
	position: 'Owner',
	training: 89,
	mobile: 'unknown',
	team: 'Justice League',
	budget: 10000000
}, ...]

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