JavaScriptAngularVueReact

Grid for Vue

Vue 3 version using Smart custom elements and template refs.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

<script setup>
import { onMounted, ref } from 'vue';
import 'smart-webcomponents/source/styles/smart.default.css';
import 'smart-webcomponents/source/modules/smart.grid.js';

const component = ref();
const componentProps = {
  // Copy this topic's JavaScript configuration here.
};

onMounted(() => {
  Object.assign(component.value, componentProps);
});
</script>

<template>
  <smart-grid ref="component"></smart-grid>
</template>

Use component.value for API methods in this topic.

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

Grid Header

Similarly to the footer, the header is enabled by using the header property.

header: {
	visible: true,
	template: '#headerTemplate'
}	

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