<template>

    <div class="My-Table">
        <table>
            <thead>
                <tr>
                    <th v-for="(c, i) in columns" :key="i">
                        <span @click="orderBy(c.orderBy)" v-if="c.orderBy">{{ c.heading }} V</span>
                        <span v-else>{{ c.heading }}</span>
                    </th>
                </tr>
            </thead>
            <tbody is="transition-group" name="list">
                <tr v-for="(r, ri) in rows" :key="ri">
                    <td v-for="(c, ci) in columns" :key="ci + 'c'">
                        <span v-if="c.prop">{{ getProp(r, c.prop) }}</span>
                        <span v-else-if="c.render">{{ c.render(r) }}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</template>

<script>
export default {
    name: 'My-Table',
    props: {
       columns: {
           type: Array,
           default() {
                return [ ];
           }
       },
       rows: {
           type: Array,
           default() {
                return [ ];
           }
       }
    },
    data() {
        return {
        }
    },
    methods: {
        orderBy(col) {
            console.log(col);
            this.$emit('sort', {
                orderBy: col,
                orderDesc: false
            });
        },
        getProp(row, prop) {
            let props = prop.split('.');
            let val = row;
            props.forEach((p) => {
                if (typeof val == 'object') {
                    val = val[p];
                }
            });
            return val; 
        }
    }
}
</script>

<style>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>
