const fields = ["text1", "text2", "text3", "text4", "text5", "text6", "text7"];
 
const layout = [
    "text1",
    "text2",
    {
      name: "group1", 
      direction: RealGrid.ColumnLayoutDirection.VERTICAL, 
      items:["text3","text4"]
    },{
      name: "group2", 
      direction: RealGrid.ColumnLayoutDirection.HORIZONTAL, 
      items:["text5","text6"]
    },
    "text7"
]
 
...
<RealGridReact 
  ref={gridRef}
  autoGenerateField={true}
  layout={layout}
  rows={[
    {text1:"DATA1", text2:"DATA2", text3:"DATA3", text4:"DATA4", text5: "DATA5", text6:"DATA6", text7:"DATA7"},
    {text1:"DATA1", text2:"DATA2", text3:"DATA3", text4:"DATA4", text5: "DATA5", text6:"DATA6", text7:"DATA7"},
  ]}
>
    {fields.map((field) => (
        <RGDataColumn name={field} fieldName={field} header={{text: field}} width={200}/>
    ))}
</RealGridReact>