smart-html-elements

Using with Vue 3

Vue is a framework focused on the view layer, helping the development of applications based on components. This page will show you how to use Smart Web Components with Vue.

Overview

We will walk you through the steps to add Smart Web Components to a Vue 3 project, and configure some of the features. We will show you some of the data grid capabilities (properties, data source). In addition, we will customize the Datagrid appearance with custom Column Templates.

Add smart-grid
Add Sorting and Filtering
Enable Selection
Add Grouping(Professional)
Enable Editing
Enable Paging
Set Theme
Summary

Add "smart-grid" to Your Vue 3 Project

First, make sure you have the latest version of Node.js and npm installed.

Let's install Vue

In this section we will introduce how to scaffold a Vue Single Page Application on your local machine. The created project will be using a build setup based on Vite and allow us to use Vue Single-File Components (SFCs). Run the following command in your command line

npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:

✔ Project name: … 
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./...
Done.

If you are unsure about an option, simply choose No by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:

cd 
npm install
npm install smart-webcomponents
npm run dev

Ignored Elements

Make Vue ignore custom elements defined outside of Vue (e.g., using the Web Components APIs). Otherwise, it will throw a warning about an Unknown custom element, assuming that you forgot to register a global component or misspelled a component name.

Add v-pre directive with the Smart components.
It skips compilation for this element and all its children. You can use this for displaying raw mustache tags. Skipping large numbers of nodes with no directives on them can also speed up compilation. Open src/App.vue in your favorite text editor and change its contents to the following:

App.vue

 <template>  
  <smart-grid id="grid" v-pre></smart-grid>  
 </template>   
 <script>  
 import 'smart-webcomponents/source/styles/smart.default.css';  
 import 'smart-webcomponents/source/modules/smart.grid.js';  
 export default {  
  name: "app",  
  mounted: function() {  
   window.Smart(  
    "#grid", class {  
     get properties() {  
           return {  
                columns: [  
                     {  
                          label: 'First Name', dataField: 'firstName'  
                     },  
                     { label: 'Last Name', dataField: 'lastName' },  
                     { label: 'Product', dataField: 'productName' }  
                ],  
                dataSource: [  
					  { "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte"},   
					  { "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte"},   
					  { "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea"},   
					  { "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte"},   
					  { "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna"},   
					  { "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano" },  
					  { "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte"},   
					  { "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano"},  
					  { "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna"},   
					  { "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea"},   
					  { "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle"},  
					  { "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist"},  
					  { "firstName": "Marco", "lastName": "Johnes", "productName": "Caffe Mocha"}  
				 ]  
           }  
     }  
    }  
   );  
  }  
 };  
 </script>  
 <style>  
  body {  
   min-height: 700px;  
  }  
  smart-grid {  
   width: 100%;  
   height: auto;  
  }  
 </style>

We can now use the smart-grid with Vue. Data binding and event handlers will just work right out of the box. We have bound the "columns" and "dataSource" properties of the smart-grid to values in our Vue component.

Add Sorting and Filtering

Sorting and Filtering are essential features in each web application with Grids. To enable the sorting and filtering in our grid, we need to define two objects - sorting and filtering and set the "enabled" boolean property to true. We add the below code to the Smart function defined in the App.vue

 <template>  
  <smart-grid id="grid" v-pre></smart-grid>  
 </template>   
 <script>  
 import 'smart-webcomponents/source/styles/smart.default.css';  
 import 'smart-webcomponents/source/modules/smart.grid.js';  
 export default {  
  name: "app",  
  mounted: function() {  
   window.Smart(  
    "#grid", class {  
     get properties() {  
           return {  
                columns: [  
                     {  
                          label: 'First Name', dataField: 'firstName'  
                     },  
                     { label: 'Last Name', dataField: 'lastName' },  
                     { label: 'Product', dataField: 'productName' }  
                ],  
				sorting: {
					enabled: true
				},	
				filtering: {
					enabled: true
				},				
                dataSource: new window.Smart.DataAdapter(  
                {  
                     dataSource: [  
                          { "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte"},   
                          { "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte"},   
                          { "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea"},   
                          { "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte"},   
                          { "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna"},   
                          { "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano" },  
                          { "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte"},   
                          { "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano"},  
                          { "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna"},   
                          { "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea"},   
                          { "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle"},  
                          { "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist"},  
                          { "firstName": "Marco", "lastName": "Johnes", "productName": "Caffe Mocha"}  
                     ],  
                     dataFields:  
                     [  
                          'firstName: string',  
                          'lastName: string',  
                          'productName: string'                           
                     ]  
                })  
           }  
     }  
    }  
   );  
  }  
 };  
 </script>  
 <style>  
  body {  
   min-height: 700px;  
  }  
  smart-grid {  
   width: 100%;  
   height: auto;  
  }  
 </style>

Online Examples: Grid Sorting and Grid Filtering

Enable Selection

The Grid supports selection by cell, row and with checkboxes. We can also choose from selection with single and double-click, selection by one or multiple rows or cells. In the code below, we will enable the Row selection. We add the below code to the Smart funtion App.vue

	selection: {
		enabled: true
	}

