RealGrid2 Tutorial
React Component Tutorial
Apply license and create grid

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 should 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.tsx
import RealGrid from "realgrid";
 
RealGrid.setLicenseKey("License Key");

or

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
    <script>
        var realGrid2Lic = "License Key";
    </script>
  </head>
  <body>
    <div id="root" style="width: 100%;"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Creating a grid

First, import RealGrid product, RealGridReact, and realgrid-style.

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

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

import * as RealGrid from 'realgrid'
import { RealGridReact } from 'realgrid-react'
import { useRef } from 'react'
import 'realgrid/dist/realgrid-style.css'
 
const SampleGrid: React.FC = () => {
    const gridRef = useRef<RealGridReact>(null)
    
    return (
        <div style={{ width: '100%', height: '550px'}}>
            <RealGridReact ref={gridRef}></RealGridReact>
        </div>
    )
}
InstallCreate grid column