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.

Grid Users

The Grid component has built-in dialogs for 'comments', 'history' of edits and support for multiple users. For example, if you create a web app with a Grid, you may want to track which user edited something or enable comments between the users. In order to handle such use-case scenarios, the users and currentUser properties are available.
Example:

currentUser: 0,
users: [
	{ id: 0, color: '#8E24AA', name: 'Andrew', image: '../../images/people/andrew.png' },
	{ id: 1, color: '#41B883', name: 'Anne', image: '../../images/people/anne.png' },
	{ id: 2, color: '#53B9E6', name: 'Janet', image: '../../images/people/janet.png' },
	{ id: 3, color: '#FFCD42', name: 'John', image: '../../images/people/john.png' },
	{ id: 4, color: '#DD5347', name: 'Laura', image: '../../images/people/laura.png' }
]
	

See example with multiple users: https://www.htmlelements.com/demos/grid/users/.


Dialog with comments section



After doing some edits in the Grid