vuetrify2-dynamic-table.js

<v-data-table
    v-model="selectedItems"
    :headers="fullHeaders"
    :items="items"
    :options="pagination"
    hide-default-footer
    :show-select="selectable"
    :items-per-page="itemsPerPage || itemsLimit"
>
    <template v-slot:[`item.${header.value}`]="{ item, header }" v-for="header in fullHeaders">
        <v-flex :key="header.value">
            <router-link
                v-if="header.type === 'url'"
                :to='header.url(item)'
            >
                {{ getPropValue(item, header.value) }}
            </router-link>
            <v-checkbox
                class="ma-0"
                v-else-if="header.type === 'checkbox'"
                disabled
                :input-value="getPropValue(item, header.value)"
                primary
                hide-details
            />
            <v-flex v-else-if="header.type === 'img' && Array.isArray(item[header.value])" :style="header.styles">
                <v-container grid-list-sm fluid>
                    <v-layout wrap>
                        <v-flex xs4 v-for="img in item[header.value]" :key="img">
                            <v-card flat tile class="justify-center">
                                <v-img :src="img" :max-width="header.maxWidth"/>
                            </v-card>
                        </v-flex>
                    </v-layout>
                </v-container>
            </v-flex>
            <v-flex v-else-if="header.type === 'img'" :style="header.styles">
                <v-card flat tile>
                    <v-img :src="item[header.value]" :max-width="header.maxWidth"/>
                </v-card>
            </v-flex>
            <v-flex v-else :class="header.classes" :style="header.styles">
                {{ getPropValue(item, header.value) }}
            </v-flex>
        </v-flex>
    </template>
    <template v-slot:item.actions="{ item }">
        <v-icon
            v-if="editable"
            small
            class="mr-2"
            @click="editItem(item)"
        >
            edit
        </v-icon>
        <v-icon
            v-if="removable"
            small
            class="mr-2"
            @click="removeItem(item)"
        >
            delete
        </v-icon>
    </template>
</v-data-table>

// Example of using

<template>
    <base-table
        ref="table"
        :headers="headers"
        v-bind="$props"
        @selected="selectedItems"
        @remove="removeItems"
        @edit="editItem"
        @current-page="currentPage"
    >
        <template #title>
            <slot name="title"/>
        </template>
        <template #actions>
            <slot name="actions"/>
        </template>
    </base-table>
</template>

<script>
import BaseTable from 'components/tables/base/BaseTable'
import { TableMixin } from 'mixins/TableMixin'
import { TableActionsMixin } from 'mixins/TableActionsMixin'
import { TablePaginationMixin } from 'mixins/TablePaginationMixin'

export default {
    name: 'OffersTable',
    components: { BaseTable },
    mixins: [TableMixin, TableActionsMixin, TablePaginationMixin],
    data () {
        const offerTextStyle = {
            maxHeight: '100px',
            overflow: 'hidden',
        }
        return {
            headers: [
                { text: 'ID', value: 'id', width: 100 },
                { text: 'Language', value: 'lang.code' },
                { text: 'Text', value: 'text', styles: offerTextStyle },
                { text: 'Default', value: 'isDefault', type: 'checkbox' },
            ],
        }
    },
}
</script>