On Initialized - RealGrid

How to configure grid with existing JS method

Create fields and columns

You can create fields and columns through the grid object passed as an argument in onInitialized, an event that occurs after the grid is created.

When creating fields, you need to access dataProvider, so you can access the dataProvider object using grid.getDataSource() and create fields using the setFields() method.

You can check the basic guide on how to create fields and columns here.

import { RealGridReact, RGDataColumn } from "realgrid-react";
import * as RealGrid from "realgrid";
import { useRef } from "react";
import "realgrid/dist/realgrid-style.css";
import data from "./realgrid-data.ts";
import "./App.css";
 
function App() {
    const gridRef = useRef<RealGridReact>(null);
 
    const onInitialized = (grid: RealGrid.GridView) => {
        const fields = [
            {
                fieldName: "Name",
                dataType: RealGrid.ValueType.TEXT,
            },
            {
                fieldName: "FullName",
                dataType: RealGrid.ValueType.TEXT,
            },
            {
                fieldName: "Email",
                dataType: RealGrid.ValueType.TEXT,
            },
        ];
 
        const columns = [
            {
                name: "Name",
                fieldName: "Name",
            },
            {
                name: "FullName",
                fieldName: "FullName",
            },
            {
                name: "Email",
                fieldName: "Email",
            },
        ];
        grid.getDataSource().setFields(fields);
        grid.setColumns(columns);
    };
 
    return (
        <>
            <h2>RealGridReact Sample</h2>
            <div style={{ width: '100%', height: '550px' }}>
                <RealGridReact
                    ref={gridRef}
                    rows={data}
                    onInitialized={onInitialized}></RealGridReact>
            </div>
        </>
    );
}
 
export default App;

Apply grid options and events

You can apply grid options and events through RealGridReact component props, and you can apply them in the onInitialized event as well.

import { RealGridReact, RGDataColumn } from "realgrid-react";
import * as RealGrid from "realgrid";
import { useRef } from "react";
import "realgrid/dist/realgrid-style.css";
import data from "./realgrid-data.ts";
import "./App.css";
 
function App() {
    const gridRef = useRef <RealGridReact>(null);
 
    const onInitialized = (grid: RealGrid.GridView) => {
        ...생략
 
        // Apply grid options
         grid.displayOptions.emptyMessage = "표시할 데이타가 없습니다.";
         grid.header.height = 40;
         grid.displayOptions.rowHeight = 36;
         grid.footer.height = 40;
         grid.stateBar.width = 16;
         grid.editOptions.insertable = true;
         grid.editOptions.appendable = true;
 
        // Apply grid events
        grid.onCellClicked = (grid: RealGrid.GridView, clickData: RealGrid.ClickData) => {
            alert(clickData.column)
        }
    };
 
    return (
        <>
            <h2>RealGridReact Sample</h2>
            <div style={{ width: '100%', height: '550px' }}>
                <RealGridReact
                    ref={gridRef}
                    rows={data}
                    onInitialized={onInitialized}>
                </RealGridReact>
            </div>
        </>
    );
}
 
export default App;

Apply grid renderer Apply grid events