datatable component

DataTable.vue

<template>
<table class="data-table">
    <thead>
        <tr class="data-table-head">
            <th v-for="key in columns"
              @click="sortBy(key.name)"
              class="data-table-col-name"
              :class="[{ 'sort-active': sortKey == key.name }, key.thClass]">
              {{ key.name }}
                <div class="tooltip" v-if="key.tooltip !== ''">
                    <span class="tooltip-indicator">?</span>
                    <div class="tooltip-desc">
                        {{ key.tooltip }}
                    </div>
                </div>
                <span class="sort-arrow" :class="sortOrders[key.name] > 0 ? 'asc' : 'dsc'"></span>
            </th>
        </tr>
        <tr class="data-table-totals" v-if="totals.length > 0">
            <td class="data-table-col" :colspan="columns.length - totals.length">Totals</td>
            <td class="data-table-col col-center" v-for="total in totals">
                {{ total }}
            </td>
        </tr>
    </thead>
    <slot></slot>
</table>
</template>

<script>
export default {
    props: [ 'columns', 'totals' ],

    data() {
        var sortOrders = {}
        this.columns.forEach(function(key) {
            sortOrders[key.name] = 1;
        });

        return {
            sortKey: '',
            sortOrders: sortOrders
        }
    },

    methods: {
        sortBy: function (key) {
            this.sortKey = key
            this.sortOrders[key] = this.sortOrders[key] * -1
            this.$parent.$emit('dataTable.sortChange', this.sortKey, this.sortOrders[key]);
        }
    }
}
</script>