# RealGrid-React

## Overview
`realgrid-react` is a React component for integrating RealGrid into your React applications. It provides a seamless way to add powerful grid functionalities to your project.

[RealGrid](https://www.npmjs.com/package/realgrid) React 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-react` component, use npm or yarn:

```bash
npm install realgrid-react
# or
yarn add realgrid-react
```

### 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-react in your project:

```jsx

import RealGrid from 'realgrid'
import '/realgrid/dist/realgrid-style.css'
import { useRef } from 'react'
import { RGDataColumn, RealGridReact } from 'realgrid-react'

const RealGridComponent = () => {
    const grid = useRef(null)
    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')

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

export default RealGridComponent


```


### 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/