$('#title-footer-grid').guiGrid({
	
	titlePanel: {
		enabled: true,
		template: () => {
		return `
			<div class='title-panel-example' >List of contract workers</div>
			`;
		}
	 },
	footerPanel: {
		enabled: true,
		template:  () => {
		return `
	 		<div class='footer-panel-example'>Copyright © 2018-2020</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="title-footer-grid"></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
    }, ...
]