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"
            :page="page"
            @filter-change="filterChanged"
            @page-change="pageChanged"
        >
            <template 
                v-for="columnName in slottedColumns"
                :slot="columnName"
                slot-scope="props"
            >
                test {{ props.row[props.column.property] }}
            </template>
        </vue-ads-table-tree>   
    </div>
</div>

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: 0,
        filter: '',
        slottedColumns: [
        	'firstName',
            'lastName',
        ],
        columns: [
            {
                property: 'firstName',
                title: 'First Name',
                direction: null,
                filterable: true,
                collapseIcon: true
            },
            {
                property: 'lastName',
                title: 'Last Name',
                direction: null,
                filterable: true
            },
        ],
        rows: [
            {
                firstName: 'Josephine',
                lastName: 'Astrid',
            },
            {
                firstName: 'Boudewijn',
                lastName: 'Van Brabandt',
            },
            {
                firstName: 'Albert II',
                lastName: 'Van Belgie',
                _children: [
                    {
                        firstName: 'Filip',
                        lastName: 'Van Belgie',
                        _children: [
                            {
                                firstName: 'Elisabeth',
                                lastName: 'Van Brabant',
                            },
                            {
                                firstName: 'Gabriel',
                                lastName: 'Boudwijn',
                            },
                            {
                                firstName: 'Emmanuel',
                                lastName: 'Van Belgie',
                            },
                            {
                                firstName: 'Eleonore',
                        ...