Row detail
$('#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="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
}, ...
]
Row detail - options
Options | Type | Default | Description |
---|---|---|---|
rowDetail | GuiRowDetail | '' | Row detail configuration object. |
enabled | boolean | false | Enabled row detail |
template | function(item) {} | '' | Template function |