import { Component } from '@angular/core';
@Component({
template: `
<gui-grid [source]="users"
[columns]="columns"
[rowDetail]="rowDetail">
</gui-grid>
`
})
export class RowDetailComponent {
users = users;
columns: Array<GuiColumn> = [{
header: 'Name',
field: 'name'
}, {
header: 'Position',
field: 'position'
}, {
header: 'Team',
field: 'teamShort',
width: 80
}, {
header: 'Training',
field: 'training',
type: GuiDataType.NUMBER,
width: 100
}, {
header: 'Company',
field: 'company'
}];
rowDetail: GuiRowDetail = {
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>`;
}
};
}
.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
}, ...
]
export interface GuiRowDetail {
enabled?: boolean;
template?: (item: any, index: number) => string;
}
Input | Type | Default | Description |
---|---|---|---|
rowDetail | GuiRowDetail | '' | Row detail configuration object. |
enabled | boolean | false | Enabled row detail |
template | function(item) {} | '' | Template function |