<template>
    <div class="sd-table-header">
        <div v-for="item in column"
             class="sd-th"
             :style="{width: item.width +'px'}">
            {{ item.label }}
        </div>
    </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, nextTick, onMounted, ref} from "vue";

const instance = getCurrentInstance()
let parent = instance.parent
const column = ref([])

const owner = computed(() => {
    let parent = instance.parent as any
    while (parent && !parent.tableId) {
        parent = parent.parent
    }
    return parent
})

onMounted(async () => {
    await nextTick()
    column.value = owner.value.store.column
})
</script>

<style lang="scss">
.sd-table-header {
    display: flex;
    border-bottom: 1px solid black;
    background-color: white;

    .sd-th {
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-grow: 0;
        flex-shrink: 0
    }
}
</style>
