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'.

Example
app.component.ts
app.component.css
users.ts
List of contract workers
Name
Position
Team
Training
Company
Mark Ross Team Leader TI 13 Genco Pura Olive Oil Company Concepción King Carpenter KN 33 Globex Corporation Vanecia Green Painter CR 42 Soylent Corp Samara Anderson Electrician PU 100 Initech Maxine Hamilton SEO Manager KN 29 Gekko & Co Dan Lee Director TI 92 Sterling Cooper Paul Long Web Developer AN 13 Hooli Madonna Snyder Product Manager DR 81 Vehement Capital Partners Oriole Perkins Public Relations TI 72 Massive Dynamic Ernest Jordan Copywriter TI 55 Wonka Industries
@Component({
	template: `
			<gui-grid [source]="users"
				  [columns]="columns"
				  [titlePanel]="titlePanel"
				  [footerPanel]="footerPanel">
			</gui-grid>
	`
})
export class TitleFooterComponent {

	users = users;

	columns = [{
        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
}
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Title & footer panels - Inputs

InputTypeDefaultDescription
titlePanelGuiTitlePanel'' Title panel configuration object.
enabledbooleanfalse Enable/disable title panel
templatefunction(item) {}'' Template function
footerPanelGuiFooterPanel'' Footer panel configuration object.
enabledbooleanfalse Enable/disable footer panel
templatefunction(item) {}'' Template function

Related articles:









We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.