Row detail

$('#jquery-row-detail').guiGrid({
	
	rowDetail: {
		enabled: true,
		template: (item) => {
		return `
			<div class='user-detail'>
				<h1>${item.name}</h1>
	
				<img src='${item.avatar}' />
	
				<h2>${item.company}</h2>
				<h3>${item.position}</h3>
				<div><b>Team:</b> ${item.team.name}</div>
			</div>`;
		}
	 },
	
	columns: [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Team',
        field: 'teamShort',
        width: 80
    }, {
        header: 'Training',
        field: 'training',
        type: 'number',
        width: 100
    }, {
        header: 'Company',
        field: 'company'
    }],

	source: [...users]

});

<div id="jquery-row-detail"></div>

.user-detail {
	padding: 20px;
	min-width: 300px;
	font-family: Lato;
}

.user-detail img {
	height: 160px;
}

.user-detail div {
	display: block;
	margin-top: 16px;
	font-size: 16px;
}

.user-detail h1 {
	font-size: 2.0rem;
	font-weight: 500;

}

.user-detail h2 {
	font-size: 1.5rem;
	font-weight: 300;
	margin-top: 16px;
}

.user-detail h3 {
	font-size: 1.2rem;
	font-weight: 300;
	margin-top: 16px;
}

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