Datatables not showing

[irfanasri96]

Steps to reproduce

Hi I try to implement data tables to my project but somehow its not showing at first but after importing vuetify labs it shows but not what I expected:

here is my code:

<template>
    <div>
        <VRow>
            <VCol cols="12" align="end">
                <RouterLink to="/permohonan/create">
                    <VBtn prepend-icon="bx-plus-circle" size="small">Permohonan Baru</VBtn>
                </RouterLink>
            </VCol>

            <VCol cols="12">
                <VDataTable
                    :headers="headers"
                    :items="items"
                    height="250"
                    class="elevation-1"
                >
                    <template v-slot:[`item.pemohon`]="{ item }">
                        <span>{{ item.pemohon?.nama ?? '' }}</span>
                    </template>
                    <template v-slot:[`item.maklumat`]="{ item }">
                        <span>{{ item.maklumat?.nama_sistem_aplikasi ?? '' }}</span>
                    </template>
                    <template v-slot:[`item.created_at`]="{ item }">
                        <span>{{ item.created_at }}</span>
                    </template>
                    <template v-slot:[`item.actions`]="{ item }">
                        <RouterLink :to="`/permohonan/${item.id}`">
                            <VBtn icon>
                                <VIcon>bx-show</VIcon>
                            </VBtn>
                        </RouterLink>
                    </template>
                </VDataTable>
            </VCol>
        </VRow>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import PermohonanService from '../../../services/permohonan'

export default {
    setup() {
        const items = ref([])

        const headers = ref([
            { text: 'ID', value: 'id', class: 'text-uppercase' },
            { text: 'Pemohon', value: 'pemohon', align: 'center' },
            { text: 'Nama Sistem Aplikasi', value: 'maklumat', align: 'center' },
            { text: 'Tarikh Permohonan', value: 'created_at', align: 'center' },
            { text: 'Actions', value: 'actions', align: 'center' }
        ])

        const loadData = async () => {
            try {
                const response = await PermohonanService.lists()
                items.value = response.data.data
            } catch (error) {
                console.error('Failed to load data:', error)
            }
        }

        onMounted(() => {
            loadData()
        })

        return {
            items,
            headers,
            loadData
        }
    }
}
</script>

What is expected?

Expecting to show the details inside datatable

What is actually happening?

List.vue:43 [Vue warn]: Invalid VNode type: undefined (undefined) 
  at <Anonymous align=undefined fixed=undefined fixedOffset=0  ... > 
  at <VDataTableRow key="item_1" onClick=undefined index=0  ... > 
  at <VDataTableRows loading=false loadingText="$vuetify.dataIterator.loadingText" hideNoData=false  ... > 
  at <VTable class="v-data-table elevation-1" style= {}[[Prototype]]: Object height="250"  ... > 
  at <VDataTable headers= (5) [{…}, {…}, {…}, {…}, {…}]0: class: "text-uppercase"text: "ID"value: "id"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()1: {text: 'Pemohon', value: 'pemohon', align: 'center'}2: {text: 'Nama Sistem Aplikasi', value: 'maklumat', align: 'center'}3: {text: 'Tarikh Permohonan', value: 'created_at', align: 'center'}4: {text: 'Actions', value: 'actions', align: 'center'}length: 5[[Prototype]]: Array(0) items= [{…}] height="250"  ... > 
  at <VCol cols="12" > 
  at <VRow> 
  at <List onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > > 
  at <RouterView> 
  at <VCardText> 
  at <VCard> 
  at <VCol cols="12" > 
  at <VRow> 
  at <Permohonan onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false > > 
  at <RouterView> 
  at <VerticalNavLayout> 
  at <DefaultLayoutWithVerticalNav> 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView> 
  at <VApp style="--v-global-theme-primary: 0,124,213" > 
  at <App>

Additional data

[alokVishu]

Hello @irfanasri96,

In the current free version, we are utilizing Vuetify 3.3.1, and at this stage, the data table feature is in the testing phase. We are uncertain about its functionality while in this phase. However, in the latest version of Vuetify, the data table feature has been stabilized and is working properly.

We are planning to update both the pro and free versions of Sneat to the latest version, but this process will take a couple of months. If you still wish to use the data table feature, we recommend updating the Vuetify version to the latest one, or you can wait until we provide a release.

Best regards

[irfanasri96]

its showing now after updating vuetify but the header is still not showing, nvm I try to fix whatever I can. Tq for your support.

[yagnikvamja]

Hello @irfanasri96,

It seems there is an issue with the headers in your Vuetify data-table implementation. We recommend referring the proper way of passing header prop in data-table. You can find detailed guidance in the official Vuetify documentation: https://vuetifyjs.com/en/components/data-tables/basics/#headers

Here is the demo example for the same : Demo Example

[irfanasri96]

Ahh it works now thank you so much

[alokVishu]

Hello @irfanasri96,

We are glad to hear that your issue has been resolved.

We are closing this matter.

Feel free to reach out to us if you have any further queries.

Best regards