그리드 컬럼 생성하기
gridView 변수를 useRef를 통해 RealGridReact타입의 값을 참조 할 수 있도록 선언합니다.
기본적으로 그리드의 너비(width)와 높이(height) 값은 100%로 설정되어 있으며, 그리드의 컨테이너를 생성한 후 해당 컨테이너 내에 그리드를 배치하거나 직접 width와 height를 적용하여 너비 및 높이를 지정합니다.
아래와 같이 RealGridReact 컴포넌트를 생성하고, useRef를 활용하여 RealGridReact 컴포넌트에 접근할 수 있도록 합니다.
컬럼을 생성하기 위해서는 RGDataColumn 컴포넌트를 사용하며, 반드시 fieldName을 선언해야하고 필요에 따라 fieldName 이외의 속성들을 설정하려면, 해당 속성들을 field 객체 내부에 포함시킬 수 있습니다.
import { RGDataField, RGDataColumn, RealGridReact } from "realgrid-react"
const App = () => {
const gridRef = useRef<RealGridReact>(null);
return (
<div style={{width:"100%", height: "550px"}}>
<RealGridReact
ref={gridRef}
>
<RGDataField fieldName={"field1"}/>
<RGDataField fieldName={"field2"}/>
<RGDataColumn fieldName={"field1"} width={200}/>
<RGDataColumn fieldName={"field2"} width={200}/>
</RealGridReact>
</div>
)
}
export default AppRealGridReact 컴포넌트 속성 중 autoGenerateField 속성을 true로 설정 시 컬럼을 생성할 경우 자동으로 필드도 생성되게 하실 수 있습니다.
import { RGDataField, RGDataColumn, RealGridReact } from "realgrid-react"
const App = () => {
const gridRef = useRef<RealGridReact>(null);
return (
<div style={{width:"100%", height: "550px"}}>
<RealGridReact
ref={gridRef}
autoGenerateField={true}
>
<RGDataColumn fieldName={"field1"} width={200}/>
<RGDataColumn fieldName={"field2"} width={200}/>
</RealGridReact>
</div>
)
}
export default App컬럼 생성 시 아래 이미지와 같이 컬럼이 추가된 것을 확인 할 수 있습니다.
