### Setting data type and editor

#### Setting data type

The DataField of RealGrid DataProvider can be one of four data types.
They are Text, Number, Boolean, and Datetime, and they are declared as RealGrids.DataType constants.

To apply the data type, you must import the RealGrid class of the realgrid component.
When creating a field, specify the dataType as in the example below and use it by specifying the ValueType of the desired RealGrid class.

```tsx
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
```
For detailed descriptions of each type, see [Data Please refer to the demo of [Type](/guides/data-manager/data-type).

![Data Type Output Screen](public/images/dataType.png)

#### Editor Settings

When setting the RGDataColumn class, you can use the editor of the desired type when editing by specifying the editor property as follows.

```tsx
<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}
/>
```

You can check the settings and types of editors in [demo](/guides/editor/text-editor).