Title & footer panel
GenericUI grid is highly versatile. In this section we will present Title and Footer panels. They allow you to add HTML templates to the top and to the bottom of the grid.
Both features are enabled through the grid configuration. Simply add to it titlePanel for title panel and footerPanel for footer panel. They take object with parameters:
{
enabled: boolean,
template: string | () => string
}
On the example below titlePanel is used to create a banner for the 'List of contract workers'. Whereas, footerPanel shows a simple footer as 'Copyright © 2018-2020'.
List of contract workers
Name
Position
Team
Training
Company
13
33
42
100
29
92
13
81
72
55
import { Component } from '@angular/core';
@Component({
template: `
<gui-grid [source]="users"
[columns]="columns"
[titlePanel]="titlePanel"
[footerPanel]="footerPanel">
</gui-grid>
`
})
export class TitleFooterComponent {
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'
}];
titlePanel: GuiTitlePanel = {
enabled: true,
template: () => {
return `
<div class='title-panel-example' >List of contract workers</div>
`;
}
};
footerPanel: GuiFooterPanel = {
enabled: true,
template: () => {
return `
<div class='footer-panel-example'>Copyright © 2018-2020</div>
`;
}
};
}div.title-panel-example {
background-image: linear-gradient(#2185d0, #033c84, #2185d0);
color: #fff;
text-align: center;
padding: 20px;
margin: -8px;
font-size: 40px;
font-weight: bold;
font-family: Lato;
}
div.footer-panel-example {
color: #000;
padding: 8px 4px;
font-size: 12px;
font-weight: bold;
font-family: Lato;
}
.gui-button-toggle .gui-button {
margin: 16px 16px 24px 0
}
[
{
"id": "#1",
"name": "Mark Ross",
"company": "Genco Pura Olive Oil Company",
"position": "Team Leader",
"teamSort": "TI",
"training": 13,
"budget": -7000
}, ...
]Title & footer panels - Inputs
| Input | Type | Default | Description |
|---|---|---|---|
| titlePanel | GuiTitlePanel | '' | Title panel configuration object. |
| enabled | boolean | false | Enable/disable title panel |
| template | function(item) {} | '' | Template function |
| footerPanel | GuiFooterPanel | '' | Footer panel configuration object. |
| enabled | boolean | false | Enable/disable footer panel |
| template | function(item) {} | '' | Template function |