Load Data - RealGrid

그리드 데이터 채우기

그리드에 데이터를 채우기 위해서는 RealGridReact에 rows를 지정해서 값을 채울 수 있습니다.
값은 JSON과 Array 형태의 값을 적용할 수 있습니다.
JSON 형태의 데이터는 데이터의 키와 생성한 필드명이 일치하는 필드에 값이 채워지며, 배열 형태의 데이터는 2차원 배열형태로된 데이터를 필드 생성 순서에 따라 값이 순차적으로 채워집니다.

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

json형태 데이터 사용시에는 필드명과 데이터 키 값이 일치하는 필드에 값이 바인딩 됩니다.

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

아래와 같이 데이터가 각 컬럼마다 추가된 것을 확인 할 수 있습니다.

컬럼 생성 화면

그리드 컬럼 생성 옵션 설정