Как использовать таблицы vue-matrial в jsx?

Я также играл с vuetify и получил аналогичные результаты, пока не разобрался с этим, а затем я также смог заставить его работать под vue-matrial.

Вот пример, который отображает две таблицы с vuetify и vue-matrial.

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

import { VDataTable, VProgressLinear } from "vuetify-tsx";
import { VDataTable as Test } from 'vuetify/lib';



let c = 0;

@Component
export default class RadarAdminPage extends Vue {


    headers = [
        {
            text: "name",
            align: "left",
            sortable: true,
            value: "name"
        },
        {
            text: "Queue Name",
            value: "queue"
        }
    ]

    search = null;
    searched = [] as Array<any>;
    items = [ ] as Array<any>;

    addItem() {
        this.items.push({
            id: c++,
            name: "Paxon Lotterington",
            email: "[email protected]",
            gender: "Female",
            title: "Marketing Assistant"
        });

        this.searched = this.items;
    }
    searchOnTable() {
        console.info("a");
    }
    created() {
        this.searched = this.items;
    }
    render() {
        console.info(this)
        return (
            <div class = "row">
                <div class = "col-12">

                    <VDataTable itemKey = "id" slot = "items:props" items = {this.searched} headers = {this.headers} scopedSlots = {{
                        items: function (prop) {

                            return [
                                <td>{prop}</td>,
                                <td class = "text-xs-right">vb</td>
                            ]
                        }
                    } as any}>
                        <VProgressLinear slot = "progress" color = "blue" indeterminate = {true} />

                    </VDataTable>

                    <div>
                        <md-table value = {this.searched} md-sort = "name" md-sort-order = "asc" md-card md-fixed-header scopedSlots = {
                            {
                                "md-table-empty-state": (prop)=> {
                                    return (
                                        <md-table-empty-state
                                            md-label = "No users found" md-description = "`No user found for this '${search}' query. Try a different search term or create a new user.`">
                                            <md-button class = "md-primary md-raised" onClick = {this.addItem}>Create New User</md-button>
                                        </md-table-empty-state>
                                    )
                                },
                                "md-table-row": function (prop) {

                                    return (
                                        <md-table-row slot = "md-table-row" >
                                            <md-table-cell md-label = "ID" md-sort-by = "id" md-numeric>{prop.item.id}</md-table-cell>
                                            <md-table-cell md-label = "Name" md-sort-by = "name">{prop.item.name}</md-table-cell>
                                            <md-table-cell md-label = "Email" md-sort-by = "email"> {prop.item.email}</md-table-cell>
                                            <md-table-cell md-label = "Gender" md-sort-by = "gender"> {prop.item.gender}</md-table-cell>
                                            <md-table-cell md-label = "Job Title" md-sort-by = "title"> {prop.item.title}</md-table-cell>
                                        </md-table-row>
                                    )
                                }
                            }
                        }>
                            <md-table-toolbar>
                                <div class = "md-toolbar-section-start">
                                    <h1 class = "md-title">Users</h1>
                                </div>

                                <md-field md-clearable class = "md-toolbar-section-end">
                                    <md-input placeholder = "Search by name..." vModel = {this.search} onInput = {this.searchOnTable} />
                                </md-field>
                            </md-table-toolbar>


                        </md-table>
                    </div>


                </div >
            </div >
        )
    }
}