<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :grid-props="{edit: {insertable: true, appendable: true}, display: {rowHeight: 40}}"
            :data-props="{softDeleting: true}"
            :rows="[
                { field1: '컬럼1데이터', field2: '컬럼2데이터' },
                { field1: '컬럼1데이터', field2: '컬럼2데이터' },
            ]">
            <RGDataField v-for="field in fields" :key="field.fieldName" v-bind="field" />
            <RGDataColumn v-for="column in columns" :key="column.name" v-bind="column" />
        </RealGridVue>
    </div>
<template>
<script lang="ts">
    import { defineComponent, ref } from "vue";
    import { RealGridVue, RGDataField, RGDataColumn } from "realgrid-vue3";  
 
    const fields = [{name: "field1"}, {name: "field2"}];
    const columns = [
        {name: "field1", fieldName: "field1", width:200},
        {name: "field2", fieldName: "field2"}
    ];
 
    const gridProps = { 
        display: {
            rowHeight: 30,
            emptyMessage: '표시할 데이타가 없습니다.',
        },
        edit: {
            insertable: true,
            appendable: true,
        },
        checkBar: {
            visible: true,
            exclusive: true,
        },
        stateBar: {
            visible: true,
        },
        header: {
            height: 35,
        },
        footer: {
            visible: true,
            height: 25,
        },
        rowIndicator: {
            visible: true,
            width: 16,
        },
    }
 
    onMounted(async () => {
        const res = await fetch('/assets/simple_data.json')
        data.value = await res.json()
    })
</script>