Create Grid - RealGrid

Applying license and creating grid

Applying license

You can obtain a license from the support.realgrid.com (opens in a new tab) site.

The license must be set globally by default, and there are two ways to apply the license.

You can apply the license using the script tag in the index.html file as follows, or you can apply it through the RealGrid.setLicenseKey() function.

// App.Vue
import RealGrid from "realgrid";
 
RealGrid.setLicenseKey("License Key");

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="imfield2/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite + Vue + TS</title>
        <script>
            var realGrid2Lic = "License Key";
        </script>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

Creating a grid

First, import the RealGrid product and RealGridVue.

<script setup lang="ts">
    import RealGrid from "realgrid";
    import { RealGridVue } from "realgrid-vue";
    import { ref } from "vue";
    
    const gridRef = ref<RealGridVue>();
</script>

Declare a variable called gridRef using ref() and connect it via ref so that it can access the RealGridVue component.

By default, the grid's width and height values are set to 100%. After creating a grid container, place the grid in that container or directly apply width and height to specify the width and height.

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue ref="gridRef"></RealGridVue>
    </div>
</template>

Finally, import realgrid-style.css in App.vue so that the grid's CSS style can be applied.

// App.vue
<script setup lang="ts">
    import RealGridComp from "./components/RealGridComp.vue";
</script>
 
<template>
    <RealGridComp></RealGridComp>
</template>
 
<style>
    @import "realgrid/realgrid-style.css";
</style>

Install Create grid column