ActualTable.vue

<template>
    <table-component
        :data="members"
        sort-by="lastName"
        sort-order="asc"
    >
        <template slot-scope="{ state, rows }">
            <div>
                <input v-model="state.filterQuery">
                <table>
                    <thead>
                        <table-header name="firstName">First name</table-header>
                        <table-header name="lastName">Last name</table-header>
                        <table-header name="instrument">Instrument</table-header>
                        <table-header name="songs">Songs</table-header>
                    </thead>
                    <tbody>
                        <tr v-for="row in rows" :key="row.firstName">
                            <td>{{ row.firstName }}</td>
                            <td>{{ row.lastName }}</td>
                            <td>{{ row.instrument }}</td>
                            <td>{{ row.songs }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </template>
    </table-component>
</template>

<script>
import { TableComponent, TableHeader } from 'vue-table-component';

export default {
    components: {
        TableComponent,
        TableHeader,
    },

    data: () => ({
        members: [
            {
                firstName: 'John',
                lastName: 'Lennon',
                instrument: 'Guitar',
                birthday: '04/10/1940',
                songs: 72,
            },
            {
                firstName: 'Paul',
                lastName: 'McCartney',
                instrument: 'Bass',
                birthday: '18/06/1942',
                songs: 70,
            },
            {
                firstName: 'George',
                lastName: 'Harrison',
                instrument: 'Guitar',
                birthday: '25/02/1943',
                songs: 22,
            },
            {
                firstName: 'Ringo',
                lastName: 'Starr',
                instrument: 'Drums',
                birthday: '07/07/1940',
                songs: 2,
            },
        ],
    }),
};
</script>

NotATable.vue

<template>
    <table-component
        :data="members"
        sort-by="lastName"
        sort-order="asc"
    >
        <template slot-scope="{ state, rows }">
            <div>
                <input v-model="state.filterQuery">
                <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }">
                    <div v-for="row in rows" :key="row.firstName">
                        <strong>Name</strong>: {{ row.firstName }} {{ row.lastName }} <br>
                        <strong>Instrument</strong>: {{ row.instrument }} <br>
                        {{ row.songs }} 🎶
                    </div>
                </div>
            </div>
        </template>
    </table-component>
</template>

<script>
import { TableComponent } from 'vue-table-component';

export default {
    components: {
        TableComponent,
    },

    data: () => ({
        members: [
            {
                firstName: 'John',
                lastName: 'Lennon',
                instrument: 'Guitar',
                birthday: '04/10/1940',
                songs: 72,
            },
            {
                firstName: 'Paul',
                lastName: 'McCartney',
                instrument: 'Bass',
                birthday: '18/06/1942',
                songs: 70,
            },
            {
                firstName: 'George',
                lastName: 'Harrison',
                instrument: 'Guitar',
                birthday: '25/02/1943',
                songs: 22,
            },
            {
                firstName: 'Ringo',
                lastName: 'Starr',
                instrument: 'Drums',
                birthday: '07/07/1940',
                songs: 2,
            },
        ],
    }),
};
</script>