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 React Wrapper

Table of Contents

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

Installation

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

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:

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'

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 [email protected] or visit https://docs.realgrid.com/