데이터 타입과 에디터 설정하기
데이터 타입 설정
리얼그리드 DataProvider의 DataField는 Text, Number, Boolean, Datetime 중 하나가 될 수 있습니다.
데이터 타입을 적용하기 위해서는 realgrid컴포넌트의 RealGrid 클래스를 import해야 합니다.
필드 생성 시 하단 예시와 같이 dataType을 지정하고 원하는 RealGrid 클래스의 ValueType을 지정해서 사용 하면 됩니다.
import {RGDataField, RGDataColumn, RealGridReact } from "realgrid-react"
import { useRef} from "react";
import * as RealGrid from 'realgrid';
const App = () => {
const gridRef = useRef<RealGridReact>(null);
return (
<div style={{width:"100%", height: "550px"}}>
<RealGridReact
ref={gridRef}
rows={[
{field1:"text1", field2:10000, field3:"2023-01-01", field4:false},
{field1:"text2", field2:20000, field3:"2023-01-02", field4:true}
]}
>
<RGDataField fieldName={"field1"} dataType={RealGrid.ValueType.TEXT}/>
<RGDataField fieldName={"field2"} dataType={RealGrid.ValueType.NUMBER}/>
<RGDataField fieldName={"field3"} dataType={RealGrid.ValueType.DATETIME}/>
<RGDataField fieldName={"field4"} dataType={RealGrid.ValueType.BOOLEAN}/>
<RGDataColumn fieldName={"field1"} header={{text:"TEXT"}} width={200}/>
<RGDataColumn fieldName={"field2"} header={{text:"NUMBER"}} width={200}/>
<RGDataColumn fieldName={"field3"} header={{text:"DATETIME"}} width={200}/>
<RGDataColumn fieldName={"field4"} header={{text:"BOOLEAN"}} width={200}/>
</RealGridReact>
</div>
)
}
export default App각 타입에 대한 자세한 설명은 데이터 타입데모를 참조하세요.
에디터 설정
RGDataColumn 클래스 설정 시 editor속성을 아래와 같이 지정해서 편집 시 원하는 타입의 편집기로 사용할 수 있습니다.
<RGDataColumn
name={"col2"}
fieldName={"field2"}
header={{text:"NUMBER"}}
editor={{type:"number"}}
width={200}
/>
<RGDataColumn
name={"col3"}
fieldName={"field3"}
header={{text:"DATETIME"}}
editor={{type:"date"}}
width={200}
/>편집기에대한 설정 및 종류는 데모에서 확인하실 수 있습니다.