Creating a grid column
Declare the gridView variable to reference the value of the RealGridReact type through useRef.
By default, the grid's width and height values are set to 100%. After creating a grid container, place the grid inside the container or directly apply width and height to specify the width and height.
Create a RealGridReact component as shown below and use useRef to access the RealGridReact component.
To create a column, use the RGDataColumn component, and you must declare fieldName. If you want to set properties other than fieldName, you can include those properties inside the field object.
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 AppIf you set the autoGenerateField property of the RealGridReact component to true, you can automatically create fields when creating columns.
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 AppWhen creating a column, you can see that the column is added as shown in the image below.
