Tuesday, June 25, 2024
HomeJavaScriptVue 3, Vite and jqxGrid

Vue 3, Vite and jqxGrid


This tutorial will present you the right way to use Vite together with the Vue Parts by jQWidgets.
Please, observe the directions under:

npm create vite@newest

Then select a undertaking identify eg. “my undertaking”, select Vue as a framework. Navigate to the undertaking you simply created.


cd my-project

npm set up
npm set up jqwidgets-scripts
npm run dev
		

Now open parts/HelloWorld.vue and exchange it with


<template>  
<div>  
		<JqxGrid :theme="'fluent'" :supply="supply" :columns="columns" :columngroups="columnGroups"></JqxGrid>  	
	</div>  
</template>  
<script>  
import { ref, onMounted } from 'vue'  
import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue3/vue_jqxgrid.vue';  
export default {  
	parts: {  
		JqxGrid  
	},  
	setup(props, context) {  
		  const columns = [
				{text: 'Id', datafield: 'id', columngroup: 'Details'},
				{text: 'Name', datafield: 'name', columngroup: 'Details'}
		  ];
		 
		  const supply = [
			  {id: 1, name: 'Hydrogen'},
			  {id: 2, name: 'Helium'},
			  {id: 3, name: 'Lithium'},
			  {id: 4, name: 'Beryllium'},
			  {id: 5, name: 'Boron'},
			  {id: 6, name: 'Carbon'},
			  {id: 7, name: 'Nitrogen'},
			  {id: 8, name: 'Oxygen'},
			  {id: 9, name: 'Fluorine'},
			  {id: 10, name: 'Neon'},
			  {id: 11, name: 'Sodium'},
			  {id: 12, name: 'Magnesium'},
			  {id: 13, name: 'Aluminum'},
			  {id: 14, name: 'Silicon'},
			  {id: 15, name: 'Phosphorus'},
			  {id: 16, name: 'Sulfur'},
			  {id: 17, name: 'Chlorine'},
			  {id: 18, name: 'Argon'},
			  {id: 19, name: 'Potassium'},
			  {id: 20, name: 'Calcium'}
			];

		const columnGroups = [
			{ text: 'Details', align: 'center', name: 'Details' }
		]
		onMounted(() => {  
		});  
		return {  
		 columnGroups,
		 supply,
		 columns
		}  
	}  
}  
</script>  
<type scoped>  
</type>
		

After that, open the index.html file and add a reference to our theme recordsdata.

<hyperlink rel="stylesheet" href="https://www.jqwidgets.com/vue-3-vite-and-jqxgrid/node_modules/jqwidgets-scripts/jqwidgets/kinds/jqx.base.css" kind="textual content/css" />
<hyperlink rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/kinds/jqx.fluent.css" kind="textual content/css" />

The result’s:

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments