DataGridXL with Vue.js

This user manual provides instructions on how to implement DataGridXL into your project using Vue.

Getting Started

1. Creating Vue App

For up-to-date quick start instalation guide you can read more here.

2. Implementing component into your project

To install the DataGridXL Vue Component, you need to run the following command in your project directory:

npm install datagridxl @datagridxl/vue

3. Usage

After installing the package, you can import and use it in your project as follows:

<script setup>
import DgxlComponent from '@datagridxl/vue';
</script>

Here is a simple example how you can display basic grid:

<template>
  <div>
    <DgxlComponent
      ref="dgxlRef"
      :style="{height: '50vh', width: '50%'}"
    />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    DgxlComponent
  }
};
</script>

Here ``ref="dgxlRef"`` is used to create a reference to the component instance. This allows you to access properties and methods programmatically. It will be used in next step.

Next Steps

In the next part, you will learn how to pass data to the DataGridXL component.