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.
// 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.
