Load Data - RealGrid

Filling grid data

To fill data in the grid, you can fill values by specifying rows in RealGridReact. The values can be applied in JSON and Array formats. For data in JSON format, values are filled in fields whose data keys and created field names match, and for data in array format, values are filled sequentially according to the order of field creation in the two-dimensional array format.

import {RGDataField, RGDataColumn, RealGridReact } from "realgrid-react"
 
const App = () => {
    const gridRef = useRef<RealGridReact>(null);
 
    return (
        <div style={{width:"100%", height: "550px"}}>
            <RealGridReact 
                ref={gridRef}
                rows={[
                    ["컬럼1데이터","컬럼2데이터"],
                    ["컬럼1데이터","컬럼2데이터"]
                ]}
            >
                <RGDataField fieldName="field1"/>
                <RGDataField fieldName="field2"/>
                <RGDataColumn name="field1" fieldName="field1" width={200}/>
                <RGDataColumn name="field2" fieldName="field2"/>
            </RealGridReact>
        </div>
    )
}
 
export default App

When using json format data, the value is bound to the field whose field name matches the data key value.

import {RGDataField, RGDataColumn, RealGridReact } from "realgrid-react"
 
const App = () => {
    return (
        <div style={{width:"100%", height: "550px"}}>
            <RealGridReact 
                rows={[
                    {field1:"컬럼1데이터",field2:"컬럼2데이터"},
                    {field1:"컬럼1데이터",field2:"컬럼2데이터"}
                ]}
            >
                <RGDataField fieldName="field1"/>
                <RGDataField fieldName="field2"/>
                <RGDataColumn name="field1" fieldName="field1" width={200}/>
                <RGDataColumn name="field2" fieldName="field2"/>
            </RealGridReact>
        </div>
    )
}
 
export default App

You can see that data has been added to each column as shown below.

Column Creation Screen

Create grid column Set options