Online Selection Example: Grid Selection.

Add Grouping

Similar to Sorting and Filtering, Grouping is enabled by setting the "enabled" property to true

We add the below code to App.vue

	grouping: {
		enabled: true
	}

App.vue

 <template>  
  <smart-grid id="grid" v-pre></smart-grid>  
 </template>   
 <script>  
 import 'smart-webcomponents/source/styles/smart.default.css';  
 import 'smart-webcomponents/source/modules/smart.grid.js';  
 export default {  
  name: "app",  
  mounted: function() {  
   window.Smart(  
    "#grid", class {  
     get properties() {  
           return {  
                columns: [  
                     {  
                          label: 'First Name', dataField: 'firstName'  
                     },  
                     { label: 'Last Name', dataField: 'lastName' },  
                     { label: 'Product', dataField: 'productName' }  
                ],  
				grouping: {
					enabled: true
				},
				sorting: {
					enabled: true
				},	
				filtering: {
					enabled: true
				},				
                dataSource: new window.Smart.DataAdapter(  
                {  
                     dataSource: [  
                          { "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte"},   
                          { "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte"},   
                          { "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea"},   
                          { "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte"},   
                          { "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna"},   
                          { "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano" },  
                          { "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte"},   
                          { "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano"},  
                          { "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna"},   
                          { "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea"},   
                          { "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle"},  
                          { "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist"},  
                          { "firstName": "Marco", "lastName": "Johnes", "productName": "Caffe Mocha"}  
                     ],  
                     dataFields:  
                     [  
                          'firstName: string',  
                          'lastName: string',  
                          'productName: string'                           
                     ]  
                })  
           }  
     }  
    }  
   );  
  }  
 };  
 </script>  
 <style>  
  body {  
   min-height: 700px;  
  }  
  smart-grid {  
   width: 100%;  
   height: auto;  
  }  
 </style>

Online Grouping Example: Grid Grouping.

Enable Editing

smart-grid supports editing by cell, editing by row and editing with dialog or command column. In this case, we will use the cell editing. You can enable the editing functionality by setting the "enabled" boolean property to true.
App.vue

	editing: {
		enabled: true
	}

Enable Paging

To enable pagination, set the grid paging and pager properties. The paging.enabled turns on/off pagination, pager.visible shows/hides the top or bottom pagers. The grid's pagination feature can be used to load data on demand. It can be used with all other grid features. There are built-in options to customize the "pageSize", navigate through pages using API, customize the pager's template, configure whether top and bottom pagers are visible all the time or only the top or bottom pager is visible. It is also optional to display a "select" tag to dynamically update the page size or an "input" tag which allows you to type the page index and navigate to the page.

App.vue

 <template>  
  <smart-grid id="grid" v-pre></smart-grid>  
 </template>   
 <script>  
 import 'smart-webcomponents/source/styles/smart.default.css';  
 import 'smart-webcomponents/source/modules/smart.grid.js';  
 export default {  
  name: "app",  
  mounted: function() {  
   window.Smart(  
    "#grid", class {  
     get properties() {  
           return {  
                columns: [  
                     {  
                          label: 'First Name', dataField: 'firstName'  
                     },  
                     { label: 'Last Name', dataField: 'lastName' },  
                     { label: 'Product', dataField: 'productName' }  
                ],  
				grouping: {
					enabled: true
				},
				paging: {
					enabled: true
				},
				pager: {
					visible: true
				},
				selection: {
					enabled: true
				},
				sorting: {
					enabled: true
				},	
				filtering: {
					enabled: true
				},				
                dataSource: new window.Smart.DataAdapter(  
                {  
                     dataSource: [  
                          { "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte"},   
                          { "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte"},   
                          { "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea"},   
                          { "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte"},   
                          { "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna"},   
                          { "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano" },  
                          { "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte"},   
                          { "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano"},  
                          { "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna"},   
                          { "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea"},   
                          { "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle"},  
                          { "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist"},  
                          { "firstName": "Marco", "lastName": "Johnes", "productName": "Caffe Mocha"}  
                     ],  
                     dataFields:  
                     [  
                          'firstName: string',  
                          'lastName: string',  
                          'productName: string'                           
                     ]  
                })  
           }  
     }  
    }  
   );  
  }  
 };  
 </script>  
 <style>  
  body {  
   min-height: 700px;  
  }  
  smart-grid {  
   width: 100%;  
   height: auto;  
  }  
 </style>

Running the Vue application

Start the app with

npm run serve

and open http://localhost:5173/ in your favorite web browser to see the output below:
When you are ready to ship your app to production, run the following:

npm run build

This will create a production-ready build of your app in the project's ./dist directory.

Set Theme

The Smart Web Components product includes Material, Bootstrap and Fluent Themes. To set a theme, just include the "smart.[theme].css" file after smart.default.css and set your component's theme attribute to the theme name.

If you would like to customize or build a custom theme, you can use our Online Theme Builder web application.

Summary

You just learned how to setup a Vue 3 project and add a Grid Web Component with Sorting, Filtering, Grouping and Selection. To learn more about the Grid component, visit: Grid Demos and Documentation.

Complex Components

Core Components