Vue ADS Table Tree

Table tree

by arnedesmedt

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-ads-table-tree@latest/dist/vue-ads-table-tree.css">
<script src="https://unpkg.com/vue-ads-table-tree@latest/dist/vue-ads-table-tree.umd.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://unpkg.com/vue-ads-pagination@latest/dist/vue-ads-pagination.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-ads-pagination@latest/dist/vue-ads-pagination.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<div id="app" class="m-6">
    <div class="mb-6">
        <vue-ads-table-tree
                :columns="columns"
                :rows="rows"
                :filter="filterValue"
                @filter-change="filterChange"
            >
                <template slot="title">
                    <h2 class="leading-loose font-bold uppercase">
                        Belgium royal family
                    </h2>
                </template>
                <template
                    slot="firstName"
                    slot-scope="props">
                    <a
                        :href="`https://www.google.com/search?q=${props.row.firstName}+${props.row.lastName}`"
                        target="_blank">{{ props.row.firstName }}</a>
                </template>
                <template slot="filter">
                    <h3 class="inline pr-2">Filter:</h3>
                    <input
                        v-model="filterValue"
                        class="appearance-none border py-2 px-3"
                        type="text"
                        placeholder="Filter..."
                    >
                </template>
                <template
                    slot="pagination"
                    slot-scope="props"
                >
                    <vue-ads-pagination
                        :total-items="props.total"
                        :page="page"
            ...

Vue

const VueAdsTableTree = window["vue-ads-table-tree"].default;
const VueAdsPagination = window["vue-ads-pagination"].default;
const VueAdsPageButton = window["vue-ads-pagination"].VueAdsPageButton

new Vue({
    el: "#app",
    components: {
       VueAdsTableTree,
       VueAdsPagination,
       VueAdsPageButton,
    },
    
    data: {
    	page: 1,
        filterValue: '',
        classes: {
                table: {
                    'vue-ads-border': true,
                    'vue-ads-w-full': true,
                },
                info: {
                    'vue-ads-text-center': true,
                    'vue-ads-py-6': true,
                    'vue-ads-text-sm': true,
                },
                'all/': {
                    'hover:vue-ads-bg-grey-lighter': true,
                },
                'even/': {
                    'vue-ads-bg-grey-lightest': true,
                },
                'odd/': {
                    'vue-ads-bg-white': true,
                },
                '0/': {
                    'vue-ads-bg-grey-lightest': false,
                    'hover:vue-ads-bg-grey-lighter': false,
                },
                '0_-1/': {
                    'vue-ads-border-b': true,
                },
                '/0_-1': {
                    'vue-ads-border-r': true,
                },
            },
            columns: [
                {
                    property: 'firstName',
                    title: 'First Name',
                    direction: null,
                    filterable: true,
                },
                {
                    property: 'lastName',
                    title: 'Last Name',
                    direction: null,
                    filterable: true,
                    groupable: true,
                    hideOnGroup: false,
                },
            ],
            rows: [
                {
                    firstName: 'Josephine',
                    lastName: 'Astrid',
          ...