Grid Header & Footer bar

The Grid's header and footer options allow you to add your own components to the grid's header and footer.

Grid Footer

To turn on the Grid's footer, you can use the footer property. The code sample below shows how to show a footer and apply a custom rendering to it. 
footer: {
	visible: true,
	template: (element) => {
		element.innerHTML = `<div style="display: flex; height: 100%;">
			<smart-button>Save</smart-button>
		</div>`
	}
}
Another way is to use HTMLTemplateElement. For example: 
<template id="footerTemplate">
	<div>
		<smart-button>
			Click Me
		</smart-button>
	</div>
</template>
and the footer property will look like that: 
footer: {
	visible: true,
	template: '#footerTemplate'
}

footer template

Grid Header

Similarly to the footer, the header is enabled by using the header property. 
header: {
	visible: true,
	template: '#headerTemplate'
}

header template
The Grid has built-in header template, so if you do not set the template property, the default haeder template will be displayed with options to sort, filter, group, search and customize columns. The header.buttons property determines which buttons in the header will be displayed. The list with buttons is ['columns', 'filter', 'group', 'sort', 'format', 'search'].
grid header