# 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](https://www.npmjs.com/package/realgrid) Vue Wrapper

## Table of Contents

-   [Install](#install)
-   [License](#license)
-   [Usage](#usage)
    -   [Styles](#styles)
    -   [Library Target](#library-target)
-   [Example](#example)
-   [Support](#support)

## Installation

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

```bash
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:

```vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { RealGridVue, RGDataColumn } from 'realgrid-vue'
import RealGrid, { ValueType, GridBase, GridCell, IndicatorValue, SyncGridHeight } from 'realgrid'

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>

<style>
@import '../../node_modules/realgrid/dist/realgrid-style.css';
</style>

```

### styles

-   The themes are located in './dist'

```jsx
import '../node_modules/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 support@realgrid.com
or visit https://docs.realgrid.com/