<template>
    <div class="customCell">
        <div class="customCell-item">
            {{ record[fieldName] }}
        </div>
        <div class="customCell-item" v-if="record.children && record.children[fieldName]">
            <div class="mt-5 ml0"
                style="border-left: 2px solid rgb(200,200,200); border-bottom: 2px solid rgb(200,200,200); height: 16px;width: 16px; float: left;">
            </div>
            <div style="margin-left: 5px;">
                {{ record.children[fieldName] }}
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
interface Props {
    record: any,
    fieldName: string,
};

const props = withDefaults(defineProps<Props>(), {

});
</script>

<style lang="scss" scoped>
.customCell {
    display: flex;
    flex-direction: column;
    justify-content: center;

    &-item {
        height: 40px;
        display: flex;
        align-items: center;
    }
}
</style>