realgrid-vue2

RealGrid-Vue

Overview

realgrid-vue is a Vue component for integrating RealGrid into your Vue applications. It provides a seamless way to add powerful grid functionalities to your project.

RealGrid Vue Wrapper

Table of Contents

• Install
• License
• Usage
  • Styles
  • Library Target
• Example
• Support

Installation

To install the realgrid-vue component, use npm or yarn:

npm install realgrid-vue
# or
yarn add realgrid-vue

License

The License file is required for proper use. More information, visit: http://service.realgrid.com/start

Usage

basic example

Here's a basic example of how to use realgrid-vue in your project:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { RealGridVue, RGDataColumn } from 'realgrid-vue'
import RealGrid, { ValueType, GridBase, GridCell, IndicatorValue, SyncGridHeight } from 'realgrid'
import '../../node_modules/realgrid/dist/realgrid-style.css'

const grid1 = ref<RealGridVue>()
const gridData = ref()

 const data = [
        { id: 1, name: 'John Doe', age: 30 },
        { id: 2, name: 'Jane Smith', age: 27 },
        { id: 3, name: 'Alice Johnson', age: 35 },
        { id: 4, name: 'Bob Brown', age: 22 },
        { id: 5, name: 'Charlie Davis', age: 28 },
        { id: 6, name: 'Dana White', age: 33 }
    ]
RealGrid.setLicenseKey('Your LicenseKey')

</script>

<template>
   <div style={{ width: '100%', height: '550px' }}>
        <RealGridVue ref={grid} rows={data} autoGenerateField={true}>
            <RGDataColumn name='id' fieldName='id' />
            <RGDataColumn name='name' fieldName='name' />
            <RGDataColumn name='age' fieldName='age' />
        </RealGridVue>
    </div>
</template>

styles

• The themes are located in './dist'

import 'realgrid/dist/realgrid-style.css'

Library Target

• index.es.js for ES
• index.cjs.js for commonjs

Example

visit: https://github.com/realgrid/realgrid2-examples

Support

If you encounter any issues or have questions, please open an issue on GitHub or contact our support team at [e-mail] or visit https://docs.realgrid.com/