Remote Data

@Component({
	template: `
		<gui-grid
			[columns]="columns"
			[source]="source"
			[loading]="loading">
		</gui-grid>`
})
export class SourceComponent {

	loading = true;

	source: Array<any> = [];

	columns: Array<GuiColumn> = [
		{
			header: 'Name',
			field: 'name',
			type: 'string'
		},
		{
			header: 'Image',
			field: 'image',
			view: (value: any) => {
				return `<span class="character">
						<img class="character__image" src="${value}">
					</span>`;
			},
			width: 100
		},
		{
			header: 'Status',
			field: 'status',
			type: 'string',
			width: 100
		},
		{
			header: 'Species',
			field: 'species',
			width: 100
		},
		{
			header: 'Ep.',
			field: (item: any) => item.episode.length,
			type: 'number',
			width: 80
		}
	];

	constructor(private readonly httpClient: HttpClient) {
	}

	ngOnInit() {
		this.httpClient
			.get('https://rickandmortyapi.com/api/character')
			.subscribe((data: any) => {
				this.source = data.results;
				this.loading = false;
			});
	}

}

.character {
	height: 30px;
	width: 30px;
}

.character__image {
	width: 100%;
	min-height: 100%;
	display: block;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
}