<template>
    <div class="sd-table__inner-wrapper">
        <div class="hidden-columns">
            <slot/>
        </div>
        <sd-table-header/>
        <sd-table-body :data="props.data"/>
    </div>
</template>


<script name='SdTable' lang="ts">
import {ref, defineComponent, getCurrentInstance} from 'vue'
import {useNamespace} from "../sd-table/use-namespace";
import SdTableHeader from "../sd-table/table-header/SdTableHeader.vue";
import SdTableBody from "./table-body/SdTableBody.vue";

let tableIdSeed = 1

export default defineComponent({
    name: "SdTable",
    components: {SdTableBody, SdTableHeader},
    props: {
        data: {
            type: Array,
            default: []
        },
        defaultSort: Object
    },
    setup(props) {
        const store = ref({
            column: []
        })

        const getStore = () => {
            return store.value
        }
        const pushColumn = (val) => {
            store.value.column.push(val)
        }
        const ns = useNamespace('table')

        const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`
        const table = getCurrentInstance()
        table.tableId = tableId
        table.store = {
            column: []
        }

        return {
            getStore,
            pushColumn,
            tableId,
            props
        }
    },

});


</script>

<style scoped lang="scss">
.hidden-columns {
  visibility: hidden;
  position: absolute;
  z-index: -1;
}

.sd-table__inner-wrapper {
  background-color: white;
  padding: 5px;
  border-radius: 5px;
}
</style>
