<template>
  <div style="width: 1000px; height: 400px">
    <RealGridVue
      ref="gridView"
      :rows="rows"
      :layout="gridLayout"
    >
      <template v-for="(field, index) in fields" :key="field">
        <RGDataField
          :field-name="field"
        />
        <RGDataColumn
          :field-name="field"
          :name="`field"
          :width="100"
        />
      </template>
    </RealGridVue>
  </div>
</template>
 
 
<script setup lang="ts">
import { ref } from 'vue';
import * as RealGrid from 'realgrid';
import { RealGridVue, RGDataField, RGDataColumn } from 'realgrid-vue';
 
const gridRef = ref<RealGridVue>();
 
const 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"},
];
const fields = ["text1", "text2", "text3", "text4", "text5", "text6", "text7"];
 
const gridLayout = [
    "text1",
    "text2",
    {
      name: "group1", 
      direction: RealGrid.ColumnLayoutDirection.VERTICAL, 
      items:["text3","text4"]
    },{
      name: "group2", 
      direction: RealGrid.ColumnLayoutDirection.HORIZONTAL, 
      items:["text5","text6"]
    },
    "text7"
];
</script>