#### Creating Grid Fields and Columns

Create columns using the RGDataColumn component.

When creating columns and fields, field-name must be declared, and you can set properties other than field-name as needed.

You can create fields directly as follows, and you can set the auto-generate-field property to automatically create fields.


```vue
// RealGrid.vue
// auto-generate-field = false
<template>
<div style="width: 1000px; height: 400px">
    <RealGridVue
        ref="gridRef"
        :auto-generate-field="false">
        <RGDataField field-name="field1"></RGDataField>
        <RGDataField field-name="field2"></RGDataField>
        <RGDataColumn field-name="field1" :width="100" key="field1"></RGDataColumn>
        <RGDataColumn field-name="field2" :width="100" key="field2"></RGDataColumn>
    </RealGridVue>
</div>

</template>
// auto-generate-field = true
<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :auto-generate-field="true">
            <RGDataColumn field-name="field1" :width="100" key="field1"></RGDataColumn>
            <RGDataColumn field-name="field2" :width="100" key="field2"></RGDataColumn>
        </RealGridVue>
    </div>
</template>


<script setup lang="ts">
import RealGrid from "realgrid";
import { RealGridVue, RGDataColumn, RGDataField } from "realgrid-vue";
import { ref } from "vue";

const gridRef = ref<RealGridVue>();
</script>
```

When creating columns and fields, you can see that the columns are added as shown in the image below.

![Column creation screen](public/images/dataColumn.png)